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
13. Confidential 12
Directives
• Way to extend HTML
• A place to put anything that touch DOM
• Problems
– event-handling
– data-binding
– behavior management
– template generating
– widgets
19. Confidential 18
Testing with Angular
• Karma for Unit Testing
–Jasmine
–Mocha
–QUnit
• ngMock
–$httpBackend
• Protractor for E-2-E testing
–Selenium
–Chrome Web Driver
20. Confidential 19
Advantages
• Modularity
Easy to 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