angualrjs 总结 随记(一)
$apply方法的作用
$apply方法是用来触发脏检查,它在控制器里监听一个变量,每当这个变量的值改变的时候,它会去与最初的值做一次比较,然后HTML页面就会及时更新该变量的值(将最新的值赋值到html页面的view层或Model层(表单));
var fristController = function($scope){
$scope.date = new Date();
setInterval(function(){
$scope.$apply(function(){
$scope.date=new Date();
})
},1000)
}
HTML页面里的{{date}}就会每隔一秒更新
$watch方法
监听一个model(表单),当一个model每次改变时,都会触发第二个参数函数
$scope.$watch('name',function(){});//name是model名<input type='text' value='' ng-model='name'/>
$watch也可以监听一个json对象,当第三个参数设为true时,它监听对象里的每个属性,如果没有第三个参数,只监听对象本身,只有整个对象发生变化时,才会触发第二个参数函数,比如当这个对象变为数组的时候
服务
factory方法返回的是对象,json或数组,也可以返回字符串类型的数据,但service方法只能返回数据或对象
创建服务有3种方法
$provide.provider('服务名',function(){this.$get=function(){return obj}}); $provide.factory('服务名',fn); $provide.service('服务名',fn);
服务的作用是用来在多个控制器内共享数据
angular.module('myApp',[])
.factory('服务名',function(){
return {uname:'kevin',pwd:'123'}
})
.controller('ctrlname',function('服务名',$scope){
// ...
})
.directive('myDirective', function(){
return {
template: '<button>Click me</button>'
}
})
fireworks将图片变为透明色
如果是新建的图片,只要把画布背景设置成透明,图片完成后保存为GIF格式即可;
如果是已经存在的图片,用Fireworks将图片打开,然后按Ctrl+Shift+X,在弹出界面中格式选择为GIF。在右边预览图中,把它放大。然后在你要变透明的区域按鼠标右键,选“透明”,这样就可以了.
自定义指令
自定义指令有两种方法:
第一种:
angular.module('myapp',[],['$compileProvider',function($compileProvider){
$complieProvider.directive(''指令名',function(){
return {
restrict: 'ACEM',
replace: true,
transclude: true,
template: '<div>content<span ng-transclude></span></div>'
}
})
}]);
第二种:
angular.module('myapp',[]).directive('指令名',function(){
return {
restrict: 'ACEM',
replace:true,
transclude:true,
template:'<div>content<span ng-transclude></span></div>',
templateUrl:'demo/index.html' //这里的路径是相对angular下的index.html的,模板里的内容可以获取控制器里定义的属性变量
}
})
指令常用配置属性
priority //设定指令的优先级,值越大优先级越高
terminal:true //这个属性必须和priority共用,过滤所有比priority值低的指令
transclude //这个属性可以保留被替换的内容,如在新模板里加上这个就会将原始数据加载到这个div里<div ng-transclude></div>
link
compile
还有一种在当前视图里加载另一个模板的方式
<script type="text/ng-template" id="customTag2">
// 在这里写内容,也可以用控制器里的变量,如{{name}}
</script>
<my-tag></my-tag> //这里将用customTag2模板里的内容来替换,必须用分号隔开
angular.module('myapp',[]).directive('指令名:mytag',function(){
return {
restrict: 'ACEM',
replace:true,
transclude:true,
templateUrl:'customTag2' //这里的路径是相对angular下的index.html的,模板里的内容可以获取控制器里定义的属性变量
}
})
创建应用和模型和控制器
1、创建应用
Myapp = Ember.Application.create({
name:'kevin',
age:18,
ready:function(){
alert('加载应用时自动调用该初始化方法,属性通过Myapp.name访问,这里的对象可有可无')
}
});
2、创建模型models
Myapp.Song = Ember.Object.extend({
title: null,
artist: null,
genre: null,
listens: 0
})
实例化模型对象
var mySongs = Song.create({
title: 'Son of the Morning',
artist: 'Oh, Sleeper',
genre: 'Screamo'
})
3、创建控制器
Myapp.songsController = Ember.ArrayController.create({
content: [],
init: function(){
var song = Myapp.Song.create({
title: 'Son of the Morning',
artist: 'Oh, Sleeper',
genre: 'Screamo'
});
this.pushObject(song);
}
});
注:init 函数不是必需的,但它很方便,因为 songsController 一旦就绪,就会触发 init 函数。 它可以用来将现有数据填充到控制器。
配置路由
AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。
后台路由: 通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML)。
AngularJS的前端路由: 需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。
通过$routeProvider('url',Object)配置路由;第一个参数是路由路径,第二个参数是可配置对象。
配置对象中可以进行设置的属性包括:controller、 template、 templateURL、 resolve、 redirectTo和reloadOnSearch。
url中的参数可以在通过$routeParams对象获取,比如$routeParams.name,要注意的是$routeParams必须在控制器里传入这个参数对象
配置一个比较复杂的路由
ngular.module('myApp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardController',
resolve: {
user: function(SessionService) {
return SessionService.getCurrentUser();
}
}
})
.otherwise({
redirectTo: '/'
});
}]);
自定义过滤器
自定义过滤器有两种方法
第一种
$filterProvider.register('filterName',function(){
return function(obj){
var newObj =[];
angular.forEach(obj,function(o){
if(o.age>20)
newObj.push(o);
})
return newObj
}
})
第二种
angular.module('myapp',[]).filter('filterName',function(){
return function(){}//和上面的一样
})
视图代码
<ul>
<li ng-repeat="user in data | filterName">//将每个user对象依次传给上面函数的参数obj
user.name
user.age
</li>
</ul>
自定义控制器
$controllerProvider.register('ctrlName',function($scope,serviceName){
// ...
})
控制器的显示注入
第一种显示注入
function demoController(a){}
demoController.$inject=['$scope']
第二种显示注入
angular.module('myApp',[]).controller('demoController',['$scope',function(a){
// ...
}])
内置指令和内置事件
<div ng-include="'other.html'"></div>
<div ng-include src="'other.html'"></div>
<button ng-click='changeStaus($event)'>点击</button>
$scope.changeStaus=function(event){ angular.element(event.target).html('点击改变按钮文字');
angular.element() //方法可以把dom对象转换为jquery对象
}
<上图为一个元素上有2个指令的情况>
把指令标签转换为dom结构,执行complie方法,compile方法返回的就是Link函数, 所以如果指令配置了compile方法,就不需要再配置Link方法了。
compile方法 有3个参数 tElement, tAttrs, transclude。
其中tElement是该指令标签的JQuery对象,transclude是原始数据里的内容
compile:function(tElement,tAttrs,transclude){ tElement.append(angular.element("<div>content</div>"));//这种方式可以给该标签增加内容 return {
pre: function(scope,iElement,iAttrs,controller){},
post:function(scope,iElement,iAttrs,controller){}
} //这就是Link方法,它包含两个属性,pre指在指令连接到子元素之前运行该方法,post指令连接到子元素之后运行该方法
}
一般 compile方法用来改变dom结构,link方法用来给该指令元素绑定事件,Link方法包含4个参数 scope, iElement, iAttrs, controller
Link:function(scope,iElement,iAttrs,ctrlname){//scope是当前指令元素的作用域,ctrlname是该指令元素的控制器名 iElement.on('click',function(){
scope.$apply(function(){ //在控制器里改变视图模板里的内容必须用脏检查$apply方法,除非该元素用了ng-model指令绑定了数据
scope.user.name='new name';
})
})
}
指令的配置对象里还有一个controller属性
controller:function($scope){};//给该指令元素创建一个控制器 controllerAs:'ctrlname';//给该控制器取一个名字
【anuglar疑问】
服务里返回的数据是不是只能传给控制器,而不能传给指令呢?
如果是的话,那么指令只能通过配置scope属性来访问控制器里的数据
angualrjs 总结 随记(一)的更多相关文章
- angualrjs 总结 随记(三)
$sanitize和$sce服务的使用方法 $sanitize会把标签的属性都移除,以及绑定在元素上的事件.仅保留了标签和内容 $q服务的使用1. 创建一个Service,去服务器读取数据: 2. 在 ...
- angualrjs 总结 随记(二)
表单控制变量form 控制变量 //字段是否未更改 fromName.inputFieldName.$pristine //字段是否更改 fromName.inputFieldName.$dirty ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
- 这些年一直记不住的 Java I/O
参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...
- 千回百折:百度Java研发offer斩获记和经验分享
起因 面试过程 等待offer的过程中悟道 Java面试常考知识点个人总结 过程 百度——作为国内互联网的巨头之一,最近的一些风波对其褒贬不一,但是类似事件不是第一次发生,也绝对不是最后一次,对于真的 ...
- 记一次nginx部署yii2项目时502 bad gateway错误的排查
周六闲来无事,就试着安装和部署下yii2,安装过程没什么问题,但部署到nginx上时遇到了502 bad gatewary问题,折腾了半天才搞定.这个问题是我以前在部署yii2时没有遇到过的,因此记在 ...
- 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
- ArcGIS中的标注和注记
在ArcMap中可以使用标注和注记来识别要素,选择标注或注记取决于你需要如何控制文本显示以及在ArcMap中如何存储文本. 1.标注只是临时显示相关数据或字段 2.标注用于长时间保存数据以及显示方式. ...
随机推荐
- python标准库:datetime模块
原文地址:http://www.bugingcode.com/blog/python_datetime.html datatime 模块题共用一些处理日期,时间和时间间隔的函数.这个模块使用面向对象的 ...
- SWUST OJ 爬不出去的水井(0333)
爬不出去的水井(0333) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 1069 Accepted: 150 Descriptio ...
- 一个自动递增生成目录和文件的cop文件类
package com.hudong.util.orther; import java.io.File; import java.io.FileInputStream; import java.io. ...
- 在python使用selenium获取动态网页信息并用BeautifulSoup进行解析--动态网页爬虫
爬虫抓取数据时有些数据是动态数据,例如是用js动态加载的,使用普通的urllib2 抓取数据是找不到相关数据的,这是爬虫初学者在使用的过程中,最容易发生的情况,明明在浏览器里有相应的信息,但是在pyt ...
- Thomson Plaza里面的三家店以及水果大会
旅行应该是一个发现的过程,至少我是这么认为的.很多时候并不一定要到什么特别的地方,也可以感受到旅游的乐趣.我觉得只要能看到值得回味的东西就好了.而能回味的东西,往往是需要仔细地来品.像旅行社安排的那样 ...
- Appium移动自动化框架功能概括
小编说:Appium 是一个移动端自动化测试开源工具,可以针对不同的平台用一套API 来编写测试用例.本文对Appium自动化测试框架的功能进行了概括. 本文选自<软件自动化测试开发>,了 ...
- Mac上各种实用命令
下载Github资源:git clone 显示隐藏文件:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏隐藏文件:defa ...
- 正式学习MVC 05
1.剃须刀模板razor的使用 1)混编 循环语法 @model List<MVCStudy.Models.Student> @{ ViewBag.Title = "List&q ...
- 全差分运算放大器ADA4930的分析(2)
前面解释了在ADA4930组成的单端转差分电路的输入电阻RIN的大小,可知当RF=RG=1KΩ的时候,RIN=1.33KΩ. 图1单端转差分电路 如图1所示,假设信号源为2V VPP的信号,信号源的内 ...
- 用nodejs+express搭建前端测试服务端
平时开发前端应用,如果没有现成的后端接口调试,又要保证前端进度,该怎么办呢,当然办法还是很多的,很多大牛都分享过很多经验,我也来说说我常用的方法. 请求本地数据文件 把本地数据放到程序指定目录,发起h ...