angular这个大梗的学习笔记
angular定义一个模块(module)及控制器(controller)的局部声明方法:
var app=angular.module("Myapp",[]);
myapp.controller("myctrl",['$scope','$window',function($scope,$window){
$scope.name="欢迎来到 Angular 的世界！";
$scope.value="100";
//$window.alert(8)
}])
var app=angular.module("Myapp",[]);
1、红色字的 Myapp是在页面中ng-app="Myapp"调用的(一个页面中只能出现一次<html ng-app="Myapp">表示这个页面从此处开始，里面的东西都将由angular来管理)
2、[] 这个是我们要调用另外一个模块时，导入模块的地方，如果没用到其它模块，这里则为空
示例如下：Myapp
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives','Myapp'
]);
3、$scope,$window 表示向控制器中注入这两个参数，并依赖这两个变量;
myapp.controller("myctrl",['$scope','$window',function($scope,$window){
}])
Angular 使用参数详解>>.
UIRoute1.html 项目引导的首页面
<!doctype html>
<html ng-app="MyUIRoute">
<head>
<meta charset="utf-8">
<script src="js/angular-1.3.0.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="UIRoute1.js"></script>
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>
</html>
var myUIRoute = angular.module('MyUIRoute', ['ui.router', 'ngAnimate']);
myUIRoute.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1");//此处设置默认打开页路径
$stateProvider
.state('state1', {//此处'state1'为打开的这个默认页面state1.html的页面名称，
//方便通过a标签<a ui-sref="state1.list">Show List</a>访问子页面
url: "/state1",//此处为设置的页面访问路径与$urlRouterProvider.otherwise("/state1")默认打开页路径对应
//即在浏览器中输入#/state1则打开state1.html页面，此为默认打开页，所以一进来就自动加了#/state1
templateUrl: "tpls/state1.html"
})
.state('state1.list', {//当通过父页面state1点击a标签<a ui-sref="state1.list">Show List</a>访问子页面时，
//此处即为设置a标签访问的页面名称
url: "/list",//此处为设置的页面访问路径（父级必须存在，才能有效，要不然在地址栏加#/list会无效）
templateUrl: "tpls/state1.list.html",
controller: function($scope) {//此处为设置state1.list.html页面受控哪个控制器
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {//此处'state2'为打开的这个页面state2.html的页面名称，
//方便通过a标签<a ui-sref="state2">State 2</a>访问页面
url: "/state2",//此处为设置的页面访问路径,切换到这个页面时，
//会自动在地址栏添加，不写则不会有，也可以开页面但是，没办法保存访问地址
templateUrl: "tpls/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "tpls/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
});
注意点
1、打开页面时如果没在js中设置views视图，则默认在点击的那个页面中的匿名view(如：ui-view)中打开，如果不是，则要设置views中的视图名称，如果要替换当前页，则直接用本页打开时采用的视图名
2、在哪个页面中打开的页面，a标签中的路径一定要写到完整，从最父级写到本页 ，
如：<a ui-sref="index.usermng.highendusers" class="list-group-item">高端用户</a>
因为在app.js中与state中的参数，对应
$stateProvider.state('index.usermng.highendusers', {
url: '/highendusers',
templateUrl: 'tpls3/highendusers.html'
})
3、ui-router中关于内嵌ui-view
首先有个启动页
<!doctype html>
<html ng-app="routerApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/angular-1.3.0.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="UIRoute3.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
假如在启动页面中的一级子页面index.html中有二级ui-view，
<div class="container">
<div ui-view="topbar"></div>
<div ui-view="main"></div>
</div>
则可通过@符号来衔接：
比如一级子页面index.html，state第一个路由命名参数命名为index，
则其本身中放的视图ui-view要用本身子页面的视图名称@自身页面被命名的路由名称
如下图代码
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '/index',
views: {
'': {
templateUrl: 'tpls3/index.html'
},
'topbar@index': {
templateUrl: 'tpls3/topbar.html'
},
'main@index': {
templateUrl: 'tpls3/home.html'
}
}
})
.state('index.usermng', {
url: '/usermng',
views: {
'main@index': {
templateUrl: 'tpls3/usermng.html',
controller: function($scope, $state) {
$scope.addUserType = function() {
$state.go("index.usermng.addusertype");
}
}
}
}
})
.state('index.usermng.highendusers', {
url: '/highendusers',
templateUrl: 'tpls3/highendusers.html'
})
.state('index.usermng.normalusers', {
url: '/normalusers',
templateUrl: 'tpls3/normalusers.html'
})
.state('index.usermng.lowusers', {
url: '/lowusers',
templateUrl: 'tpls3/lowusers.html'
})
.state('index.usermng.addusertype', {
url: '/addusertype',
templateUrl: 'tpls3/addusertypeform.html',
controller: function($scope, $state) {
$scope.backToPrevious = function() {
window.history.back();
}
}
})
.state('index.permission', {
url: '/permission',
views: {
'main@index': {
template: '这里是权限管理'
}
}
})
.state('index.report', {
url: '/report',
views: {
'main@index': {
template: '这里是报表管理'
}
}
})
.state('index.settings', {
url: '/settings',
views: {
'main@index': {
template: '这里是系统设置'
}
}
})
});
angular指令>>>>.
var appModule=angular.module('AppModule',[]);appModule.directive('hello',function(){
return {
restrict:'EACM',
template:'<div>88</div>',
replace:true
}
})
1、restrict匹配模式 restrict:'EACM', 4个参数含义：
E:元素方式
<hello>这是测试angular.js指令标签的内容</hello>
A:属性方式
<div hello>这是测试angular.js指令标签的内容</div>
C:样式类方式
<div class="hello">这是测试angular.js指令标签的内容</div>
M:注释方式，此处directive:hellow左右必须要加空格才行
<!-- directive:hellow -->
<div>这是测试angular.js指令标签的内容</div>
2、templateUrl替换template解决引入大量html结构代码及页面问题；注意点：被引入的页面，如下:hello.html页面代码中一定要有一个包裹所有代码的父级元素，angular在插入到相应指令代码中时，会把这个父级div的所有属性，（如class id 及其他的属性），给组合到指令代码<hello></hello>的这个标签中；
<div id="banner">
<div id="focus" class="focus" hello >
</div>
</div>
var directive=angular.module('mydirective',[]);
directive.directive('hello',function(){
return {
restrict:"AE",
templateUrl: 'banner.html',
replace:true,
link:function(scope,element,attrs){
console.log(element);
console.log(scope);
console.log(attrs);
}
}
})
要被插入的 hello.html 页面代码
<div> //这为包裹所有元素的父级div
<div class="bd">
<ul>
<li>
<a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a>
</li>
<li>
<a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a>
</li>
<li>
<a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a>
</li>
<li>
<a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a>
</li>
</ul>
</div>
<div class="hd">
<ul id="hd-ul"></ul>
</div>
</div>
3、angular内置方法$templateCache实现模版缓存共用
var myModule = angular.module("MyModule", []);
//注射器加载完所有模块时，run方法会执行一次
myModule.run(function($templateCache){
$templateCache.put("key_name","<div>Hello everyone!!!!!!</div>");//$templateCache.put把右边的模版内容缓存起来
});
myModule.directive("hello", function($templateCache) {
return {
restrict: 'AECM',
template: $templateCache.get("key_name"),//通过$templateCache.get调用$templateCache缓存的模版
replace: true
}
});
$templateCache.put('key_name','html结构') 中的参数，就相当于key value 的概念吧，第一部分是名称，第二部分写内容，要用到的时候写名称就行
$templateCache.get('key_name')
4.transclude实现指令中template的HTML结构嵌套(嵌套内容为，设置的指令元素中，页面预留的html结构)
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <hello> <div>这里是指令内部的内容。</div> <div>这里是指令内部的内容。</div> <div>这里是指令内部的内容。</div> </hello> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="transclude.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict:"AE",
transclude:true,
template:"<div>Hello everyone!<div ng-transclude></div>omo</div>"
}
});
效果图如下，
angular这个大梗的学习笔记的更多相关文章
- 大数据 -- kafka学习笔记：知识点整理（部分转载）
一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...
- Angular.js之自定义指令学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Angular.js之内置过滤器学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Pollard Rho大质数分解学习笔记
目录 问题 流程 代码 生日悖论 end 问题 给定n,要求对n质因数分解 普通的试除法已经不能应用于大整数了,我们需要更快的算法 流程 大概就是找出\(n=c*d\) 如果\(c\)是素数,结束,不 ...
- Angular 学习笔记 ( CDK - Accessibility )
@angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家 ...
- Angular 5.x 学习笔记(1) - 模板语法
Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...
- Hadoop学习笔记一
云帆大数据视频学习笔记,记录如下. 一.主机名设置的规范 /etc/hosts文件中添加如下的记录: 192.168.1.128 hadoop-yarn.cloudyhadoop.com had-ya ...
- 不错的Spring学习笔记(转)
Spring学习笔记(1)----简单的实例 --------------------------------- 首先需要准备Spring包,可从官方网站上下载. 下载解压后,必须的两个包是s ...
- Spring学习笔记（七）模拟实际开发过程的调用过程XML版-Setter方式注入
模拟实际开发过程的调用过程XML版-Setter方式注入 源码获取github [TOC] 1.项目结构 2.jar包跟上个一样 3.重写set方法 UserServiceImpl.java 1234 ...
随机推荐
- 让Laravel5支持memcache的方法
Laravel5框架在Cache和Session中不支持Memcache,看清了是Memcache而不是Memcached哦,MemCached是支持的但是这个扩展真的是装的蛋疼,只有修改部分源码让其 ...
- Pandas系列教程——写在前面
之前搜pandas资料,发现互联网上并没有成体系的pandas教程,于是乎突然有个爱迪页儿,打算自己把官网的文档加上自己用pandas的理解,写成一个系列的教程, 巩固自己,方便他人 接下来就干这件事 ...
- Socket 之 原理与编程基础
一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...
- B - 娜娜梦游仙境系列——跳远女王
B - 娜娜梦游仙境系列——跳远女王 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Other ...
- Android进阶笔记17：3种JSON解析工具（org.json、fastjson、gson）
一. 目前解析json有三种工具:org.json(Java常用的解析),fastjson(阿里巴巴工程师开发的),Gson(Google官网出的),其中解析速度最快的是Gson. 3种json工具下 ...
- 【开源项目13】Volley框架 以及 设置request超时时间
Volley提供了优美的框架,使android程序网络访问更容易.更快. Volley抽象实现了底层的HTTP Client库,我们不需关注HTTP Client细节,专注于写出更加漂亮.干净的RES ...
- 不停服务情况下升级nginx
第三方支付平台因安全问题对nginx做了升级操作,为了不影响业务,整个操作过程都不能停服务,因此对升级方法做出了要求.以下为我整理的生产环境实际操作方法,已在第三方支付平台上成功应用,希望对即将或者可 ...
- Flume Spooldir 源的一些问题
Flume Spooldir 源的一些问题 来自:http://blog.xlvector.net/2014-01/flume-spooldir-source-problem/ ( 自己写的插件,数据 ...
- mount: unknown filesystem type 'LVM2_member'解决方案
系统启动到request_module: runaway loop modprobe binfmt-464c挂起 利用U盘系统,挂载硬盘出现:mount: unknown filesystem typ ...
- Linq To Csv 实例简说
http://www.codeproject.com/Articles/25133/LINQ-to-CSV-library 详细源代码在这里 https://github.com/mperdeck/L ...