angularJs

Page 1 of 1

Archives

文件夹

AngularJs里面自带一个jsonp的方法,但是这个jsonp方法要求你的请求参数callback只能等于JSON_BACK,如: http://url?callback=JSON_BACK 否则你的$http.jsonp就不会正常返回你的回调。 当然如果你非要用其他的回调方法,按照jsonp的原理,你写一个全局方法对应上你的callback也可以,如: http://url?callbac=jsonp function jsonp(data){ console.log(data); }

之前用的时候忘记总结了,这里集中总结一下这个问题。 使用require:‘ngModel’ 这个选项来增强我们对指令的处理, 这样就可以作为link选项的第四个参数, link: function ($scope,$element,$attrs,$ngModel){ //其他逻辑代码 } 这里面的$ngModel便是代码中ng-model指令传递过来的对象,包含以下这些方法和属性: $viewValue:视图值,即显示在视图(页面)的实际值(就是上面例子中input输入框的值) $modelValue:模型值,即赋给ng-model的值(与控制器绑定的值) 两者不一定相等,因为$viewValue同步到$modelValue要经过一系列的操作(经过三个管道)。 $parsers:一个执行它里面每一个元素(每一个元素都是一个函数)的数组, 主要是用来做验证和转换值的过程,ngModel从DOM读取的值会被传入到其中的函数它会依次执行每一个函数,把每一个函数执行的结果传个下一个函数,而最后一个函数执行的值将会传到model中, 我们可以将函数push进去,那样它就会执行。 $formatters:也是一个执行它里面每一个元素(每一个元素都是一个函数)的数组,主要用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。当数据的模型值发生变化的时候,里面的函数会被一一执行,同样我们就可以将函数push进去,让它执行 $viewChangeListeners:也是一个由函数组成的数组当视图的值发生变化的时候里面的函数会被一一调用,实现跟$watch类似的功能。 $render:函数负责将模型值同步到视图上, 如果模型值被改变,需要同步视图的值。 $setViewValue:用于设置视图值(上面的例子就是将input的value值赋值给$viewValue) $error:一个包含所有error的对象 $setPristine:设置为原始状态,会添加ng-pristine的class类名,移除ng-dirty的class类名 $setValidity:设置错误的标志为一个函数,接受两个参数,第一个参数为错误标志的名字,是字符串类型,将会被设置成$error的属性第二个参数为布尔值,为这个错误标志的值。  

先说基本的 $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。   $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如’name’,或函数如function(){return $scope.name}。 listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用) objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。 简单的实现看书好了,我这里重点要说的是监听多个值。 $watch监听多个值   从第一个参数的说明里可以看出,可以用这样的函数做监听对象function(){return $scope.name}。 就是函数返回的值改变了,我们就认为值变了。   那么我们用这个方法监听多个值,如下: $scope.$watch(function () { return JSON.stringify([$scope.name, $scope.value]) }, function (newVal,oldVal) { //… }); 以上面的方式就可以同时监听该作用域($scope)下的name和value两个值了。   关于$watchCollection 该方法允许我们为对象的属性或者数组的元素设置浅(一层)监控。

这是一篇翻译文章来自于知乎   认证是任何 web 应用中不可或缺的一部分。在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同。这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的完整的应用。 传统的认证系统 在开始说基于 token 的认证系统之前,我们先看一下传统的认证系统。 用户在登录域输入 用户名 和 密码 ,然后点击 登录 ; 请求发送之后,通过在后端查询数据库验证用户的合法性。如果请求有效,使用在数据库得到的信息创建一个 session,然后在响应头信息中返回这个 session 的信息,目的是把这个 session ID 存储到浏览器中; 在访问应用中受限制的后端服务器时提供这个 session 信息; 如果 session 信息有效,允许用户访问受限制的后端服务器,并且把渲染好的 HTML 内容返回。 在这之前一切都很美好。web 应用正常工作,并且它能够认证用户信息然后可以访问受限的后端服务器;然而当你在开发其他终端时发生了什么呢,比如在 Android 应用中?你还能使用当前的应用去认证移动端并且分发受限制的内容么?真相是,不可以。有两个主要的原因: 在移动应用上 session 和 cookie 行不通。你无法与移动终端共享服务器创建的 session 和 cookie。 在这个应用中,渲染好的 HTML 被返回。但在移动端,你需要包含一些类似 JSON 或者 XML 的东西包含在响应中。 在这个例子中,需要一个独立客户端服务。 基于 token 的认证 在基于 […]

本文章所提到的书为《AngularJs权威教程》 Ari Lerner著   绑定策略涉及到4个方式,分别为:“@”,=”,“&” 书中对于绑定策略的描述:   本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域变量。 @(or @attr)   双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就想普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。 =(or =attr)   父级作用域绑定:通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。 要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容。 &(or &attr)   因为书里面的描述比较简单,这里做一些补充说明: 从传递的内容来说 @ 传递过来的是一个字符串 = 传递过来的是一个字符串或对象 & 这里一定不要认为&传递的是一个函数,实际上父级作用域绑定传递的是一个函数的描述,通过该描述和父级作用域的函数建立联系然后执行。   简单的例子,一个有参函数的定义(无参函数比较容易理解这里就不做说明了): //指令HTML部分 <plug-in callback=”fun(value)”><plug-in> <script type=”text/javascript”> //对绑定的方法进行设计 app.run([‘$rootScope’,function($rootScope){ $rootScope.fun = function(value){ console.log(value); } }]); //指令的设计 app.directive(‘plugIn’,[function(){ return{ replace:true, scope:{callback:”&”}, template:'<div class=”demo”></div>’, restrict: “EA”, link:function($scope){ //执行绑定的方法 $scope.callback({value:1,data:2}); […]

今天跟小伙伴散布angular,我下了最新的项目seed给小伙伴们用,然后小伙伴们用原始的教程进入angularJs。 然后就悲剧了… 最新版本1.3.8不再支持函数的控制器匹配 function PhoneListCtrl($scope) { $scope.phones = [ {“name”: “Nexus S”, “snippet”: “Fast just got faster with Nexus S.”}, {“name”: “Motorola XOOM™ with Wi-Fi”, “snippet”: “The Next, Next Generation tablet.”}, {“name”: “MOTOROLA XOOM™”, “snippet”: “The Next, Next Generation tablet.”} ]; } 会报error:ng[area]…..这样的错误。 虽然这个方式实在各个读物和入门示例中广泛使用的方式,但因为该方式生成了全局的函数,这并不是推荐的,也不符合MVC思想,所以… 不过还是等我读了源码再说更深入,那么现在只能是以下面的方式引入控制器: angular.module(‘myApp’, []).controller(‘PhoneListCtrl’,[‘$scope’, function($scope){ }]);