angular学习(一):动态模板总结
来源:互联网 发布:vb 求数组最大最小值 编辑:程序博客网 时间:2024/06/02 02:43
最近在项目中用到了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文件
- angular学习(一):动态模板总结
- angular学习总结十——动态创建组件并实现交互一
- angular学习总结一——安装
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
- angular学习笔记一
- Angular.js学习一
- angular学习(一)
- Angular学习(一)
- angular-flot学习总结
- Angular 学习总结笔记
- C++ 模板学习总结(一)
- ionic+angular项目总结一
- Angular.js学习笔记(一)
- angular学习整理(一)
- angular学习笔记(一)
- angular.js学习笔记(一)
- Angular学习笔记(一)
- angular 学习笔记(一)
- Oracle10g完全卸载正确步骤(详细图文教程)
- Java基础04 封装与接口
- poj1220-任意进制转换(瞻仰下大牛代码)
- How to Install Subversion on Mac OS X
- WCF 与 Webservice 开发、测试、调用方法
- angular学习(一):动态模板总结
- uploadify2.1使用一】【Spring MVC uploadify2.1】批量文件、图片上传
- UVA 11181 Probability|Given 概率
- HTTP协议详解
- WordPress添加评论回复邮件提醒通知功能
- 用 C 语言实现面向对象编程
- ArcGIS教程:ArcGIS之Cartogram地图变形记
- QMainWindow中QDockWidget和中心部件的布局问题
- javascript的61个实例