angular

AngularJs MVC

1
2
3
Model:数据模型层
View:视图层,负责展示
Controller:控制器，控制逻辑

1.模块化

1.1 创建模块

1
2
3
4
5
一切从模块开始
angular.module(name, [requires], [configFn]);
name：字符串类型，代表模块的名称；
requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可
configFn：用来对该模块进行一些配置。

2.控制器

2.1 创建控制器

1
2
3
通过模块创建控制器
angular.module('appModule').controller('appCtrl',function($scope){});
当前作用域$scope,$scope就是viewModel

2.2 控制器特点

1
2
3
4
controller和DOM平行
控制器可以声明变量和方法
控制器可以嵌套
子控制器可以继承父控制器

2.3 控制器的合理使用

1
2
3
4
不要复用controller
不要在controller中操作DOM
不要再controller里格式化数据
控制器之间交互是通过事件进行的

3.$scope和$rootScope

3.1 注入$scope和$rootScope

1
2
angular.module('appModule').controller('appCtrl',function($scope,$rootScope){});
一般使用$rootScope时候都是多视图的项目中，为了达到一个元素多处使用的目的

3.2 初始化方法

1
2
通常情况下我们会将$rootScope上的代码提取声明
app.run(function($rootScope){});

3.3 防止代码压缩

1
2
3
4
app.controller('appCtrl',['$scope',function ($s) {
    $s.name = 'zfpx';
}]);
为了防止通过压缩工具压缩代码后$scope等名称改变报错，一般用数组来存储变量

4.$watch和$apply

4.1 $watch监听模型上的值

1
2
3
4
页面代码
<div ng-controller="appCtrl">
+    <input type="text" ng-model="name">
</div>
  • 4.1.1 监听写法1:
1
2
3
4
5
app.controller('appCtrl',['$scope',function ($s) {
+        $s.$watch('name', function (newVal,oldVal) {
+            console.log(newVal,oldVal);
+        })
}]);
  • 4.1.2 监听写法2:
    1
    2
    3
    4
    5
    6
    7
    app.controller('appCtrl',['$scope',function ($s) {
           $s.$watch(function () {
               return $s.name;
           }, function (newVal,oldVal) {
               console.log(newVal,oldVal);
           });
    }]);

4.2 $watch监听方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
页面代码
<div ng-controller="appCtrl">
    <input type="text" ng-model="val1">
    +
    <input type="text" ng-model="val2">
    {{total()}}
</div>
控制器
app.controller('appCtrl',['$scope',function ($s) {
        $s.total = function () {
            return $s.val1+$s.val2;
        };
        $s.$watch($s.total, function (newVal,oldVal) {
            console.log(newVal,oldVal);
        })
}]);

4.3 $apply刷新视图

  • 4.3.1 原生的方法不会刷新视图

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    页面代码
    <div ng-controller="appCtrl">
        {{name}}
    </div>
    控制器
    app.controller('appCtrl',['$scope',function ($s) {
            $s.name = 1;
            setInterval(function () {
                $s.name++
            },1000)
    }]);
     setInterval并不是angular中的方法，不能使用，使用了$apply之后，强制刷新，就可以使用，也可以在agular中注入$interval的服务

  • 4.3.2 通知视图刷新

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    通知方式1:导入服务
    app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
        $s.name = 1;
        setInterval(function () {
            $s.name++;
            $s.$apply();
        },1000);
    }]);
    通知方式2:强制刷新
    app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
        $s.name = 1;
        setInterval(function () {
            $s.$apply(function(){
                $s.name++;
            });
        },1000);
    }]);

4.4 自带的指令会刷新视图

  • 4.4.1 $timeout

    1
    2
    3
    4
    5
    6
    app.controller('appCtrl',['$scope','$timeout',function ($s,$timeout) {
        $s.name = 1;
        $timeout(function () {
            $s.name++;
        },1000);
    }]);

  • 4.4.2 $interval

1
2
3
4
5
6
app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
    $s.name = 1;
    $interval(function () {
        $s.name++;
    },1000);
}]);
  • 4.4.3 取消定时器
    1
    2
    3
    4
    5
    6
    7
    8
    app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
        $s.name = 1;
        var timer = $interval(function () {
            $s.name++;
            $interval.cancel(timer);
        },1000);
    }]);
    使用cancle的方法，已经是angular自带的指令就不要在调用$apply去通知了

5.ng-href

1
2
3
4
5
6
7
8
表达式生效前不要加载该资源,防止空链接
<a ng-href="{{ myHref }}">baidu</a>
var app = angular.module('appModule',[]);
app.controller('appCtrl',function ($scope,$timeout) {
  $timeout(function () {
      $scope.myHref = 'http://www.baidu.com';
  },20000)
})

6.ng-src

1
2
3
4
5
6
7
8
表达式生效前不引用该资源,防止出现404
<img ng-src="{{imgSrc}}"/>
var app = angular.module('appModule',[]);
app.controller('appCtrl',function ($scope,$timeout) {
    $timeout(function() {
        $scope.imgSrc = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png';
    }, 1000);
});

服务

1
服务是公用的方法，把控制器中相同的部分抽取出来封装成一个服务，什么时候用的时候就是把他注入到控制器中使用
  • 注入服务
    1
    2
    myModule.provider('自定义服务的名字',function(){this.$get=function(){return }
    注：provider:定义服务