angular学习(一):动态模板总结

近期在项目中用到了angular,之前从未用到过此js lib库,因为项目也比較着急,学习的寥寥草草。到眼下为止也仅仅是学会皮毛而已,现将自己学习的知识总结例如以下:

备注1:

版本：1.2.2

备注2:

本文将angular结合bootstrap做前端页面,逻辑处理。

当中用到了ng的route,repeat,ng-option做下拉框等等一些简单的ng的知识。

開始angular编程:

1、    引入文件

<script src="lib/angular-1.2.2/angular-1.2.2/angular.min.js"></script>
<script src="lib/angular-1.2.2/angular-1.2.2/angular-route.min.js"></script>

2、    ng模板的应用：

说明:

在后台维护平台中,一般都会存在有左側菜单，右側操作的页面,假设这里用angular的实现的话,就会用到ng模板的知识

实现方式(index.jsp)

1、    动态菜单div,声明ng-view告诉angular此部分内容是动态的,记住务必引入angular-route.

<span style="white-space:pre">		</span><div id="right" style="width:1024px;height:600px;margin-left:210px;" ng-view></div>

2、controller应用,在ng的应用中都是controller相应相应的模板html文件,index文件也不例外

案例：

<span style="white-space:pre">	</span><!-- route -->
	<script type="text/javascript" src="js/controller/IndexController.js"></script>
	<!-- controller -->
	<script type="text/javascript" src="js/controller/AdvManageController.js"></script>
	<script type="text/javascript" src="js/controller/RankManageController.js"></script>

相应的controller:

IndexController.js	:	route过滤url设置
var indexModule = angular.module('index',['ngRoute']);
indexModule.config(['$routeProvider',
         function($routeProvider) {
$routeProvider.when('/advManage', {templateUrl: './subhtml/adv_manage.html'});	                $routeProvider.when('/advModifyManage',{templateUrl:'./subhtml/adv_modify_manage.html'});
}]);

备注3:

上面此类code编写完毕之后基本上就实现了动态菜单的操作.when的设置过滤通过url相应相应的html文件。

备注4:

模板文件controller以及html的注意事项例如以下(举例adv_manage)：

A、    依据indexController中设置的过滤来看相应的路径相应的html文件

B、     Html模板文件里声明相应的controller name：

<div style="margin-top:20px;margin-left:40px;"ng-controller="AdvManageController">

C、     AdvManageController.js

var module = angular.module('index');
module.controller('AdvManageController',function($scope,$rootScope,$http){
                              //somecode
})

总结：

ng中的ng-view基本上就是这样了。

总结一下就是下面几步：

1、     引入ng lib ,包含ng-route

2、     定义对应的indexController设置过滤,而且定义对应字模板文件

3、     Code对应的route到对应的html文件