概念

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

指令directive

  • 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

指令的不同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

  • 服务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

路由 ui-router2 官方中文文档

懒加载 $ocLazyLoad

懒加载 $ocLazyLoad 官方文档

使用方法+参考资料

    //定义模板,并注入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

注意

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