9-angular 要点温习-2 高阶知识-CSDN博客

高阶知识复习

1、自定义指令

类似 vue 和 react 自定义的一个 template（我们叫它自定义组件）

使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
抽象一个自定义组件，在其他地方进行重用。

指令命名遵循驼峰命名法，使用时驼峰间用-分隔。自定义代码结构如下：


angular.module("app",[]).directive("directiveName",function(){ 
	return{
		//通过设置项来定义 
		restrict: "EACM",
		template: "<p>helloWorld</p>",
		replace: true,
		//渲染成功后的回调
		link: function(scope, element, attrs) {}
	};
})
复制代码

注）template:自定义标签模板,当其值长度过大时，可以用templateUrl代替，即把模板指向一个独立的HTML文。如果想保留模板内的标签，只需加上即可。

我们自定义了一个标签名为directiveName的元素，该元素显示为一段helloWorld文本。元素表现为：

设置项restrict：EACM，每个字母表示一种使用自定义指令的方式。

restrict:E:标签使用   
restrict:A:属性使用  
restrict:C:类名使用  
restrict:M,需同步设replace:true:注释使用  
复制代码

基础的自定义完整脚本


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>demo-ng-directive</title>
		<script type="text/javascript" src="../js/libs/angular/angular.js"></script>
	</head>
	
	<body ng-app="myApp">
		<input type="text" ng-model="inData" ng-init="inData=0" />
		<mydirective></mydirective>
		<div mydirective></div>
		<div class="mydirective"></div>
		<!-- directive: mydirective -->
		<script>
			var app = angular.module("myApp", []);
			app.directive("mydirective", function() {
				return {
					restrict: "EACM",
					replace: true,
					template: "<p>helloWorld</p>",
					link: function(scope, element, attrs) {}
				};
			});
		</script>
	</body>

</html>
复制代码

使用场景

//渲染完成事件触发  
<span on-ot-finish-render-filters></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');  
            });  
        }  
    };  
});  
//重定义元素系统事件  
<input type="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 多个服务。如常见的 scope、 http、 location、 interval、$timeout等。自定义服务的目的在于定义一些公共方法，实现便捷开发及代码重用。自定义服务常用于在控制器中，除此之外，还能用在上篇幅内容中的自定义过滤器filter。下面是一个定义了一个包含相加和相减算法的自定义服务。

<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主要有五个核心组件：