angularjs入门

当前位置:首页>AngularJS>angularjs入门>AngularJS快速入门指南18:Application

AngularJS快速入门指南18:Application

时间:2015-08-07 16:44来源:网络整理 作者:KKWL 点击:
是时候创建一个真正的AngularJS单页面应用程序了(SPA)。 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note SaveClear Number of characters left: 100 程序

 

  是时候创建一个真正的AngularJS单页面应用程序了(SPA)。

一个AngularJS应用程序示例

  你已经了解了足够多的内容来创建第一个AngularJS应用程序:

My Note

Save Clear

Number of characters left: 100

 

程序代码即解释

My NoteSaveClearNumber of characters left:

运行

  application文件"myNoteApp.js"代码:

var app = angular.module("myNoteApp", []);

  controller文件"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");}; });

  元素<html>被指定为AngularJS application的容器:ng-app="myNoteApp":

  页面中的<div>元素指定了控制器的作用域:ng-controller="myNoteCtrl":

  ng-model指令将<textarea>元素绑定到控制器的message变量中:

  两个ng-click事件分别调用了控制器中的clear()函数和save()函数:

SaveClear

  ng-bind指令将控制器的left()函数绑定到<span>元素上,用以显示剩余可以输入的字符数:

Number of characters left:

  application libraries被添加到页面上(在AngularJS类库引用之后):

AngularJS应用程序框架

  通过上面的示例,你已经拥有了一个真正的AngularJS应用程序框架(或者称之为脚手架),它是一个单页面应用程序(SPA)。

  ng-app指令所在的HTML元素被定义为AngularJS应用程序的容器。

  指令ng-controller所在的元素定义了AngularJS应用程序控制器的作用域。

  在一个应用程序中你可以拥有多个控制器。

  一个application文件(例如my...App.js)定义了一个application模块的代码。

  一个或多个控制器文件(例如my...Ctrl.js)定义了控制器的代码。

它是如何工作的?

  ng-app指令被放在application的根元素上。

  对单页面应用程序(SPA)而言,application的根元素即<html>元素。

  一个或多个ng-controller指令定义了application中不同的控制器。每一个控制器都有它自己的作用域:即包含该指令定义的HTML元素。

  当HTML的DOMContentLoaded事件被执行时AngularJS会被自动调用。如果找到ng-app指令,AngularJS将会加载所有以指令命名的模块,并对以ng-app定义的application的根元素内的DOM进行编译。

  application的根可以是整个页面,也可以是页面中的一小部分。AngularJS application定义的部分越小,application编译和执行的速度越快。

 

上一章 - AngularJS快速入门指南17:Includes

下一章 - AngularJS快速入门指南19:示例代码

 

 

------分隔线----------------------------