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 o module Include the file for the new module inside of main HTML file. o Effect: The code should still work, but this time it is more maintainable. o

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 only products

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

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 o Logging messages to the JavaScript console with $log o Filtering an array with $filter o • 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., o $http({method: 'GET', url: '/products.json'}); Or using one of the shortcut methods, e.g., o $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'}); o $http.delete('/path/to/resource.json'); o

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/