高阶知识复习
1、自定义指令
- 类似 vue 和 react 自定义的一个 template（我们叫它自定义组件）
- 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
- 抽象一个自定义组件，在其他地方进行重用。
代码语言：javascript复制指令命名遵循驼峰命名法，使用时驼峰间用-分隔。自定义代码结构如下：
angular.module("app",[]).directive("directiveName",function(){
return{
//通过设置项来定义
restrict: "EACM",
template: "helloWorld",
replace: true,
//渲染成功后的回调
link: function(scope, element, attrs) {}
};
})
复制代码注）template:自定义标签模板,当其值长度过大时，可以用templateUrl代替，即把模板指向一个独立的HTML文。如果想保留模板内的标签，只需加上即可。
我们自定义了一个标签名为directiveName的元素，该元素显示为一段helloWorld文本。 元素表现为：
- 设置项restrict：EACM，每个字母表示一种使用自定义指令的方式。
restrict:E:标签使用
restrict:A:属性使用
restrict:C:类名使用
restrict:M,需同步设replace:true:注释使用
- 基础的自定义完整脚本
demo-ng-directive
var app = angular.module("myApp", []);
app.directive("mydirective", function() {
return {
restrict: "EACM",
replace: true,
template: "<p>helloWorld</p>",
link: function(scope, element, attrs) {}
};
});
- 使用场景
//渲染完成事件触发
span>
$scope.$on('ot_ngRepeatFinished', function(ngRepeatFinishedEvent) {});
ngApp.directive('onOtFinishRenderFilters', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
$timeout(function() {
scope.$emit('ot_ngRepeatFinished');
});
}
};
});
//重定义元素系统事件
"file" id="upload" custom-on-change="uploadFile">
ngApp.directive('customOnChange', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
var onChangeHandler = scope.$eval(attr.customOnChange);
element.bind('change', onChangeHandler);
}
};
});
复制代码2、自定义服务
服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。如常见的
http、
interval、$timeout等。自定义服务的目的在于定义一些公共方法，实现便捷开发及代码重用。自定义服务常用于在控制器中，除此之外，还能用在上篇幅内容中的自定义过滤器filter。下面是一个定义了一个包含相加和相减算法的自定义服务。
代码语言：javascript复制<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" ng-model="num1" />
<input type="number" ng-model="num2" />
<button ng-click="countFun();">计算button>
<br />
<p ng-model="jia">相加:{{jia}}p>
<p ng-model="jian">相减:{{jian}}p>
div>
<script>
var app = angular.module("myApp", []);
app.service("countNum", function() {
this.jia = function(a, b) {
return parseInt(a) parseInt(b);
}
this.jian = function(a, b) {
return parseInt(a) - parseInt(b);
}
});
app.controller("myCtrl", function($scope, countNum) {
$scope.num1 = 0;
$scope.num2 = 0;
$scope.jia = 0;
$scope.jian = 0;
$scope.countFun = function() {
$scope.jia = countNum.jia($scope.num1, $scope.num2);
$scope.jian = countNum.jian($scope.num1, $scope.num2);
}
});
script>
复制代码3、依赖注入
- 高阶依赖注入 Di 了解一下
http://blog.csdn.net/zeping891103/article/details/77446544?locationNum=9&fps=1
依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。简而言之，就是定义一个对外开放的服务service，服务service的实现算法由第三方决定。di主要有五个核心组件：
4、$http操作
- $http 的几种用法
- 注意看 api
