AngularJS

AngularJS

AngularJS Service

It’s actually better to use services where possible, when it comes to migrating to ES6. The reason for that is simply that a service is a constructor function and a factory is not. Working with constructor functions in ES5 allows us to easily use ES6 classes when we migrate to ES6.


module.service('MyService', function() {

    this.method1 = function() {
            //..method1 logic
        }

    this.method2 = function() {
            //..method2 logic
        }
});

AngularJS Factory

module.factory('MyFactory', function() {

    var factory = {}; 

    factory.method1 = function() {
            //..method1 logic
        }

    factory.method2 = function() {
            //..method2 logic
        }

    return factory;
}); 

AngularJS Controller

angular.module('myApp')
  .controller('AdminCtrl', ['$scope', 'admin',
        'AUTH_EVENTS','$rootScope', 'MSG','RESOURCES','$state','AuthService',
    function ($scope, admin,AUTH_EVENTS,$rootScope,MSG,RESOURCES,$state,AuthService) {

        init();

        $scope.add = function (newAdmin) {
        if ($scope.newAdminForm.$valid) {
          admin.create(newAdmin).then(function (res) {
            if(res.StatusCode == 1){
              $rootScope.$broadcast(AUTH_EVENTS.serverStatus,true,MSG.admin.createSuccess);
              $scope.newAdmin.submit = true;
              init();
              $scope.newAdminForm.$setPristine();
             }
             else{
              $rootScope.$broadcast(AUTH_EVENTS.serverStatus,false,MSG.admin.createFailed);
             }
                }, function () {
                });
            }
        };

}]);

Compile and Link

Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases.
  1. Compile: traverse the DOM and collect all of the directives. The result is a linking function.
  2. Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth.
In compile phase the angular parser starts parsing the DOM and whenever the parser encounters a directive it create a function. These functions are termed as template or compiled functions. In this phase we do not have access to the $scope data.
In the link phase the data i.e. ($scope) is attached to the template function and executed to get the final HTML output.
For a DOM of custom directives tp and sp nested as follows:
<tp>
   <sp>
   </sp>
</tp>
Angular compile SERVICE will call:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link

Overview of $broadcast(), $emit() and $on()

Before you dig into the examples discussed below it would be worthwhile to take a quick look at the purpose and use of $broadcast(), $emit() and $on().
$broadcast() as well as $emit() allow you to raise an event in your AngularJS application. The difference between $broadcast() and $emit() is that the former sends the event from the current controller to all of its child controllers. That means $broadcast() sends an even downwards from parent to child controllers. The $emit() method, on the other hand, does exactly opposite. It sends an event upwards from the current controller to all of its parent controllers. From the syntax point of view a typical call to $broadcast() and $emit() will look like this:
$scope.$broadcast("MyEvent",data);
$scope.$emit("MyEvent",data); 
$scope.$on("MyEvent", function(evt,data){ 
  // handler code here });

AngularJS StateProvider

angular
  .module('myApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router',
    'ui.sortable',
    'toggle-switch'
  ])
  .config(['$stateProvider', '$urlRouterProvider','USER_ROLES','$httpProvider','PERMISSION_TYPE','AUTH_EVENTS',
    function($stateProvider, $urlRouterProvider,USER_ROLES,$httpProvider,PERMISSION_TYPE,AUTH_EVENTS){
    $stateProvider
        .state('loginLayout', {
            abstract: true,
            views: {
              layout: {
                templateUrl: 'views/layouts/layout.html'
              }
            }
        })
        .state('login', {
            title: 'Login',
            url: '/login',
            templateUrl: 'views/user/login.html',
            parent: 'loginLayout',
            controller: 'LoginCtrl'
        })
        .state('forgotPassword', {
            title: 'Forgot Password',
            url: '/forgotPassword',
            templateUrl: 'views/user/forgotpassword.html',
            parent: 'loginLayout',
            controller: 'ForgotpasswordCtrl'
        })
        .state('resetPassword', {
            title: 'Reset Password',
            url: '/resetPassword',
            templateUrl: 'views/user/resetpassword.html',
            parent: 'loginLayout',
            controller: 'ResetpasswordCtrl'
        })
        .state('homeLayout', {
            abstract: true,
            views: {
              layout: {
                templateUrl: 'views/layouts/home.html',
                controller: 'HomeCtrl'
              }
            }
        })
        .state('home', {
            title: 'Home',
            url: '/home',
            templateUrl: 'views/home.html',
            parent: 'homeLayout',
            controller: 'HomeCtrl',
            access: {
                requiresLogin: true,
                permissions : [USER_ROLES.admin,USER_ROLES.user],
                permissionType : PERMISSION_TYPE.atLeastOne
            }
        })
        .state('changePassword', {
            title: 'Change Password',
            url: '/changePassword',
            templateUrl: 'views/user/changepassword.html',
            parent: 'homeLayout',
            controller: 'ChangepasswordCtrl',
            resolve: {
            },
            access: {
                requiresLogin: true,
                permissions : [USER_ROLES.admin,USER_ROLES.user],
                permissionType : PERMISSION_TYPE.atLeastOne
            }
        })
        .state('adminLayout', {
            abstract: true,
            views: {
              layout: {
                templateUrl: 'views/layouts/admin.html',
                controller: 'HomeCtrl'
              }
            }
        })
        .state('selectOrganization', {
            title: 'Select Organization',
            url: '/selectorganization',
            templateUrl: 'views/organisation/organizationselect.html',
            parent: 'adminLayout',
            controller: 'LoginCtrl',
            resolve: {
            },
            access: {
                requiresLogin: true,
                permissions : [USER_ROLES.admin],
                permissionType : PERMISSION_TYPE.all
            }
        })
        .state('listOrganisation', {
            title: 'List Organisation',
            url: '/listorganisation',
            templateUrl: 'views/organisation/listorganisation.html',
            parent: 'adminLayout',
            controller: 'ListorganisationCtrl',
            access: {
                requiresLogin: true,
                permissions : [USER_ROLES.superAdmin],
                permissionType : PERMISSION_TYPE.all
            }
        })
        .state('createOrganisation', {
            title: 'Create Organisation',
            url: '/createorganisation',
            templateUrl: 'views/organisation/createorganisation.html',
            parent: 'adminLayout',
            controller: 'OrganisationCtrl',
            access: {
                requiresLogin: true,
                permissions : [USER_ROLES.superAdmin],
                permissionType : PERMISSION_TYPE.all
            },
            resolve: {
                orgDetails : function($state, Organisation, $stateParams){
                    return false;
                }
            }
        })
        .state('editOrganisation', {
            title: 'Edit Organisation',
            url: '/editorganisation/:id',
            templateUrl: 'views/organisation/editorganisation.html',
            parent: 'adminLayout',
            controller: 'OrganisationCtrl',
            access: {
                requiresLogin: true,
                permissions : [USER_ROLES.superAdmin],
                permissionType : PERMISSION_TYPE.all
            },
            resolve: {
                orgDetails : function($state, Organisation, $stateParams){
                    if($stateParams.id){
                        return Organisation.getOrganisation($stateParams.id);
                    }
                }
            }
        })
        

})
}]);

Notes







Comments

Popular posts from this blog

WEB API

MVC