当前位置:  首页  >  前端开发  >  设计思想

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

最近在项目中用到了angular,之前从未用到过此jslib库,由于项目也比较着急,学习的寥寥草草。到目前为止也只是学会皮毛而已,现将自己学习的知识总结如下:备注1:            &#16

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

备注1:

              版本号:1.2.2

备注2:

              本文将angular结合bootstrap做前端页面,逻辑处理。其中用到了ng的route,repeat,ng-option做下拉框等等一些简单的ng的知识。

开始angular编程:

1、    引入文件

 

2、    ng模板的应用:

说明:

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

                            实现方式(index.jsp)

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

 

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

案例:

     

对应的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:

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文件


内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4