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:
Word count remaining: 100
Application explanation
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="myNoteApp" ng-controller="myNoteCtrl"><h2>My Notes</h2><textarea ng-model="message" cols="40" rows="10"></textarea><p><button ng-click="save()">Save</button><button ng-click="clear()">Clear</button></p><p>Remaining word count: <span ng-bind="left()"></span></p><script src="myNoteApp.js"></script><script src="myNoteCtrl.js"></script></body></html>
Running results:
Word count remaining: 100
Application file "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");};});The <html> element is the container for AngularJS application: ng-app="myNoteApp":
<html ng-app="myNoteApp">
<div> is the scope of the controller in the HTML page: ng-controller="myNoteCtrl":
<div ng-controller="myNoteCtrl">
The ng-model directive binds <textarea> to the controller variable message:
<textarea ng-model="message" cols="40" rows="10"></textarea>
Two ng-click events call the controller functions clear() and save():
<button ng-click="save()">Save</button><button ng-click="clear()">Clear</button>
The ng-bind directive binds the controller function left() to <span> to display the remaining characters:
Number of characters left: <span ng-bind="left()"></span>
The application library file needs to be loaded after AngularJs can be executed:
<script src="myNoteApp.js"></script><script src="myNoteCtrl.js"></script>
AngularJS application architecture
The above example is a complete AngularJS 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=).
In one application, it can be made up of many controllers.
The application file (my...App.js) defines the application model code.
One or more controller files (my...Ctrl.js) define controller code.
Summary - How does it work?
The ng-app directive is located under the root element of the application.
For single page web application (SPA), the root of the application is usually the <html> element.
One or more ng-controller directives define the controller of the application. Each controller has its own scope:: defined HTML elements.
AngularJS starts automatically in the HTML DOMContentLoaded event. If the ng-app directive is found, 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, and if it is a small part, it will be compiled and executed faster.
The above is a detailed explanation of the simple application of AngularJS. I hope it can help AngularJS programming.