AngularJS Applications
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
<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>
Application Files "myNoteApp.js":
Controller File "myNoteCtrl.js":
$ 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 = "clear ()"> Clear </ button>
ng-bind command to bind the controller function left () to <span>, is used to display the remaining characters:
Applications library files needed to perform after AngularJs loading:
<Script src = "myNoteCtrl.js"> </ script>
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 /en. App.js) defines the application of the model code.
One or more controllers file (my /en. 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.