AngularJS Tutorial(18)from w3school
2015-08-04 09:31
609 查看
It is time to create a real AngularJS Single Page Application (SPA).
ng-app="myNoteApp">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div
ng-controller="myNoteCtrl">
<h2>My Note</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 Yourself »
The application file "myNoteApp.js":
var app = angular.module("myNoteApp", []);
The 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 of the AngularJS application: ng-app="myNoteApp":
<html
ng-app="myNoteApp">
A a <div> in the HTML page is the scope of a controller: ng-controller="myNoteCtrl":
<div
ng-controller="myNoteCtrl">
An ng-model directive binds a <textarea> to the controller variable
message:
<textarea
ng-model="message"
cols="40" rows="10"></textarea>
The two ng-click events invoke the controller functions
clear() and save():
<button
ng-click="save()">Save</button>
<button
ng-click="clear()">Clear</button>
An ng-bind directive binds the controller function left() to a <span> displaying the characters left:
Number of characters left:
<span ng-bind="left()"></span>
Your application libraries are added to the page (after the library):
<script
src="myNoteApp.js"></script>
<script
src="myNoteCtrl.js"></script>
The <html> element is the "container" for the AngularJS application (ng-app=).
A <div> elements defines the scope of an AngularJS controller (ng-controller=).
You can have many controllers in one application.
An application file (my...App.js) defines the application module code.
One or more controller files (my...Ctrl.js) defines the controller code.
For single page applications (SPA), the root of the application is often the <html> element.
One or more ng-controller directives define the application controllers. Each controller has its own scope: the HTML element where they were defined.
AngularJS starts automatically on the HTML DOMContentLoaded event. If an ng-app directive is found, AngularJS will load any module named in the directive, and compile the DOM with ng-app as the root of the application.
The root of the application can be the whole page, or a smaller portion of the page. The smaller the portion, the faster the application will compile and execute.
It is time to create a real AngularJS Single Page Application (SPA).
An AngularJS Application Example
You have learned more than enough to create your first AngularJS application:My Note
Number of characters left: 100Application Explained
AngularJS Example
<htmlng-app="myNoteApp">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div
ng-controller="myNoteCtrl">
<h2>My Note</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 Yourself »
The application file "myNoteApp.js":
var app = angular.module("myNoteApp", []);
The 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 of the AngularJS application: ng-app="myNoteApp":
<html
ng-app="myNoteApp">
A a <div> in the HTML page is the scope of a controller: ng-controller="myNoteCtrl":
<div
ng-controller="myNoteCtrl">
An ng-model directive binds a <textarea> to the controller variable
message:
<textarea
ng-model="message"
cols="40" rows="10"></textarea>
The two ng-click events invoke the controller functions
clear() and save():
<button
ng-click="save()">Save</button>
<button
ng-click="clear()">Clear</button>
An ng-bind directive binds the controller function left() to a <span> displaying the characters left:
Number of characters left:
<span ng-bind="left()"></span>
Your application libraries are added to the page (after the library):
<script
src="myNoteApp.js"></script>
<script
src="myNoteCtrl.js"></script>
AngularJS Application Skeleton
Above you have the skeleton (scaffolding) of a real life AngularJS, single page application (SPA).The <html> element is the "container" for the AngularJS application (ng-app=).
A <div> elements defines the scope of an AngularJS controller (ng-controller=).
You can have many controllers in one application.
An application file (my...App.js) defines the application module code.
One or more controller files (my...Ctrl.js) defines the controller code.
Summary - How Does it Work?
The ng-app directive is placed at the root element the application.For single page applications (SPA), the root of the application is often the <html> element.
One or more ng-controller directives define the application controllers. Each controller has its own scope: the HTML element where they were defined.
AngularJS starts automatically on the HTML DOMContentLoaded event. If an ng-app directive is found, AngularJS will load any module named in the directive, and compile the DOM with ng-app as the root of the application.
The root of the application can be the whole page, or a smaller portion of the page. The smaller the portion, the faster the application will compile and execute.
相关文章推荐
- AngularJS Tutorial(17)from w3school
- AngularJS Tutorial(16)from w3school
- AngularJS Tutorial(15)from w3school
- AngularJS Tutorial(14)from w3school
- AngularJS Tutorial(13)from w3school
- AngularJS Tutorial(12)from w3school
- AngularJS Tutorial(11)from w3school
- AngularJS Tutorial(10)from w3school
- AngularJS Tutorial(9)from w3school
- AngularJS Tutorial(8)from w3school
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(6)from w3school
- AngularJS Tutorial(5)from w3school
- AngularJS Tutorial(4)from w3school
- AngularJS Tutorial(3)from w3school
- AngularJS Tutorial(2)from w3school
- AngularJS Tutorial(1)from w3school
- angularjs入门案例 新玩具-中午吃神马
- angular之Directive - Compile vs. Link
- angularjs calling order