angular学习笔记04 理论加实践

scope: 布尔型或对象(默认为false) ,为true时继承父作用域并创建一个新的作用域
隔离作用域
具有隔离作用域的指令最主要的使用场景是创建可复用的组件, 组件可以在未知上下文中使
用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域。
创建具有隔离作用域的指令需要将 scope 属性设置为一个空对象 {} 。如果这样做了,指令的
模板就无法访问外部作用域了:

App.directive(‘myDirective‘, function() {
    return {
    restrict: ‘A‘,
    scope: {},
    priority: 100,
    template: ‘<div>Inside myDirective {{ myProperty }}</div>‘
    };
});

绑定策略
为了让新的指令作用域可以访问当前本地作用域中的变量,需要使用下面三种别名中的一种。
本地作用域属性:使用 @ 符号将本地作用域同DOM属性的值进行绑定。 @ (or @attr)

双向绑定:= (or =attr) 通过 = 可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。
就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。

父级作用域绑定 通过 & 符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这
个值进行设置时会生成一个指向父级作用域的包装函数。
要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值
是要传递给参数的内容。
& (or &attr)

transclude 是一个可选的参数。如果设置了,其值必须为 true ,它的默认值是 false 。
只有当你希望创建一个可以包含任意内容的指令时, 才使用 transclude: true 。

controller 参数可以是一个字符串或一个函数。 当设置为字符串时, 会以字符串的值为名字,
来查找注册在应用中的控制器的构造函数:

.directive(‘myDirective‘, function() {
restrict: ‘A‘, // 始终需要
controller: ‘SomeController‘
})
// 应用中其他的地方,可以是同一个文件或被index.html包含的另一个文件
angular.module(‘myApp‘)
.controller(‘SomeController‘, function($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
});
可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器:
angular.module(‘myApp‘,[])
.directive(‘myDirective‘, function() {
restrict: ‘A‘,
controller:
function($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
}
});

1. $scope
与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。例如,下面的元素:
<div id="aDiv"class="box"></div>
具有如下的属性对象:
{
id: "aDiv",
class: "box"
}
4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。
transclude 链接函数是实际被执行用来克隆元素和操作DOM的函数。

//例如,我们想要通过指令来添加一个超链接标签。可以在控制器内的 //$transclude 函数中实
//现,如下所示:
angular.module(‘myApp‘)
.directive(‘link‘, function() {
return {
restrict: ‘EA‘,
transclude: true,
controller:
function($scope, $element, $transclude, $log) {
$transclude(function(clone) {
var a = angular.element(‘<a>‘);
a.attr(‘href‘, clone.text());
a.text(clone.text());
$log.info("Created new a tag in link directive");
$element.append(a);
});
}
};
});

controllerAs 参数用来设置控制器的别名, 可以以此为名来发布控制器, 并且作用域可以访
问 controllerAs 。这样就可以在视图中引用控制器,甚至无需注入 $scope 。

require 参数可以被设置为字符串或数组, 字符串代表另外一个指令的名字。 require 会将控
制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。

require 参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为:
?
如果在当前指令中没有找到所需要的控制器,会将 null 作为传给 link 函数的第四个参数。
^
如果添加了 ^ 前缀,指令会在上游的指令链中查找 require 参数所指定的控制器。
?^
将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。
没有前缀
如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或
具有指定名字的指令)就抛出一个错误。

//路由
我们可以使用AngularJS提供的 when 和 otherwise 两个方法来定义应用的路由。

$http 服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的
配置内容。这个函数返回一个promise对象,具有 success 和 error 两个方法。

$http({
method: ‘GET‘,
url: ‘/api/users.json‘
}).success(function(data,status,headers,config) {
// 当相应准备就绪时调用
}).error(function(data,status,headers,config) {
// 当响应以错误状态返回时调用
});

由于 $http 方法返回一个promise对象,我们可以在响应返回时用 then 方法来处理回调。如果
使用 then 方法,会得到一个特殊的参数,它代表了相应对象的成功或失败信息,还可以接受两个
可选的函数作为参数。或者可以使用 success 和 error 回调代替。

promise.then(function(resp){
// resp是一个响应对象
}, function(resp) {
// 带有错误信息的resp
});
// 或者使用success/error方法
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});
//angularjs跨域问题
//1:使用jsonp
$http
.jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
// 数据
});
//2:使用cors
angular.module(‘myApp‘, [])
.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers
.common[‘X-Requested-With‘];
});
现在可以发送CORS请求了。
$http
.get("https://api.github.com")
.success(function(data) {
// 数据
});
//AngularJS中的非简单请求与普通请求看起来没有什么区别:
$http
.delete("https://api.github.com/api/users/1")
.success(function(data) {
// 数据
});

//得到json数据
$http.get(‘/v1/messages.json‘)
.success(function(data, status) {
$scope.first_msg = data[0].msg;
$scope.first_state = data[0].state;
});

//通过令牌授权来实现客户端身份验证,服务器需要做的是给客户端应用提供授权令牌。
令牌本身是一个由服务器端生成的随机字符串, 由数字和字母组成, 它与特定的用户会话相关联。
uuid 库是用来生成令牌的好选择。

时间: 2024-10-24 10:46:15

angular学习笔记04 理论加实践的相关文章

angular学习笔记03 理论加实践

novalidate 属性是在 HTML5 中新增的.禁用了使用浏览器的默认验证. //augular.js自定义指令 .directive('runoobDirective',function(){ return { template:'<span>这个是自定义指令!</span>' }; }) //angular.js的包含,是另一个html文件,也可以是<script>便签</script> <div ng-include="'myUs

Android自定义View学习笔记04

Android自定义View学习笔记04 好长时间没有写相关的博客了,前几周在帮学姐做毕设,所以博客方面有些耽误.过程中写了一个类似wp的磁贴的view,想再写个配套的layout,所以昨天看了一下自定义viewGroup的相关知识-晚上睡觉想了一下可行性不是很高-代码量还不如直接自己在xml上写来得快,速度上也是个问题.今天看了一下张鸿洋老师的Android 自定义View (三) 圆环交替 等待效果这篇博文,再加上前一段时间看到的一幅图,结合之前写的一个圆形imageView的实现博文And

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="

angular学习笔记(三十一)-$location(2)

之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用 首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.

angular学习笔记(二十五)-$http(3)-转换请求和响应格式

本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transformRequest: function(data){ //对前台发送的data进行处理 return data } }) 这个在测试的时候遇到了很大的问题.只要经过transformRequest函数处理,哪怕是不做任何处理,node后台都会报错,需要尝试使用php 2. transformResp

angular学习笔记(十七)-路由和切换视图

本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后点击邮件主题,可以查看该邮件的详细内容: 点击返回列表,再回到列表页 一. 创建index页面: <!DOCTYPE html> <html> <head> <title>14.1路由和视图切换</title> <meta charset=&q

thinkphp学习笔记9—自动加载

1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\Util\Auth类: namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/Org/Util/Auth.class.php 这样我们就可以直接实例化了, new \Org\Util\Auth(); 实例化之后系统会自动加载 ThinkPHP/Library/Org/Util/Auth.

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>