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 库是用来生成令牌的好选择。