Angularjs的简单使用

  最近，做项目中使用到Angularjs，要求在页面加载完毕后，首先从数据库中查询出一些基础数据，然后整个页面根据这些数据动态的进行操作，例如一些数据的监控和更新。发现，Angularjs符合要求，从网上找到了Angularjs在页面中的加载顺序，这里在重复的记忆一遍：    1、HTML页面加载，会触发加载页面包含的所有的JS，当然包含Angularjs；    2、Angularjs启动，搜寻所有的指令（directive);    3、找到ng-app，搜寻其指定的模块(Module），并将其附加到ng-app所在的组件上；    4、Angularjs便利所有的子组件，查找指令和bind命令；    5、每次发现ng-controller或者ng-repeat的时候，会创建一个作用域(scope)，这个作用域就是组件的上下文。作用域指明了每个DOM组件对函数、变量的访问权；    6、Angularjs会添加对变量的监听器，并监听每个变量的当前值，一旦值发生变化，Angularjs会更新其在页面的显示；    7、Angularjs优化了检查变量的算法，它只会在某些特殊的事件触发时，才会去检查数据的更新，而不是简单地在后台不停的轮询。因此，Angularjs完全满足我的需求。下面简单介绍了Angularjs的使用。     在项目中引入Angularjs的js脚本。    创建Angularjs的模块文件app.js。里面的内容可以简单。如下：

var app = angular.module('app', []);
接下来创建控制器文件controller.js，这个js文件中的内容其实就是function文件的集合，例如下面控制器文件：

function myController($scope,$http){
var url = '/wtDeatil?index=1';
$http.get(url).success(function(data) {
var result = dealData(data);
$scope.result = result;
$scope.totalPage=data.totalPage;
});
$scope.toPage = function(index){
$http.get("/wtPage?index="+ index).success(function(data){
var result = dealData(data);
$scope.result = result;
$scope.totalPage=data.totalPage;
});
};
}

在所需要用到的页面中引入app.js和controller.js后，然后添加标记ng-app="app"和控制器的标记ng-controller='myController'。其中ng-app的标记一般是加在html标签上，表明整个html文件是一个使用了Angularjs的文件，另外，控制器加在一个你想要展示数据的哪个块上，这样这个块的所有的内容都可以接受控制器中返回的数值。在上面的controller.js中，我们定义了一个控制器myController，当页面加载时，会根据这个控制器向后台请求数据，请求路径为/wtDetail?index=1。使用的是$http,主要负责向前后台的交互(类似于Jquery的get()或者post()方法)。当请求成功后，将后台传递给前台的值放置在作用域scope，这个scope就是myController的上下文，这样在页面上就可以使用{{}}来获取scope中的值。例如使用{{totalPage}}获取页码。   controller.js中的toPage()方法，对应于页面上的标记ng-click="toPage(index)",当然也可以是其它类似的标记。   在使用angularjs时一定要注意angularjs的加载顺序，一定不要在$(document).ready(function(){})中对angularjs中实际渲染的值进行操作，因为这个时候angularjs其实还没有进行渲染。可以使用directive来进行判断angularjs是否渲染完毕和进行相应的操作。