Webinar presentation http://www.returnonintelligence.ru/webinars/quick-start-to-angularjs/

1. Confidential 0
Core Systems Transformation Solutions
Quick Start to AngularJS

2. Confidential 1
Agenda
• What is 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 AngularJS is awesome

5. Confidential 4
AngularJS Big Picture

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, view and 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 $digest Loop

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

14. Confidential 13
Directives Definition Object

15. Confidential 14
Compile vs Link

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 Service Types
• Provider
• Factory
• Service
• Value
• Constant

18. Confidential 17
Built-in Services
• $q
• $http
• $resource
• $cache
• $location
• $injector
• $compile
• $interpolate

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

21. Confidential 20
Disadvantages
• Performance
• Debugging
• High barrier to entry

22. Confidential 21
Instead of Conclusion