The core module of AngularJS is loaded with everything you need to bootstrap your application. It contains several objects and entities that enable the basic operation of an AngularJS application.

With AngularJS, everything is encapsulated in modules. Whether you choose to work with a single application module or break your application into various modules, your AngularJS application will rely on at least one module to operate.

One of the most popular features of AngularJS is its two-way data binding mechanism. Two-way data binding enables AngularJS applications to always keep the model synchronized with the view and vice versa. This means that what the view renders is always the projection of the model. To understand this better, the AngularJS team provides the following diagram:

Traditional one-way data binding

As you can see from the preceding diagram, most templating systems bind the model with templates in one direction. So, every time the model changes, the developer has to make sure that these changes reflect in the view. A good example is our EJS template engine, which binds the application data and EJS template to produce an HTML page. Fortunately, AngularJS templates are different. Take a look at the following diagram:

AngularJS two-way data binding

AngularJS uses the browser to compile HTML templates, which contain special directives and binding instructions that produce a live view. Any events that happen in the view automatically update the model, while any changes occurring in the model immediately get propagated to the view. This means the model is always the single source of data for the application state, which substantially improves the development process. Later in this Lesson, you will learn about AngularJS scopes and how controllers and views use them in referring to the application model.

A dependency injection is a software design pattern popularized by a software engineer named Martin Fowler. The main principle behind dependency injection is the inversion of control in a software development architecture. To understand this better, let's have a look at the following notifier example:

var Notifier = function() {
  this.userService = new UserService();
};

Notifier.prototype.notify = function() {
  var user = this.userService.getUser();
  
  if (user.role === 'admin') {
    alert('You are an admin!');
  } else {
    alert('Hello user!');
  }
};

Our Notifier class creates an instance of a userService, and when the notify () method is called, it alerts a different message based on the user role. Now this can work pretty well, but what happens when you want to test your Notifier class? You will create a Notifier instance in your test, but won't be able to pass a mock userService object to test the different results of the notify method. Dependency injection solves this by moving the responsibility of creating the userService object to the creator of the Notifier instance, whether it is another object or a test. This creator is often referred to as the injector. A revised, injection-dependent version of this example will be as follows:

var Notifier = function(userService) {
  this.userService = userService;
};

Notifier.prototype.notify = function() {
  var user = this.userService.getUser();
  
  if (user.role === 'admin') {
    alert('You are an admin!');
  } else {
    alert('Hello user!');
  }
};

Now, whenever you create an instance of the Notifier class, the injector will be responsible for injecting a userService object into the constructor, making it possible to control the behavior of the Notifier instance outside of its constructor, a design often described as inversion of control.

angular.module('someModule').controller('SomeController', function($scope) {
  ...
});

angular.module('someModule').controller('SomeController', function(a) { ... });

angular.module('someModule').controller('SomeController', ['$scope', function($scope) {

}]);

We previously stated that AngularJS extends HTML instead of building against it. The mechanism that allows this is called directives. AngularJS directives are markers, usually attributes or element names, which enable the AngularJS compiler to attach a specified behavior to a DOM element and its children elements. Basically, directives are the way AngularJS interacts with DOM elements and are what enables the basic operation of an AngularJS application. What makes this feature even more special is the ability to write your own custom directives that it imparts.

<body ng-app></body>

Bootstrapping an AngularJS application means that we tell Angular which DOM element is the root element of the application and when to initiate the Angular application. This could be done either automatically after the page assets are loaded or manually using JavaScript. Manual bootstrapping is usually useful when you'd like to control the bootstrap flow to make sure certain logic is being executed before the AngularJS application is started, while automatic bootstrap is useful in simpler scenarios.

Bower is a package manager tool, designed to download and maintain frontend, third-party libraries. Bower is a Node.js module, so to begin using it, you will have to install it globally using npm:

$ npm install -g bower

Once you have Bower installed, it's time to learn how to use it. Like npm, Bower uses a dedicated JSON file to indicate which packages and what versions to install. To manage your frontend packages, go to the root folder of your application and create a file named bower.json containing the following lines of code:

