Tag Archives: AngularJS

AngularJS NVD3 Directives for Dash

Most recent addition for Dash is the documentation for the AngularJS NVD3 Directives by Christian Maurer

angularjs-nvd3-directives

Add the documentation from here… Direct Link

Tagged , , , , ,

AngularJS Directive… preloader experiment

I’m still a newbie to AngularJS development, however I have to admit that I’m having a lot of fun thinking of new directives and exploring increasingly better ways to implement them, mostly inspired by the lively and vital AngularJS community.

I’m posting one of my most recent experiments which was to have a very simple way to add preloading functionality to an AngularJS application… and this i what I came up with.

Please note that this is purely experimental and the reason for me posting it is to allow others to start thinking of their own directives as well as learn something in the process..

Now… one of my objectives was that I wanted to be able to point to an external file for the preloader content, however the preloader content should also be able to contain AngularJS itself.

This lead me to the use of the AngularJS-native “include” directive and the “$compile” service.

The actual implementation of the loading was out of scope for this small experiment, so I decided to fake it with a simple timer using the relatively new “$timeout” service, which recently replaced the “$defer” service as a way of postponing function calls.

Furthermore, since basically every application I build contains some level of DOM manipulation, I have no problem with having jQuery as a pre-requisite, so the implementation is using jQuery for the DOM manipulation, however it would be trivial to remove or replace this requirement.

AngularJS Community Member, Glen Maddern, has been so kind to post my experiment as a executing sample in the form of a Gist on GitHub:
http://2886724.run-a-gist.herokuapp.com/

The contents of the splash.html is very crude for this example, however it could be any HTML content…

<h1 ng-click="clickHandler(event)" ng-controller="PreloaderController">
	Loading, please wait...still loading {{percentCompleted}}%
</h1>

As you can see in the the snippet above, the preloader HTML is driven by a PreloaderController… and it has a clickHandler for demo purposes to shurtcut the preloading…

function PreloaderController( $scope, $timeout ) {

	$scope.percentCompleted = 0;

	$scope.applicationProgressMock = function() {

		if( $scope.percentCompleted == 100 ) {
			$scope.$emit( "applicationComplete" );
		}
		else
		{
			$scope.percentCompleted += 5;
			$timeout( $scope.applicationProgressMock, 100 );
		}
	}
	$timeout( $scope.applicationProgressMock, 100 );

	$scope.clickHandler = function( event ) {
		$scope.percentCompleted = 100;
	}
}

The directive itself is fairly simple and straightforward JavaScript…

PreloaderFactory = function( $compile ) {

	var directive = {

		restrict : "A",

		link : function( scope, elm, attrs ) {

			scope.preloader = jQuery( "<ng-include />" );
			scope.preloader.attr( "src", "'"+ attrs.preloader +".html'" );

			$compile( scope.preloader )( scope );

			jQuery( "body" ).append( scope.preloader );

			scope.$on( "applicationComplete", function( event ) {

				jQuery( scope.preloader ).remove();
			});
		}
	}
	return directive;
}

Now, my main HTML looks like this, pretty advanced app…

<html ng-app="application" preloader="splash">
  <head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>Preloader Experiment</title>
    
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="preloader-0.0.1.js"></script>
    
    <script>
    
    	angular.module( "application", [] )
    	
    	.directive( "preloader", PreloaderFactory );
    	
    </script>
    
  </head>
  <body>
  
  </body>
</html>

That’s it, a faily simple and crude implementation of a preloader tag… comments are much appreciated, however please note that this was purely intended as an inspiration and not a cookbook recipe…

In any case I decided to put it on GitHub… I sincerely hope to be able to get much more samples up there and that they will increase in quality…
https://github.com/pmoelgaard/labs/tree/master/angular/preloader-directive

Tagged ,

How to implement a BLINK tag in AngularJS

One of the features of early HTML that is so uncool that it’s so extremely cool now that it has taken epic proportions, is that much celebrated as well as hated BLINK tag…

Now, it disappeared from most implementations due to the massive criticism it received, In 1996 Jakob Nielsen even described the element as “simply evil” in his Alertbox column Top Ten Mistakes in Web Design.

Anyways, its back for the ones who think it could be a fun little thing to add anywhere, and now with AngularJS… let me just add, that I think it would be a horrible idea to put it in any website short of being a tribute website to horrible websites from the 80′s…


