© DZONE, INC.
|
DZONE.COM
3
ANGULAR JS ESSENTIALS
CREATING A MODULE
You create modules using the angular.module function. Each
created module should have a unique name that is passed as
the rst argument to the angular.module function. The second
angular.module argument is an array of dependencies, which can
have zero to many dependencies. Here is an example of using the
angular.module function to declare a myApp module, which is
dependent on a storageService:
angular.module(‘myApp’, [‘storageService’]);
CONFIGURING A MODULE
You can add module conguration using the cong function once
you declare a module. The conguration will get executed when
the module is loading. You can inject providers or constants
(which will be discussed later in the Refcard) to the conguration
block you are writing. Here is an example of a call for the cong
function:
angular.module(‘myApp’, [‘storageService’])
.config(function ($provide, $filterProvider) {
$provide.value(‘myValue’, 1);
$filterProvider.register(‘myFilter’, ...);
});
In the previous code, there are two injectable objects - $provide
and $lterProvider. In the cong function body, we create a
constant value called myValue, which is set to 1. We also register
a lter called myFilter into the $lterProvider.
Another option to interact with an AngularJS module execution
is to use the run function. The run function runs after all the
modules have been loaded. The function is used to literally run
the AngularJS application. You can inject services and constants
into the run function callback. The following code shows how to
use the run function:
angular.module(‘myApp’, [‘storageService’])
.run(function (someInstance) {
someInstance.doSomething();
});
Now that we understand how to create and use modules, let’s
explore the AngularJS dependency injection (DI) mechanism.
ANGULARJS DEPENDENCY INJECTION
Each AngularJS application includes an $injector object. The
$injector is responsible for dependency management and for
dependency lookups. Here is a diagram that shows how DI works
in AngularJS:
Let’s analyze what is going on in the diagram. Once the root
module is created, AngularJS will create a new $injector object.
While the application is running, a lot of objects such as
controllers, services, and lters are registered in the $injector
container. Later on, if an object has a dependency, AngularJS
will use the $injector object to search it. If an instance of the
dependency is available, it is returned by the $injector. If there is
no instance of the dependency, a new object is created using the
$injector instance factory. The new object is returned and also
stored in the instance cache.
Some of the main AngularJS objects such as modules, controllers,
and services can declare that they need a dependency. In order to
do that, you need to add function arguments with the exact name
of the dependency. That means that if you have an object named
obj and you want to inject it, you will have to have a function
argument in the AngularJS object with the same name. Here is a
controller example that declares it needs a $scope injected object:
var myApp = angular.module(‘myApp’,[]);
myApp.controller(‘MyController ‘, function($scope) {
});
You can see the use of explicit DI syntax [‘$scope’,
function($scope) {}] which helps to avoid minication issues.
This is the preferred way to use DI in AngularJS, and in the code
example we use it to create a controller. Speaking of controllers,
let’s explore what these AngularJS objects are.
CONTROLLERS
WHAT IS A CONTROLLER?
AngularJS controllers are just JavaScript constructor functions
that are used to hold scopes and to expose behaviors that views
can use. You can think about controllers as the logic behind the
view. Each controller has a new child scope that is available as the
$scope argument in the constructor function. When a controller
is created during runtime, the $injector will inject the $scope
argument. Controllers add properties and functions to the $scope.
CREATING A CONTROLLER
In order to create a controller, all you need to do is to declare
a constructor function. The following code shows a simple
controller:
var myApp = angular.module(‘myApp’,[]);
myApp.controller(‘MyController’, [‘$scope’,
function($scope) {
}]);
The way to wire a controller constructor function to a view is
using the ng-controller directive:
<div ng-controller=”MyController”>
</div>
A few notes about controller best practices:
• Controllers should contain only business logic that relates to
the view that they are bound to.