Chapter 15. AngularJS – Google's In-Demand Framework

Angular is an application framework that helps you create web applications. It builds off of HTML and JavaScript to make the creation of dynamic applications easier. Angular extends and is a superset of JavaScript at the same time. You can use plain old JavaScript and Angular to build your application.

This creates a double-edged sword. On the positive side, it is much easier to build dynamic user interfaces and keep your code maintainable and testable. On the other side, you must learn the overall concept of how an Angular application is built, which Angular piece goes where. This is very different to any other JavaScript application you may have built.

If all you have ever built is user interfaces with jQuery, BackBone, or plain old JavaScript, then much of Angular will seem new and different.

We will try to cover Angular in a hierarchical way. We will start at the top with containers that hold other parts and objects and end functions that can be used across many objects. We will also touch upon testing, as it is a core part of how Angular is built.

Let's not waste any more time and jump right to it.

All of the examples assume that you have loaded Angular so that the angular object is available.

Note

If you are unsure on how to load Angular, visit the official Angular page at https://angularjs.org/.

Modules (ngApp)

This is the high-level container for all the other parts of your application. There are more functions than those listed here, but they will be described in the section they relate to. For example, you can use module.controller to create a controller, but this function will be under the controller section.

module

Modules are the first basic building block of an Angular application:

angular.module(moduleName, [dependencies], [configFunction])
angular.module(moduleName)

Parameters

  • moduleName: This is a string that will identify the module. It should be unique.
  • dependencies(optional): This is an array of module names that this module is dependent on.
  • configFunction(optional): This is a function that will configure the module. See config section.

Return value

This is an Angular module object.

Description

This function will either create a new module or retrieve a module. This depends on whether we pass in an array of dependencies. If dependencies are omitted, then a module is retrieved. Conversely, if we include an array of modules to load (the array can also be empty), then a module will be created.

When you have a group of objects that work together, it is a good idea to put them into a module. Do not worry about creating too many modules. A module should have one and only one clear function. Then, all the objects that it needs to accomplish that function would be packaged with it.

Here are a few examples of creating modules:

  • This creates a new module: var firstModule = angular.module('firstModule', []);
  • This retrieves a module named firstModule: var firstModule = angular.module('firstModule');
  • This creates a module that relies on firstModule: var secondModule = angular.module('secondModule', ['firstModule']);

config

This allows you to configure providers:

module.config(configFunction)

Parameters

  • The configFunction function is the function that will be executed.

Return value

This is an Angular module object.

Description

This is the function that should be used to configure providers. We will cover providers later in this chapter, but there are a few examples in this section. This allows for providers to be created before the module actually executes.

The providers will be injected into this function when called. For example, you can use $provide or $routeProvider and they will be available. If you want to use a custom provider, it would have to be created before config. The custom object will need provider appended to the name for it to be available in config.

Here are a couple of examples using providers:

  • This example uses $provide. The provider will be available later as firstProvider:
    firstModule.config(function ($provide) {
  $provide.provider('firstProvider', function () {
    this.$get = function () {
      return function () { alert('First!'); }
    }
  });
});
  • This example creates a provider first. It is injected as firstProvider in config and used later:
    firstModule.provider('first', function () {
  this.$get = function () {
    return function () { alert('First!'); }
  }
});
firstModule.config(function (firstProvider) {
  console.log(firstProvider);
});

run

This function is executed after config:

module.run(runFunction)

Parameters

  • The runFunction function is the function that will be executed.

Return value

This is an Angular module object.

Description

The run() function gets executed after config. At this point, all modules will be loaded. It is the first function called after the module is initialized after config. What you do in this function will depend on the module.

Here is an example that sets a scope variable. The variable will be available in the module in later functions:

firstModule.run(function ($rootScope) {
  $rootScope.test = 'test';
});
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.110.155