{
  name: MEAN,
  version: 0.0.7,
  dependencies: { }
}

As you're already experienced with the package.json file, this structure should already look familiar. Basically, you define your project metadata and describe its frontend packages using the dependencies property. You'll populate this field in a moment, but there is one more detail to notice regarding Bower's configuration.

Bower installation process downloads the packages content and automatically place them under a bower_components default folder in the root application folder. Since these are frontend packages that should be served as static files, and considering that our MEAN application only serves static files placed under the public folder, you will have to change the default installation location for Bower packages. Configuring the Bower installation process is done using a dedicated configuration file called .bowerrc.

To install your frontend packages in a different location, go to the root folder of your application and create a file named .bowerrc that contains the following lines of code:

{
  directory: public/lib
}

From now on, when you run the Bower installation process, third-party packages will be placed under the public/lib folder.

Once you have Bower installed and configured, it is time to use it and install the AngularJS framework. Go back to your bower.json file and change it as follows:

{
  name: MEAN,
  version: 0.0.7,
  dependencies: {
    angular: ~1.2
  }
}

This will have Bower installing the latest 1.2.x Version of AngularJS. To start the installation process, navigate to the application's folder in your command-line tool and run the following command:

$ bower install

This will fetch the AngularJS package files and place them under the public/lib/angular folder. Once you have AngularJS installed, it is time to add it to your project's main application page. Since AngularJS is a single-page framework, the entire application logic will take place in the same Express application page.

