MEAN.JS - Angular Components in App

In this chapter, we will add angular components to an application. It is a web front end JavaScript framework, which allows creating dynamic, single page applications by using Model View Controller (MVC) pattern. In the MEAN.JS architecture chapter, you have seen how AngularJS will process the client request and get the result from database.

Getting to know AngularJS

AngularJS is an open-source web application framework that uses HTML as template language and extends the HTML's syntax to express your application components clearly. AngularJS provides some basic features such as data binding, model, views, controllers, services etc. For more information on AngularJS, refer to this link.

You can make the page an Angular application by adding Angular in the page. It can be added just by using an external JavaScript file, which can be either downloaded or can be referenced directly with a CDN version.

Consider we have downloaded file and referenced it locally by adding to the page as follows −

<script src="angular.min.js"></script>

Now, we need to tell Angular that this page is an Angular application. Therefore, we can do this by adding an attribute, ng-app to the <html> or <body> tag as shown below −

<html ng-app>
or
<body ng-app>

The ng-app can be added to any element on the page, but it is often put into the <html> or <body> tag so that Angular can work anywhere within the page.

Angular Application as a Module

To work with an Angular application, we need to define a module. It is a place where you can group the components, directives, services, etc., which are related to the application. The module name is referenced by ng-app attribute in the HTML. For instance, we will say Angular application module name as myApp and can be specified in the <html> tag as shown below −

<html ng-app="myApp">

We can create definition for the application by using below statement in an external JavaScript file −

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Defining Controller

AngularJS application relies on controllers to control the flow of data in the application. A controller is defined by using ng-controller directive.

For instance, we will attach the controller to the body by using ng-controller directive, along with name of the controller you want to use. In the below line, we are using name of the controller as "myController".

<body ng-controller="myController">

You can attach a controller (myController) to an Angular module (myApp) as shown below −

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

It is better to use named function instead of an anonymous function for readability, re-usability, and testability. In the below code, we are using new named function "myController" to hold the controller code −

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

For more information on controllers, refer to this link.

Defining Scope

Scope is a special JavaScript object that connects controller with views and contains model data. In controllers, model data is accessed via $scope object. The controller function takes $scope parameter which has been created by Angular and it gives direct access to the model.

The below code snippet specifies how to update controller function to receive the $scope parameter and sets the default value −

var myController = function($scope) {
   $scope.message = "Hello World...";
};

For more information on controllers, refer to this link. In the next chapter, we will start creating single page application by using Angular.

Advertisements