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.
Compile: traverse the DOM and collect all of the directives. The result is a linking function. 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); } } } }) }) }]);
Comments
Post a Comment