To start using AngularJS, you will need to include the framework JavaScript file in your main EJS view. In our case, we will use the app/views/index.ejs file as the main application page. Go to your app/views/index.ejs file and change it, as follows:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (userFullName) { %>
    <h2>Hello <%=userFullName%> </h2>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <script type="text/javascript" src="/lib/angular/angular.js"></script>
</body>
</html>

Now that you have AngularJS installed and included in the main application page, it is time to understand how to organize your AngularJS application's structure.

AngularJS views are HTML templates rendered by the AngularJS compiler to produce a manipulated DOM on your page. To start with your first view, create a new example.client.view.html file inside your public/example/views folder, and paste the following lines of code:

<section>
  <input type=text id=text1 ng-model=name>
  <input type=text id=text2 ng-model=name>
</section>

To use this template as a view, you'll have to go back to your app/views/index.ejs file and change it again, as follows:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (userFullName) { %>
    <h2>Hello <%=userFullName%> </h2>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <section ng-include="'example/views/example.client.view.html'"></section>

  <script type="text/javascript" src="/lib/angular/angular.js"></script>

  <script type="text/javascript" src="/example/example.client.module.js"></script>

  <script type="text/javascript" src="/application.js"></script>
</body>
</html>

In the preceding code snippet, you used the new ng-include directive, which loads a template from a specified path, compiles it into a view, and then places the rendered result inside the directive DOM element. To test your view, use your command-line tool, and navigate to the MEAN application's root folder. Then run your application by typing the following command:

$ node server

Once your application is running, use your browser, and open the application URL at http://localhost:3000. You should see the two-textboxes example again; try typing in one of the textboxes, and see how the data binding works the same way inside views. Views are great, but what makes them even better are controllers.

Controllers are basically constructor functions, which AngularJS uses to create a new instance of a controller object. Their purpose is to augment data model reference objects called scopes. Therefore, the AngularJS team rightfully defines a scope as the glue between the view and the controller. Using a scope object, the controller can manipulate the model, which automatically propagates these changes to the view and vice versa.

Controller instances are usually created when you use the ng-controller directive. The AngularJS compiler uses the controller name from the directive to instantiate a new controller instance, while utilizing dependency injection to pass the scope object to that controller instance. The controller is then used either to set up the scope initial state or to extend its functionality.

Since DOM elements are arranged in a hierarchical structure, scopes mimic that hierarchy. This means that each scope has a parent scope up until the parentless object called the root scope. This is important, because aside from referencing their own model, scopes can also inherit the model of their parent scopes. So if a model property cannot be found in a current scope object, Angular will look for this property in the parent scope, and so on, until it finds the property or reaches the root scope.

To understand this better, let's use a controller to set an initial model state for our view. Inside your public/example/controllers folder, create a new file called example.client.controller.js containing the following code snippet:

angular.module('example').controller('ExampleController', ['$scope',
  function($scope) {
    $scope.name = 'MEAN Application';
  }
]);

Let's review this for a moment. First, you used the angular.module() method to retrieve your example module. Then, you used the AngularJS module's controller() method to create a new ExampleController constructor function. In your constructor function, you applied the dependency injection to inject the $scope object. Finally, you used the $scope object to define a name property, which will later be used by your view. To use this controller, you'll need to include its JavaScript file in the main application's page and add the ng-controller directive to your view. Start by changing your app/views/index.ejs as follows:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (userFullName) { %>
    <h2>Hello <%=userFullName%> </h2>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <section ng-include="'example/views/example.client.view.html'"></section>

  <script type="text/javascript" src="/lib/angular/angular.js"></script>

  <script type="text/javascript" src="/example/example.client.module.js"></script>
  <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script>

  <script type="text/javascript" src="/application.js"></script>
</body>
</html>

Now change your public/example/views/example.client.view.html file as follows:

<section ng-controller=ExampleController>
  <input type=text id=text1 ng-model=name>
  <input type=text id=text2 ng-model=name>
</section>

That's it! To test your new controller, use your command-line tool, and navigate to the MEAN application's root folder. Then run your application as follows:

$ node server

Once your application is running, use your browser and open your application URL at http://localhost:3000. You should see the two-textboxes example again but with an initial value already set up.

While views, controllers, and scopes are a great way to build your application, AngularJS has much more to offer. In the next section, you'll drop the ng-include directive and learn how to use the ngRoute module to manage your application routing.

Installing the ngRoute module is easy; simply go to your bower.json file and change it as follows:

{
  name: MEAN,
  version: 0.0.7,
  dependencies: {
    angular: ~1.2,
    angular-route: ~1.2
  }
}

Now use your command-line tool to navigate to the MEAN application root folder, and install the new ngRoute module:

$ bower update

When bower finishes installing the new dependency, you would see a new folder named angular-route in your public/lib folder. Next, you will need to include the module file in your application main page, so edit your app/views/index.ejs file as follows:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (userFullName) { %>
    <h2>Hello <%=userFullName%> </h2>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <section ng-include="'example/views/example.client.view.html'"></section>

  <script type="text/javascript" src="/lib/angular/angular.js"></script>
  <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>

  <script type="text/javascript" src="/example/example.client.module.js"></script>
  <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script>

  <script type="text/javascript" src="/application.js"></script>
</body>
</html>

Finally, you will need to add the ngRoute module as a dependency for your main application's module, so change your public/application.js file as follows:

var mainApplicationModuleName = 'mean';

var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'example']);

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainApplicationModuleName]);
});

When you're done with these changes, the ngRoute module will be set up and ready to be configured and used.

The ngRoute module's default behavior is to use the URL hash part for routing. Since it is usually used for in-page linking, when the hash part changes, the browser will not make a request to the server. This enables AngularJS to support older browsers while maintaining a decent routing scheme. So, a common AngularJS route would be similar to this one: http://localhost:3000/#/example.

However, single-page applications have one major problem. They are not indexable by search engine crawlers and can suffer from poor SEO. To solve this issue, the major search engine makers offer developers a way to mark their application as a single-page application. That way, the search engine crawlers know your application is using AJAX to render new paths and can wait for the result before it leaves your page. To mark your application routes as single-page application routes, you will need to use a routing scheme called Hashbangs. Hashbangs are implemented by adding an exclamation mark right after the hash sign, so an example URL would be http://localhost:3000/#!/example.

