AngularJS application
It's time to create a true AngularJS single page web application (SPA).
AngularJS application examples
Now that you have learned enough about AngularJS, you can start creating your first AngularJS application:
My notes
Save Clear
Words remaining: 100
Application Explained
AngularJS examples
<! 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 words: <span ng-bind = "left ()"> </ span> </ p>
<script src = "myNoteApp.js"> </ script>
<script src = "myNoteCtrl.js"> </ script>
</ body>
</ html>
operation result:
My notes
Save Clear
Words 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 a container for AngularJS applications: 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 instruction binds the controller function left () to <span> for displaying the remaining characters:
Number of characters left: <span ng-bind = "left ()"> </ span>
The application library file needs to be executed after AngularJs is loaded:
<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 an AngularJS application (ng-app =).
The <div> element defines the scope of the AngularJS controller (ng-controller =).
There can be many controllers in one application.
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?
The 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 the <html> element.
One or more ng-controller directives define the controller of the application. Each controller has its own scope :: HTML elements defined.
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. If it is a small part, it will compile and execute faster.
The above is a detailed explanation of AngularJS simple application, I hope to help friends who are programming in AngularJS.
