Leveling up with AngularJS

Leveling up with AngularJS

• 1.
  LEVELING UP
• 2.
  LEVELING UP Bring AngularJSbeginners up to speed and level up everyone’s skills so we can understand core concepts and develop complex web applications for our clients more effectively. OBJECTIVE
• 3.
  LEVELING UP HTML isgreat for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. WHY USE ANGULAR?
• 4.
  LEVELING UP WHY USEANGULAR? MV* Pattern Modular code Future proof your code Develop faster Two-way data binding/Scope Directives Filters Dependency injection Services Routes Simple API Consumption It’s Awesome!
• 5.
  LEVELING UP ANGULAR ISAN MV* FRAMEWORK Model View Controller Model-View-Controller is an architectural design pattern that encourages improved application organization through a separation of concerns. It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally present to manage logic, user-input and the coordination of models and views.
• 6.
  LEVELING UP Scope isan object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. SCOPE
• 7.
  LEVELING UP Data-binding inAngular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source- of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. TWO-WAY DATA BINDING
• 8.
  LEVELING UP At ahigh level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. DIRECTIVES <slide duration=“500” color=“blue” src=“img/slide-01.jpg” link=“http://google.com/” />
• 9.
  LEVELING UPDIRECTIVES <slides> <slide ng-repeat=“slidein slides” duration=“{{slide.duration}}” color=“{{slide.color}}” src=“{{slide.img}}” link=“{{slide.link}}” /> </slides> $scope.slides = [ { img: ‘img/slide01.jpg’, color: ‘red’, link: ‘google.com’, duration: ‘2000’ }, { img: ‘img/slide02.jpg’, color: ‘blue’, link: ‘apple.com’, duration: ‘3000’ }, { img: ‘img/slide03.jpg’, color: ‘purple’, link: ‘theverge.com’, duration: ‘2500’ }, { img: ‘img/slide04.jpg’, color: ‘green’, link: ‘techcrunch.com’, duration: ‘1500’ } ] <ul class=“slider”> <li class=“slide” style=“background- color:red” data-duration=“2000”> <a href=“google.com”> <img src=“img/slide01.jpg” /> </a> </li> <li class=“slide” style=“background- color:blue” data-duration=“3000”> <a href=“apple.com”> <img src=“img/slide02.jpg” /> </a> </li> <li class=“slide” style=“background- color:purple” data-duration=“2500”> <a href=“theverge.com”> <img src=“img/slide03.jpg” /> </a> </li> <li class=“slide” style=“background- color:green” data-duration=“1500”> <a href=“techcrunch.com”> <img src=“img/slide04.jpg” /> </a> </li> </ul>
• 10.
  LEVELING UP A filterformats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. FILTERS {{ expression | filter }}
• 11.
  LEVELING UP Dependency Injectionis a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested. DEPENDENCY INJECTION app.controller('DynamicFormCtrl', ['$scope', '$http', '$modal', '$filter', function($scope, $http, $modal, $filter) { ... }]);
• 12.
  LEVELING UP Angular servicesare substitutable objects that are wired together using dependency injection. You can use services to organize and share code across your app. SERVICES
• 13.
  LEVELING UP THREE TYPESOF SERVICES Factories Syntax: module.factory('factoryName', function); Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory. Services Syntax: module.service('serviceName', function); Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). Providers Syntax: module.provider('providerName', function); Result: When declaring providerName as an injectable argument you will be provided with ProviderFunction().$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.
• 14.
  LEVELING UP Routes enableyou to create different URLs for different content in your application. Having different URLs for different content enables the user to bookmark URLs to specific content, and send those URLs to friends etc. In AngularJS each such bookmarkable URL is called a route. ROUTES
• 15.
  LEVELING UP