1.      AngularJS Routing  //trans app to single page app

a.      ngView and template

template can be a html file generate in fly.

b.     $routerProvider

var eventsApp = angular.module('eventsApp', ['ngResource'])

    .config(function ($routeProvider, $locationProvider) {

        $routeProvider.when('/newEvent',

            {

                templateUrl:'templates/NewEvent.html',

                controller: 'EditEventController'

            });

$routeProvider.otherwise({redirectTo: '/events'});//default

//In the bar

<a href=”#/newEvent”>Create Event</a>

c.      Template only load once and save to cache

d.     $routeParams

eventsApp.controller('EventController',

    function EventController($scope, eventData,routeParams) {

        $scope.sortorder = 'name';

        $scope.event = eventData.getEvent($routeParams.eventId);

 

    1. $route service

//use $route.current.foo to get querysting ?foo=bar

eventsApp.controller('EventController',

    function EventController($scope, $route) {

               $scope.sortorder = 'name';

        $scope.event = $route.current.locals.event;

 

    }

);

$routeProvider.when('/event/:eventId',

            {

                templateUrl: '/templates/EventDetails.html',

                controller: 'EventController',

                resolve: { //for slow loading page

                    event: function($q, $route, eventData) {

                        var deferred = $q.defer();

                        eventData.getEvent($route.current.pathParams.eventId) //pathparams not has querysting

                            .then(function(event) { deferred.resolve(event); });

                        return deferred.promise;

                    }

                }

            });

 

f.     $route.reload()  reload the page without refresh.

 

g.      HTML5 routing

Add         $locationProvider.html5Mode(true);  in .config(), will not need # in html, may nee server change to redirect it to your index.html

 

 

h.      $location service

eventsApp.controller('MainMenuController',

    function MainMenuController($scope, $location) {

        console.log('absUrl: ', $location.absUrl());

        console.log('protocol: ', $location.protocol());

        console.log('port: ', $location.port());

        console.log('host: ', $location.host());

        console.log('path: ', $location.path());

        console.log('search ', $location.search());

        console.log('hash: ', $location.hash());

        console.log('url: ', $location.url());

 

        $scope.createEvent = function() {

            $location.replace();

            $location.url('/newEvent');

        };

    })

 

$location.url(‘newUrl’) to navigate to a new view

$location.search() to access to the querystring parameters

 

                                                                                                                             

2.      Custom directives : custom elements, custom events, observe and react to Changes

a.      Create directive

eventsApp.directive(‘mySample’,function(){

return {

    linke:function(scope,element,attrs,controller){

    var markup= “<input type=’text’ ng-model=’sampleData’ /> {{sampleData}}<br>”;

angular.element(element).html($compile(markup)(scope));

}

}

});

b.      Html

//html  mySample will transfer to my-sample by angular

<div my-sample></div>

<my-sample/>

<div class=’my-sample’></div>

//E,A,C and M  ‘E’:element, A:attributes C: for class

 

c.      Use template in directive

//use template replace first  example

eventsApp.directive(‘mySample’,function($compile){

               return{

                              restrict: ‘E’

                              Template:”<input type=’text’ ng-model=’sampleData’/>{{sampleData}}” 

}

});

d.      Isolate scope

eventsApp.directive('eventThumbnail', function() {

    return {

        restrict: 'E',

        templateUrl: '/templates/directives/eventThumbnail.html',

        replace: true,

        scope: {

            event: "=" //you also can use &prefix for parent scope

        }

 

    }

});

<li ng-repeat="event in events|orderBy:sortorder" class="span5">

            <event-thumbnail event="event" />

        </li>

 

e.      Handle events

   eventsApp.directive('gravatar', function(gravatarUrlBuilder) {

   return {

       restrict: 'E',

       template: '<img />',

       replace: true,

       link: function(scope, element, attrs, controller) {

               //element.on(‘click’,function(){..});

           attrs.$observe('email', function(newValue, oldValue) {

               if (newValue !== oldValue) {

                   attrs.$set('src', gravatarUrlBuilder.buildGravatarUrl(newValue));

               }

           });

       }

 

   }

 });

//  <gravatar email="{{user.emailAddress}}"/>

 

f.     Use controller in directive

eventsApp

    .directive('greeting', function() {

        return {

            restrict: 'E',

            replace: true,

            transclude: true,

            template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>",

            controller: function($scope) {

                var greetings = ['hello'];

                $scope.sayHello = function() {

                    alert(greetings.join());

                }

                this.addGreeting = function(greeting) {

                    greetings.push(greeting);

                }

            }

        };

    })

 

Controller can be defined in anyway, just need controller: ‘controllerName’

 

Controller name can passed in directive attributes.

<greeting ctrl=’controllername’ />

 

..//in directive

controller: @,

name:’ctrl’

 

g.    Sharing directive controllers via Require

<greeting finish  hindi/>

.directive('finnish', function() {

        return {

            restrict: 'A',

            require: 'greeting',

            link: function(scope, element, attrs, controller) {

                controller.addGreeting('hei');

            }

        }

    })

    .directive('hindi', function() {

        return {

            restrict: 'A',

            require: 'greeting',

            link: function(scope, element, attrs, controller) {

                controller.addGreeting('नमस्ते');

            }

        }

    });

 

 

h.    Directive priority and user Terminal

Priority:1 –priority can be nagitive

Terminal:true

 

i.      Using require with Nested directives

<greeting ng-transclued>

               <div hindi></div>

</greeting>

Transclued:true

require: '^greeting',  //lookup the directive

 

 

j.      Transclusion

 

k.     Using compile to Transform the dom

eventsApp.directive('repeatX', function() {

    return {

        compile: function(element, attributes) {

            for (var i=0; i < Number(attributes.repeatX)-1; i++) {

                element.after(element.clone().attr('repeat-x', 0));

            }

            return function(scope, element, attributes, controller) {

                attributes.$observe('text', function(newValue) {

                    if (newValue === 'Hello World') {

                        element.css('color', 'red');

                    }

                });

            }

        }

    };

});

 

Text to repeat: <input type="text" ng-model="text"/>

             <div repeat-x="5" text='{{text}}'>{{text}}</div>

 

l.      Use jQuery in directives

Include the jqueryUI, and put something like datepicker in a directive. But it is not nessary, you can use jqueryUI directly.