AngularJS application
Now it’s time to create a real AngularJS single page web application (SPA).
AngularJS Application Example
You have learned enough about AngularJS and now you can start creating your first AngularJS application:
Application explanation
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script> </head> <body ng-app="myNoteApp" ng-controller="myNoteCtrl"> <h2>我的笔记</h2> <textarea ng-model="message" cols="40" rows="10"></textarea> <p> <button ng-click="save()">保存</button> <button ng-click="clear()">清除</button> </p> <p>剩余字数: <span ng-bind="left()"></span></p> <script src="myNoteApp.js"></script> <script src="myNoteCtrl.js"></script> </body> </html>
Running example »
Click the "Run Instance" button to view the online instance
Application file "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");};
});
< The html> element is the container of the AngularJS application: ng-app="myNoteApp":
myNoteCtrl" scope:
directive binds <textarea> to the controller variable message:
Two ng-click events call the controller functions clear() and save():
<button ng-click=" clear()">Clear</button>
ng-bind The instruction binds the controller function left() to <span>, which is used to display the remaining characters:
The application library file needs to be loaded in AngularJs before it can be executed:
<script src="myNoteCtrl.js"></script>
AngularJS application architecture
The above example is a complete AngularJS single page web application (single page web application, SPA). The
<html> element contains the AngularJS application (ng-app=). The
<div> element defines the scope of the AngularJS controller (ng-controller=).
An application can have many controllers.
The application file (my...App.js) defines the application model code.
One or more controller files (my...Ctrl.js) define the controller code.
Summary - How does it work?
ng-app directive is located under the root element of the application.
For a single page web application (SPA), the root of the application is usually <html> element.
One or more ng-controller directives define the application's controller. Each controller has its own scope: defined HTML element.
AngularJS automatically starts in the HTML DOMContentLoaded event. if found ng-app directive, AngularJS loads the module in the directive and compiles ng-app as the root of the application.
The root of the application can be the entire page, or a small part of the page. If it is a small part, it will compile and execute faster.