1. AngularJS By Alireza Mirian At HasinTech.

2. Why Angular at first place The reason something like Angular emerges: The path Web Standards have went through HTML is great for static content but not for Web Applications Not extensible Static Nature => DOM manipulation libs like jQuery No support for components Static Websites HTML Dynamic websites Web 2 JSAJAX / SPABrowser === App Platform

3. Key features of Angular Directives => custom DSL, components The future of web standards (Web Components, Shadow DOM)Web ComponentsShadow DOM Modularity Dependency Injection Data Binding (angular expressions, ngModel) Separation of concerns MV* Parallel development Testability: “Angular is written with testability in mind” Unit tests (Jasmine) E2E (protractor) Dependency Injection

4. Custom component example Phone Simulator

5. The big picture Angular Module ControllersServicesDirectivesFilters Config blocksRun blocks Dep. Module A container Angular Application View Scope Any Reusable Stuff like: Backend interaction Helpers Modal Service Toast Service DOM manipulation: Reusable Components Reusable HTML behavior Other categories maybe Pipe-style formatting: Usually for display {{ date | date }} Routing Global service configuration $http default headers Similar to main method Initialization Listening to some event

6. Module API Module definition (setter): angular.module(‘moduleName’, [‘dep1’, ‘dep2’]); Second argument is NOT optional even if there is no dependency chainable Getting a reference to some module var module = angular.module(‘moduleName’); Defining different components: module.controller(‘name’, ControllerConstructor); module.service(‘name’, ServiceConstructor); module.directive(‘name’, directiveFactory); module.filter(‘name’, filterFactory);

7. Dependency Injection in Angular One single injector to wire all pieces together Don’t create your dependencies, just ask for them Angular uses Constructor InjectionConstructor Injection Services can be injected into any component A couple of other things like $scope can be injected into controllers Read More When to use dependency injection To “new” or not to “new” Clean Code Talks – Dependency Injection

8. Dependency Injection in Angular – cont. angular.module("myApp").controller("MainController", MainController); function MainController($scope, someDataService){ // Angular will figure out what to pass in for $scope and someDataService // by their names when instantiating MainController } angular.module("myApp").service("someDataService", SomeDataServiceConstructor); function SomeDataServiceConstructor(someOtherService){ // angular will figure out what to pass in for someOtherService by its name } angular.module("myApp").service(“someOtherService", SomeOtherServiceConstructor); function SomeOtherServiceConstructor(){ // no dependency }

9. Dependency Injection in Angular – cont. How injector figures out what to wire as dependencies of a component: 1.By name: The most straightforward approach Caveat: minifiers 2.Array notation: 3.$inject property a angular.module("myApp").service("someDataService", ["someDataService", function (x){ // an array of names of dependencies. Last item the function }]); angular.module("myApp").service("someDataService", SomeDataServiceConstructor); function SomeDataServiceConstructor(x){ // angular will figure out what to pass in for someOtherService by its name } SomeDataServiceConstructor.$inject = ["someOtherService"];

10. Scopes $rootScope $scope 2$scope 1 $scope 1.2$scope 1.1 Prototypal Inheritance $parent (__proto__)

11. Scopes – cont.