Luckily, AngularJS supports Hashbangs configuration using a module configuration block and the $locationProvider service of AngularJS. To configure your application routing, go to the public/application.js file and make the following changes:

var mainApplicationModuleName = 'mean';

var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'example']);

mainApplicationModule.config(['$locationProvider',
  function($locationProvider) {
    $locationProvider.hashPrefix('!');
  }
]);

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainApplicationModuleName]);
});

Once you're done configuring the application's URL scheme, it's time to use the ngRoute module and configure your first route.

The ngRoute module packs several key entities to manage your routes. We'll begin with the $routeProvider object, which provides several methods to define your AngularJS application routing behavior. To use the $routeProvider object, you will need to create a module configuration block, inject the $routeProvider object, and use it to define your routes. Begin by creating a new folder named config inside the public/example folder. In your new folder, create a file named example.client.routes.js containing the following lines of code:

angular.module('example').config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/', {
      templateUrl: 'example/views/example.client.view.html'
    }).
    otherwise({
      redirectTo: '/'
    });
  }
]);

Let's review the preceding code snippet for a moment. You used the angular.module() method to grab the example module and executed the config() method to create a new configuration block. Then, you applied DI to inject the $routeProvider object to your configuration function, and the $routeProvider.when() method to define a new route. The first argument of the $routeProvider.when() method is the route's URL, and the second one is an options object, where you defined your template's URL. Finally, you used the $routeProvider.otherwise() method to define the behavior of the router when the user navigates to an undefined URL. In this case, you simply redirected the user request to the route you defined before.

