Fo rA pt ec h C en tre U se O nl y nl y Session Objectives O Explain dependency injection and its working in AngularJS Describe factory and service in AngularJS U se Outline the differences between factory and service and their uses Fo rA pt ec h C en tre Explain the usage of SPAs in AngularJS Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Introduction to Dependency Injection [1-2] nl y Dependency injection: U se O Is a technique for passing a dependent object into another object to make all functionality of the former available to the latter C en tre Prevents a component from directly referring to another component but allows obtaining a reference to it Eliminates hard-coded dependencies by requesting a dependent functionality instead of creating it by coding Fo rA pt ec h Makes AngularJS applications maintainable Modularizes an application by making splitting it into several components, all of which are injectable into each other Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Fo rA pt ec h C en tre U se O nl y Introduction to Dependency Injection [2-2] Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED nl y Objects and Components as Dependencies C en tre U se O In AngularJS, five objects or components exist that inject into each other as dependencies: Dependencies Provider Constant Factory Service Fo rA pt ec h Value Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Value nl y A value: Injects into a factory, service, or a controller U se O Refers to a JavaScript object, string, or a number that injects into a controller during the config phase Output: Fo rA pt ec h C en tre Following example shows how to inject a value into a controller: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Provider nl y A provider: U se O Creates a service or factory during the config phase using the $provide service Returns a value, factory, or a service Fo rA pt ec h The example shows how to use a provider C en tre is a distinct factory method with the $get() method Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Constant nl y A constant: Is injectable into config(), controller, and a provider U se O Remains fixed throughout execution Output: Fo rA pt ec h C en tre Following example shows how to inject a constant into a controller: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Factory nl y A factory: O Is a component that is technically a function that is injectable with values U se Returns a re-usable value when a service or a controller requires it Fo rA pt ec h Is injectable into a controller C en tre Implements the factory() method for creating and returning a value Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED Creating a Factory [1-2] Fo rA pt ec h C en tre U se O nl y Following example shows how to create a service using factory() and inject it into a controller: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 10 Creating a Factory [2-2] Fo rA pt ec h C en tre U se O nl y Following is the output of code for creating a service using factory() and injecting it into a controller: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 11 O nl y Service A service: C en tre U se Is a single JavaScript object holding a set of functions that are injectable into a controller Is used to create a service that returns no value Fo rA pt ec h Implements the service() constructor function for creating a service object and adding functions and properties to it Is injectable into a controller, filter, directive, or another service Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 12 Creating a Factory and a Service [1-2] Fo rA pt ec h C en tre U se O nl y Following example shows how to create a factory and a service, both returning Hello string: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 13 Fo rA pt ec h C en tre U se O Following is the output of code creating a factory and a service: nl y Creating a Factory and a Service [2-2] Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 14 Service Fo rA pt ec h Factory C en tre U se O nl y Factory versus Service [1-2] Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 15 Factory versus Service [2-2] O Factory Service U se Point of Distinction nl y Factory and Service have several differences Is a function that returns an object or a Is a constructor function that uses the value new keyword to declare an object It is instantiated only when a component depends on it Use Is used for non-configurable services It Is used for inserting simple logic Go can also be used as a service for replacing for it if you are using a class complex logic Go for it if you are using an object Fo rA pt ec h Properties C en tre Function Type Are defined without this keyword Are defined with this keyword Friendly Injections Are not supported Are supported Primitives Are created Are not created Preferable Choice Is more preferable due to its class-like Is preferred only for defining utility definition services or using ES6 classes Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 16 AngularJS Dynamic Templates O nl y A dynamic template: U se Allows adding services in the desired order or dynamically C en tre Is made by implementing a custom directive for each service Fo rA pt ec h Consists of custom directives that extend the HTML functionality and are associated with elements, attributes, styles, and comments Works at the time of loading by invoking the compile() method of the directive once and processing via the directive’s link() method Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 17 Creating a Dynamic Template [1-2] Fo rA pt ec h C en tre U se O nl y Following example shows how to define a custom directive : Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 18 Creating a Dynamic Template [2-2] Fo rA pt ec h C en tre U se O nl y Following is the output of code using a custom directive: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 19 Steps for Building an SPA • nl y O U se • Each AngularJS application is begun by designing a module A module is a container for holding different components such as controllers and services Next, you specify the name of module as well as controller as the value of ng-app and ng-controller attributes, respectively Next, you utilize the routing capabilities of AngularJS to make an SPA by using the built-in ngRoute module Following are the steps to use this module: Create a new module with controller This module relies on the ngRoute module Fo rA pt ec h Include the angular script files C en tre • • • Dynamic and Responsive Web Development Using AngularJS Separate the common HTML code for every page, which acts as the site’s layout Specify where HTML code of each page shall be added in the layout by using the ng-view directive © APTECH LIMITED 20 nl y Building an SPA [1-4] Fo rA pt ec h C en tre U se O Following code shows how to create a module and a controller for a custom Single Page Application: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 21 Building an SPA [2-4] Fo rA pt ec h C en tre U se O nl y Following code shows how to use ngRoute: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 22 Building an SPA [3-4] Fo rA pt ec h C en tre U se O nl y Following code shows how to create a simple HTML layout for routing pages: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 23 Building an SPA [4-4] Fo rA pt ec h C en tre U se O nl y Following is the output of the SPA code: Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 24 Summary O nl y Dependency injection is a technique for adding a dependent functionality into a module upon execution without coding for it U se The benefits of dependency injection include no hard-coded dependencies, modular applications, reusable modules, easy configurations, and hassle-free code changes C en tre AngularJS allow injecting values, providers, constants, factories, and services into each other as dependencies The config() method accepts only a provider or a constant as a parameter Fo rA pt ec h A factory uses a function that returns a value, while a service is a constructor function used for creating an object Factories and services are providers Creating a dynamic template involves using custom directives per service such that the services are dynamically added to a Web page Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED 25 ... working in AngularJS Describe factory and service in AngularJS U se Outline the differences between factory and service and their uses Fo rA pt ec h C en tre Explain the usage of SPAs in AngularJS... Web Development Using AngularJS © APTECH LIMITED Fo rA pt ec h C en tre U se O nl y Introduction to Dependency Injection [2-2] Dynamic and Responsive Web Development Using AngularJS © APTECH LIMITED... Development Using AngularJS © APTECH LIMITED 14 Service Fo rA pt ec h Factory C en tre U se O nl y Factory versus Service [1-2] Dynamic and Responsive Web Development Using AngularJS © APTECH