var blink = angular.module('blink', [])
    .directive('blink', function($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            function showElement() {
                $element.css("display", "inline");
                $timeout(hideElement, 1000);
            }

            function hideElement() {
                $element.css("display", "none");
                $timeout(showElement, 1000);
            }
            showElement();
        },
        template: '<span ng-transclude></span>',
        replace: true
    };
});​

Using it from HTML would be as simple as this…


<div ng-app="blink">
    <blink>Forward Thinking</blink>
</div>​

You can check out the JSFiddle here…
http://jsfiddle.net/qy7Bt/59/

The initial implementation was created by Søren Kyndi-Wiuff and it was then later refined to support a more mature version of AngularJS by Misko Hevery, both guys heavy-weight contributors to AngularJS… helped along the way by Mr. Ganaraj who was kind enough to point out and illustrate deprecated parts of the AngularJS…

Check out AngularJS if you haven’t done so yet and you are in the process of working on HTML systems, this is how HTML would have been if it had been created for Applications…
angularjs.org

Tagged , , ,

Using Angular with jQuery

When familiarizing oneself with AngularJS, its on some occasions a forthcoming thought if this is all you need since they do exclude each other in many ways, however they have been build with two very different perspectives on application design… jQuery is basically a library focused on DOM querying and manipulation, AngularJS is an application framework and micro-architecture…

That they however are not entirely mutually exclusive becomes evident when diving in to the angular.element method… as it turns out Angular is actually using jQuery (or of jQuery is not loaded, an embedded version referred to as jqLite).

angular.element wraps a raw DOM element or HTML string as a jQuery element. angular.element can be either an alias for jQuery function, if jQuery is available, or a function that wraps the element or string in Angular’s jQuery lite implementation (commonly referred to as jqLite).

Real jQuery always takes precedence over jqLite, provided it was loaded before DOMContentLoaded event fired.

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality within a very small footprint, so only a subset of the jQuery API – methods, arguments and invocation styles – are supported.

Note: All element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

So, if you are using Angular as your application framework and you see a need to use jQuery for one or more of the many things jQuery is absolutely amazing and almost second to none, then don’t hesitate to do so, they are both great system citizens and work great as peers in your applications…

Tagged , ,

AngularJS… by Google

AngularJS is by far one of the most promising frameworks to fill the gap of JavaScript development in the RIA developer’s toolbox…. so regardless of me posting about it before, I felt compelled to do it again…

Image

The übercool thing about AngularJS is that its entirely unobtrusive and an excellent system citizen, it works perfectly fine together with any other framework you may depend on…

Brackets is build using jQuery, so targeting technology agnosticism when choosing an application framework is empiric… enter AngularJS.

Comparing to KnockoutJS and BackboneJS; AngularJS is definitely comparable in features and the coding elegance is by far higher than with either of the aforementioned…

Check it out (again)…
http://angularjs.org

Tagged , ,

AngularJS – What HTML would have been had it been designed for web apps

You may say it was love at first sight when I first laid eyes on the clean and simple code of Flex in the form of MXML back in 2005…

My long lost love “DataBinding” never really made it fully due to the inherent performance issues with bubbling on a massive scale, however no love is perfect and no love is everlasting… Now that I by the course of faith have been forced to abandon Flex for future projects since my clients are unlikely to consider Spoon Project with the same trust as the did with Adobe.

Among some of the candidates for replacing parts of Flex, there is the AngularJS framework which provides a nice MVC structure and some really cool ways to work around the nature of HTML and its shortcomings as a RIA platform…

The last couple of projects I have been involved in, we have used Angular, and with significant success and pleasure. It far from covers the vast scope of the Flex framework, however it does take the concerns of data-spagetti out and allows us to reuse all the databinding mechanisms we have been used to from Flex…

Hint: In AngularJS a databinding expression is done by using double {{}} instead of single {} in Flex… that’s the biggest difference at this point.

The 4 initial notable aspects of Angular JS are…

  1. Declarative UI Templates
    HTML is already a good templating language; angular makes it better. Preview your UI in your favorite HTML editor.
  2. Two-Way Data Binding
    With angular, the view and data model are always in sync — there is no need for manual DOM manipulation.
  3. Framework
    Angular supports the entire development process, provides structure for your web apps, and works with the best JS libraries.
  4. MVC with Dependency Injection
    Separation of concerns, loose coupling, and inversion of control — all the good stuff for testable and maintainable code.

Check it out…
http://angularjs.org/

Tagged ,
Follow

Get every new post delivered to your Inbox.

Join 522 other followers