Another entity that is packed in the ngRoute module is the ng-view directive. The ng-view directive tells the AngularJS router which DOM element to use to render the routing views. When the user navigates to a specified URL, AngularJS will render the template inside the DOM element marked with this directive. So, to finalize your routing configuration, you will need to include the new JavaScript file in your main application page and add an element with the ng-view directive. To do so, change your app/views/index.ejs file as follows:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (userFullName) { %>
    <h2>Hello <%=userFullName%> </h2>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <section ng-view></section>

  <script type="text/javascript" src="/lib/angular/angular.js"></script>
  <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>

  <script type="text/javascript" src="/example/example.client.module.js"></script>
  <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script>
  <script type="text/javascript" src="/example/config/example.client.routes.js"></script>

  <script type="text/javascript" src="/application.js"></script>
</body>
</html>

Once you're done, everything will be set up to test your routing configuration. Use your command-line tool, and navigate to the MEAN application's root folder. Then, run your application with the help of the following command:

$ node server

Once your application is running, use your browser and navigate to http://localhost:3000. You will notice that the AngularJS router redirects your request to http://localhost:3000/#!/. This means your routing configuration works and you should see the two-textboxes example again.

AngularJS comes prebundled with many services to abstract common development tasks. Commonly used services include:

There are many other services as well as extra module services that the AngularJS team constantly maintains, but one of the most powerful features of AngularJS is the ability to define your own custom services.

Whether to wrap global objects for better testability or for the purpose of sharing your code, creating custom services is a vital part of AngularJS application development. Creating services can be done using one of three module methods: provider(), service(),and factory(). Each of these methods allows you to define a service name and service function that serve different purposes:

In your daily development, you'll probably use either the factory() or service() methods since the provider() is usually overkill. An example service created using the factory() method will be as follows:

angular.module('example').factory('ExampleService', [
  function() {
    return true;
  }
]);

An example service created using the service() method will be as follows:

angular.module('example').service('ExampleService', [
  function() {
    this.someValue = true;

    this.firstMethod = function() {

    }
    this.secondMethod = function() {

    }
  }
]);

You'll feel more comfortable using each method when you get further ahead with developing your MEAN application.

Using AngularJS services is very easy since they can be injected into AngularJS components. Your example controller will be able to use ExampleService when you inject it, as follows:

angular.module('example').controller('ExampleController', ['$scope', 'ExampleService',
  function($scope, ExampleService) {
    $scope.name = 'MEAN Application';
  }
]);

This will make ExampleService available to the controller, which can use it to share information or consume shared information. Let's see how you can use the services to solve one of the main pitfalls when developing a MEAN application.

To render the authenticated user object, you'll have to make several changes. Let's begin by changing the app/controllers/index.server.controller.js file, as follows:

exports.render = function(req, res) {
  res.render('index', {
    title: 'Hello World',
    user: JSON.stringify(req.user)
  });
};

Next, go to your app/views/index.ejs file and make the following changes:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (user) { %>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <section ng-view></section>
    
  <script type="text/javascript">
    window.user = <%- user || 'null' %>;
  </script>
    
  <script type="text/javascript" src="/lib/angular/angular.js"></script>
  <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>

  <script type="text/javascript" src="/example/example.client.module.js"></script>
  <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script>
  <script type="text/javascript" src="/example/config/example.client.routes.js"></script>

  <script type="text/javascript" src="/application.js"></script>
</body>
</html>

This will render the user object as a JSON representation right in your main view application. When the AngularJS application bootstraps, the authentication state will already be available. If the user is authenticated, the user object will become available; otherwise, the user object will be NULL. Let's see how you can use AngularJS services to share the user information.

Before you can create your Authentication service, it would be best to create a specific module that will hold all user-related logic. We'll call this module the users module. In your public folder, create a new folder named users. In this folder, create a folder named services and a file named users.client.module.js. In the users.client.module.js file, create your angular module, as follows:

angular.module('users', []);

Now create your service file named authentication.client.service.js inside your public/users/services folder. In your new service file, paste the following code snippet:

angular.module('users').factory('Authentication', [
  function() {
    this.user = window.user;

    return {
      user: this.user
    };
  }
]);

Notice how we referenced the window.user object from the AngularJS service. The last thing you should do is include the module and service files in your main application page. Go to app/views/index.ejs and add your new JavaScript files, as follows:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (user) { %>
    <a href="/signout">Sign out</a>
  <% } else { %>
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  <% } %>

  <section ng-view></section>
    
  <script type="text/javascript">
    window.user = <%- user || 'null' %>;
  </script>
    
  <script type="text/javascript" src="/lib/angular/angular.js"></script>
  <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>

  <script type="text/javascript" src="/example/example.client.module.js"></script>
  <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script>
  <script type="text/javascript" src="/example/config/example.client.routes.js"></script>

  <script type="text/javascript" src="/users/users.client.module.js"></script>
  <script type="text/javascript" src="/users/services/authentication.client.service.js"></script>

  <script type="text/javascript" src="/application.js"></script>
</body>
</html>

Next, you will need to include your new user module as the main application module dependency. Another important change would be to solve Facebook's redirect bug that adds a hash part to the application's URL after the OAuth authentication round-trip. To do so, modify your public/application.js file as follows:

var mainApplicationModuleName = 'mean';

var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'users', 'example']);

mainApplicationModule.config(['$locationProvider',
  function($locationProvider) {
    $locationProvider.hashPrefix('!');
  }
]);

if (window.location.hash === '#_=_') window.location.hash = '#!';

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainApplicationModuleName]);
});

That's it! Your new user module should now be available as well as its Authentication service. The final step will be to use the Authentication service inside another AngularJS component.

The difficult part is behind you since all you have left to do is inject the Authentication service to your desired AngularJS entity, and you'll be able to use the user object. Let's use the Authentication service inside our example controller. Open your public/example/controllers/example.client.controller.js file and make the following changes:

angular.module('example').controller('ExampleController', ['$scope', 'Authentication',
  function($scope, Authentication) {
    $scope.name = Authentication.user ? Authentication.user.fullName : 'MEAN Application';
  }
]);

In the preceding code snippet, you injected the Authentication service to the controller and used it to reference the model name field to the user fullName field. To test your Authentication service, use your command-line tool and navigate to the MEAN application's root folder. Then run your application:

$ node server

Once your application is running, use your browser and navigate to http://localhost:3000/#!/. Try to sign in, and you should see the user's full name in the two-textboxes example.