Angularjs Quick Start Guide 18:application

It's time to create a real Angularjs single page application (SPA).

An example of a ANGULARJS application

You've learned enough to create your first ANGULARJS application:

My Note<textarea class="ng-pristine ng-untouched ng-valid" rows="10" cols="40" data-ng-model="message"></textarea>

Save Clear

Number of characters left:

Program code is explained

<HTMLNg-app= "Mynoteapp"><Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></Script><Body><DivNg-controller= "Mynotectrl"><H2>My Note</H2><P><textareaNg-model= "message"cols= "Max"rows= "Ten"></textarea></P><P><ButtonNg-click= "Save ()">Save</Button><ButtonNg-click= "Clear ()">Clear</Button></P><P>Number of characters left:<spanNg-bind= "Left ()"></span></P></Div><Scriptsrc= "Mynoteapp.js"></Script><Scriptsrc= "Mynotectrl.js"></Script></Body></HTML>

Run

Application file "Mynoteapp.js" code:

var app = Angular.module ("Mynoteapp", []);

Controller file "Mynotectrl.js" code:

function ($scope) {    = "";  $scope.leftfunction() {return - $scope. message.length;};     function () {$scope. Message = "";};    $scope. Save  function() {alert ("Note Saved");};});

Elements

<ng-app= "Mynoteapp">

The <div> element in the page specifies the scope of the controller: ng-controller= "Mynotectrl":

<ng-controller= "Mynotectrl">

　　The ng-model directive binds the <textarea> element to the controller's message variable:

<ng-model= "message"  cols= "Max"  rows= "Ten"></textarea>

The two Ng-click events Call the clear () function and the Save () function in the controller, respectively:

<ng-click= "Save ()">save</button>  <ng-click= "clear ()">clear</ Button >

　　The ng-bind directive binds the controller's left () function to the <span> element to display the number of characters that can be entered:

<ng-bind= "Left ()"></span>

Application libraries is added to the page (after the Angularjs Class library Reference):

<src= "Mynoteapp.js"></script><  src = "mynotectrl.js" ></script > 

ANGULARJS Application Framework

With the example above, you already have a real ANGULARJS application framework (or scaffolding), which is a single-page application (SPA).

　　The HTML element where the ng-app instruction is located is defined as the container for the ANGULARJS application.

The element that contains the directive Ng-controller defines the scope of the ANGULARJS application controller.

You can have multiple controllers in an application.

A application file (such as my ... App.js) defines the code for a application module.

One or more controller files, such as my ... Ctrl.js) defines the code for the controller.

How does it work?

The ng-app instruction is placed on the root element of the application.

For a single-page application (SPA), the root element of the application is the

One or more Ng-controller directives define the different controllers in the application. Each controller has its own scope: The HTML element that contains the directive definition.

Angularjs is automatically called when the HTML domcontentloaded event is executed. If the Ng-app directive is found, ANGULARJS will load all modules named in the instruction and compile the DOM within the root element of the application defined by Ng-app.

The root of application can be an entire page or a small part of a page. The smaller the part defined by AngularJS application, the faster the application compiles and executes.

Previous chapter-Angularjs Quick Start Guide 17:includes Next chapter-Angularjs Quick Start Guide 19: Sample code

Angularjs Quick Start Guide 18:application