AngularJS Dependencies and Services Dependencies & Services - - PowerPoint PPT Presentation

AngularJS

Dependencies and Services

Dependencies & Services

• App can get cluttered if all logic in one module
• Mingling directives and controllers and data in one

module can clutter that module

• Can some logic or data be factored out of main

module?

• Can create a new module just for product stuff in

products.js, for example, and move product related stuff into that module

Introducing new dependencies

• The main module now depends on the new module
• How do we tell the main module of this new

dependency?

• Add the name of the new module to the list of dependencies of the main

module

• Include the file for the new module inside of main HTML file.
• Effect: The code should still work, but this time it is more maintainable.

How to organize app modules

• Best to split modules around functionality:
• app.js: top-level module attached via ng-app
• products.js: all the functionality for products and
• nly products

Services

• How do we fetch our data from an API?
• We can use a URL to a file containing the json array
• f objects like so:
• http://api.example.com/jsonfile.json
• We would need to extract the data from app.js into a json file
• Use an AngularJS service to fetch the data

AngularJS Services

• AngularJS comes with a bunch of services.
• Services give your Controller additional

functionality, like

• Fetching JSON data from a web service with $http
• Logging messages to the JavaScript console with $log
• Filtering an array with $filter
• Note: All built-in services start with a $ sign.

Introducing the $http Service!

• The $http service is used to make an async request

to a server

• by suing $http as a function with an options object, e.g.,

$http({method: 'GET', url: '/products.json'});

• Or using one of the shortcut methods, e.g.,

$http.get('/products.json', {apiKey: 'myApiKey'});

• Both return a Promise object with

.then(successCallback, failureCallback) method.

• If we tell $http to fetch JSON, the results will be

automatically decoded into JavaScript objects and arrays

Using $http service

• We need our controllers to tell AngularJS what

services they need.

// This uses a funky array syntax: app.controller('SomeController', ['$http', function($http) { // note the listing of the service name and // its usage as an argument to function } ]); // What if you need more than one service? app.controller('SomeController', ['$http' '$log', function($http, $log) { } ]);

More on dependency injection

When controller executes

$http methods

• In addition to get() requests, $http can post(), put(),

and delete()

• Here is the syntax for that:
• $http.post('/path/to/resource.json', {param: 'value'});
• $http.delete('/path/to/resource.json');

Using config object

• Or you can also run any other HTTP method by using

a config object:

• $http({method: 'OPTIONS', '/path/to/resource.json'});
• $http({method: 'PATCH', '/path/to/resource.json'});
• $http({method: 'TRACE', '/path/to/resource.json'});

Building custom services

• Create module to attach services
• Use the service() or factory() method on the

module to create a new service

• Note: Services are typically singleton objects whose

lifetime spans the execution of the AngularJS app

• Custom services and use other services
• Move the logic for using the $http service into the

invocation of the service method

• Add name of module to list of dependencies of the

module that is going to use new service module

• Use service as needed
• Include file containing service module in main HTML

file

Resources

• https://code.angularjs.org/1.4.8/docs/api/ng/service/$http
• https://docs.angularjs.org/guide/services
• http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
• http://tylermcginnis.com/angularjs-factory-vs-service-vs-

provider/