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