Quick Start to AngularJS

Quick Start to AngularJS

• 1.
  Confidential 0 Core SystemsTransformation Solutions Quick Start to AngularJS
• 2.
  Confidential 1 Agenda • Whatis it? • What for is it? • Why to use and why not to use • AngularJS structure • How it works
• 3.
  Confidential 2 What is •Client Side MVVM framework • Powered by Google • Single file (124 KB ) • No dependencies • Huge community
• 4.
  Confidential 3 Why AngularJSis awesome
• 5.
  Confidential 4 AngularJS BigPicture
• 6.
  Confidential 5 Angular Module •Module is a way to share logic between application • AngularJS app is module • Module has 2 blocks –config –run • Creating angular.module(“myModule”, []); angular.module(“myModule”, [dependency]); • Using var module = angular.module(“myModule”);
• 7.
  Confidential 6 Angular Routing •is not obligatory • helps manage application state • support browser history • ngRouteis or ui-router app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' }). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl' }). otherwise({ redirectTo: '/phones' }); }]);
• 8.
  Confidential 7 Angular Controller •Controller is constructor function that is used to argument the $scope • Can be associated with scope via ng-controller, route, directive • Use controller to –Set up the initial state of the $scope object. –Add behavior to the $scope object. • Do not use controller to –Manipulate DOM –Format input –Filter output –Share code or state across controllers –Manage the life-cycle of other components
• 9.
  Confidential 8 Angular $scope •scope is simple JS object • $rootScope • scopes can be nested (child or isolated) • child scope prototypically inherits properties from parent • angular.element($0).scope() • scope provide API: –$watch/$watchCollection –$evalAsync –$apply –$on –$emit –$broadcast –$destroy –$parent
• 10.
  Confidential 9 Controller, viewand scope together
• 11.
  Confidential 10 Application Bootstrap •Waiting for $(document).ready() • Detecting ng-app • Loading module  Find and initialize dependencies  Initialize all services • Compiling HTML  Find directives in HTML  Initialize and compile directives
• 12.
  Confidential 11 AngularJS $digestLoop
• 13.
  Confidential 12 Directives • Wayto extend HTML • A place to put anything that touch DOM • Problems – event-handling – data-binding – behavior management – template generating – widgets
• 14.
  Confidential 13 Directives DefinitionObject
• 15.
  Confidential 14 Compile vsLink
• 16.
  Confidential 15 Built-in Directives •ng-app • ng-controller • ng-repeat • ng-switch • ng-bind • ng-model • ng-show/ng-hide • ng-if • ng-class
• 17.
  Confidential 16 Custom ServiceTypes • Provider • Factory • Service • Value • Constant
• 18.
  Confidential 17 Built-in Services •$q • $http • $resource • $cache • $location • $injector • $compile • $interpolate
• 19.
  Confidential 18 Testing withAngular • Karma for Unit Testing –Jasmine –Mocha –QUnit • ngMock –$httpBackend • Protractor for E-2-E testing –Selenium –Chrome Web Driver
• 20.
  Confidential 19 Advantages • Modularity Easyto add, update, replace, parallel develop modules • Reusability Module can be easy reused in any other application • Extendable Parts of framework can be replaced • Testable Unit testing with minimum effort • Embeddable Easy to start to use in project
• 21.
  Confidential 20 Disadvantages • Performance •Debugging • High barrier to entry
• 22.
  Confidential 21 Instead ofConclusion