MEAN.JS - Angular Components in App

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

Getting to know AngularJS

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

You can make the page an Angular apppcation 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 apppcation. 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 Apppcation as a Module

To work with an Angular apppcation, we need to define a module. It is a place where you can group the components, directives, services, etc., which are related to the apppcation. The module name is referenced by ng-app attribute in the HTML. For instance, we will say Angular apppcation 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 apppcation by using below statement in an external JavaScript file −

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

Defining Controller

AngularJS apppcation repes on controllers to control the flow of data in the apppcation. 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 pne, 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 readabipty, re-usabipty, and testabipty. 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 pnk.

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 pnk. In the next chapter, we will start creating single page apppcation by using Angular.

MEAN.JS - Angular Components in App

Getting to know AngularJS

Angular Apppcation as a Module

Defining Controller

Defining Scope

友情链接