AngularJS Applications

Previous: AngularJS module

Next: AngularJS examples

Now is the time to create a real AngularJS single-page Web applications (single page web application, SPA) a.

AngularJS application examples

You've learned enough knowledge about AngularJS, you can now start creating your first AngularJS application:

My notes

Remaining Word Count:100

Explain the application

AngularJS examples

<Html ng-app = "myNoteApp ">
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-controller = "myNoteCtrl ">

<H2> my notes </ h2>

<P> <textarea ng-model = "message" cols = "40" rows = "10"> </ textarea> </ p>

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

<P> Number of characters left: <span ng-bind = "left ()"> </ span> </ p>

</ Div>

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

</ Body>
</ Html>

try it"

Application Files "myNoteApp.js":

var app = angular.module ( "myNoteApp", []);

Controller File "myNoteCtrl.js":

app.controller ( "myNoteCtrl", function ($ scope) {
$ Scope.message = "";
$ Scope.left = function () {return 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {alert ( "Note Saved");};
});

<html> element is AngularJS application: ng-app = "myNoteApp" container:

<div> HTML pages in the controller: ng-controller = "myNoteCtrl" scope:

ng-model directive bind <textarea> to the controller variable message:

Two ng-click event calls the controller function clear () and save ():

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

ng-bind command to bind the controller function left () to <span>, is used to display the remaining characters:

Number of characters left: <span ng -bind = "left ()"> </ span>

Applications library files needed to perform after AngularJs loading:

AngularJS Application Architecture

Examples of the above is a complete AngularJS single-page Web applications (single page web application, SPA).

<html> element contains AngularJS application (ng-app =).

<div> element defines the scope of (ng-controller =) AngularJS controller.

Applications can be made in a lot of controllers.

The application file (my ... App.js) defines the application of the model code.

One or more controllers file (my ... Ctrl.js) defines the controller code.

Summary - How does it work?

ng-app directive in the root element of the application.

For single-page Web applications (single page web application, SPA), root applications usually <html> element.

One or more ng-controller directive defines the application controller. Each controller has HTML :: elements of his own scope definition.

AngularJS start automatically in HTML DOMContentLoaded event. If you find ng-app directive, AngularJS load instruction module, and ng-app as the root of the application to be compiled.

Root application may be a small part of the whole page, or pages, if it is a small part will be faster compilation and execution.