概念

• module 相当于容器
• directive 指令负责对html元素进行绑定，同时进行相互作用
• service 公有代码逻辑
• controller 私有代码逻辑
• filter 过滤器

指令directive (opens new window)

• ng-app 标记angularjs的作用域
• ng-model 绑定输入框的值到 scope 变量中：
• ng-show 表达式为 true 时显示
• ng-hide 表达式为 true 时隐藏
• ng-disabled='switch' switch===false时候元素不可用，可以和type="checkbox" ng-model='switch'一起使用
• ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容。 与{{}}类似，解决了网速慢显示了的问题，一般用于首页代替{{}}
• ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
• ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。
  • ng-switch-when
• ng-clack 等数据加载完成再显示数据模板，避免数据加载未完成出现现象

controller

• $script 一个对象
• 特性
  • 作用域，父子作用域对象按引用传递，变量（属性）按值传递。
    • $scope.data={}; $scope.data.x=hello //引用传递
    • $scope.data=123; //按值传递
  • $scopr.x其中找不到会向上父级controller找

自定义指令

• restrict 限制使用,默认值是：AE
  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用
  • 坑:指令名字含有大写，使用的标签就必须加-符号，如指令名字“headerDemo” 标签名字就要header-demo
• 指令scope:{}绑定策略
  • @ 把当前属性作为字符串传递。你还可以绑定来自外层scope的值。在属性值中插入{{}}即可
    • scope:{属性名字:"@"} === $scope.属性名字 ===
    • 与link()中的scope.test=iAttrs.test一样效果
  • = 与父scope中的属性进行双向绑定
  • & 传递一个来自父scope的函数，稍后调用
• link(scope,element,attrs,ctrl) 四个参数分别是

  • scope 与指令中的controller中的$scope相连

    • scope.test()可以执行controller中的test()函数,也可以这样写scope.apply('test()')

  • element 标签对象可以调用jq常用语法如bind(),addClass(),removeClass()对元素操作

  • attrs 包含了指令所在元素的属性的标准化的参数对象 如指令abc中有属性TEST

    • <abc TEST></abc> 就是attrs.test
    • <abc TEST='btn()'></abc> 可以通过使用$apply()来执行属性中的函数$apply(attrs.test.btn)

  • ctrl:指令中可以使用controller来做数据交互 如：

link: function($scope, iElm, iAttrs, controller) {
    controller('myCtrl', ['$scope', function($scope){

    }])
}

compile-link (opens new window)

指令的不同controller中的不同函数之间的复用
<!-- html -->
<div ng-controller="myCtrl">
	<abc-test howtoLoad='btn()'>btn</abc-test>
</div>
<div ng-controller="myCtrl2">
	<abc-test howtoLoad='btn2()'>btn</abc-test>
</div>

<!-- js -->
		angular.module('app',[])
		.controller('myCtrl', ['$scope', function($scope){
			$scope.btn=function(){
				console.log("第一个指令 btn()")
			}
		}])
		.controller('myCtrl2', ['$scope', function($scope){
			$scope.btn2=function(){
				console.log("第二个指令 btn2()")
			}
		}])

		.directive('abcTest', [function(){
			return {
				restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
				template: '<button> <div ng-transclude></div> </button>',
				replace: true,
				transclude: true,
				link: function(scope, iElm, iAttrs, controller) {
					iElm.on('click',function(){
						// $scope.btn()
						// $scope.$apply('btn()')
						scope.$apply(iAttrs.howtoload) //注意坑：这里指令属性是用驼峰法则写的HeadBar在这里都要写成小学
					})
				}
			};
		}]);
	

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
注意 ：使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

第三方指令库 angular-ui (opens new window)

• 服务Service

  • $location
  • $http 向服务器发送请求
  • $timeout 对应了 JS window.setTimeout 函数。
    • 取消定时器 $timeout.cancel(t)
  • $interval 服务对应了 JS window.setInterval 函数。
    • 取消定时器 $interval.cancel(t)

自定义服务

app.service('hexafy', function() {
   this.myFunc = function (x) {
       return x.toString(16);
   }
});

过滤器 filter |

• currency 格式化字符串为大写。
• lowercase 格式化字符串为小写。
• currency 过滤器将数字格式化为货币格式：
• orderBy 排序
  • orderBy:'id':true 根id降序排
  • orderBy:'id' 根据id升序排
• filter 过滤输入，也可以自定义过滤
• date 格式化成时间，可以自定义一下格式
  • date:"yyyy-MM-dd HH:mm:ss"
• number:2 保留两位小数
• limitTo :6 从前面开始截取6位

自定义过滤器 filter |

app.filter("myFilter",function(){
			return function(input){
				return input+"#"
			}
		})

依赖注入（只执行一起，实现多数据共享）

factory——简单

app.factory(xx, function (){
	return {a:"xxx"};
});

provider——强大：可配置的

app.provider(xx, function (){
	this.$get=function (){
		return {a:"xxx"};
	};
});

service——类似于构造函数

app.service(xx, function (){
	this....
});

修改依赖 *会修改原始的依赖，原来的依赖就变了 (用不了可能废弃了)

app.decorator('依赖的名字', function ($delegate){
	$delegate	依赖项的东西
	return 修改后的依赖;
});

变量||常量

• constant——常量(不可装饰，不能改)

• value——变量（可以改）

###消息机制(事件)：

• $scope.$emit('名字', 数据); 触发：自己+父级，向上发送
• $scope.$broadcast('名字', 数据); 触发：自己+子级，向下放松
• $scope.$on('名字', 数据); 接收

$HTTP 通用方法实例

var app = angular.module('myApp', []);
    
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  
});

其他函数

• $scope.$apply() 强制刷新（一般不用）
  • 当AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery UI空间等）调用了AngularJS函数之后，必须调用$apply。在这种情况下，你需要命令AngularJS刷新自已（模型、视图等），$apply就是用来做这件事情的。
• $scope.$watch() 监控
• $scope.$watch(谁，做什么，是否监控他的内容和属性变化)

路由 ui-router (opens new window)

路由 ui-router2 官方中文文档 (opens new window)

懒加载 $ocLazyLoad (opens new window)

懒加载 $ocLazyLoad 官方文档 (opens new window)

使用方法+参考资料 (opens new window)

    //定义模板，并注入ui-router
    var app = angular.module('myApp', ['ui.router']);   
    //对服务进行参数初始化，这里配stateProvider服务的视图控制
    app.config(["$stateProvider","$urlRouterProvider",  function ($stateProvider,$urlRouterProvider) {      
        $stateProvider     
        .state("home", {
            url: '/',   //注意url这里一定要以/开头不然不显示
            template:'<div>模板内容......</div>'
        })     
        $urlRouterProvider.otherwise('main'); //默认路径为main
    }]);  

ui-sref和ui-view指令都是ui-router自带的，有三种方法来激活状态：
1.调用$state.go()方法，这是一个高级的便利方法。
2.点击包含ui-sref指令的链接。
3.导航到与状态相关联的 url。

模板

template: '<h1>My Contacts</h1>'
templateUrl: 'contacts.html'
templateUrl: function (stateParams){
    return '/partials/contacts.' + stateParams.filterBy + '.html';
} //templateUrl的值可以通过函数放回

ui-grid (opens new window)

注意

• 带ng开头的指令“”里面都可以写表达式，如ng-show="0>1"
• 不带ng开头的指令也可以用{{}}里面写表达式，如class=""