AngularJS核心概念解析-优快云博客

<body ng-app="Myapp">
    <div ng-controller="firstcon">
        <h1>hello {{ del }}</h1>
    </div>
</body>

（本人最近几个月一直研究angularjs，对angluarjs有些个人理解，首先分享些angular基础，以及重点概要，希望对angular初学者有些帮助，后续会陆续的分享我对angular的一些个人和重点要素的理解和用法）

现在，闲暇之余，一点一点的把自己学到的分享给大家！！

1、模块

在angular中主要模块定义方式：Angular.module("myapp",[]);

myapp:第一个模块的名称

[]：用来依赖的模块

2、作用域

　　angular启动生成视图是，会将ng-app元素同$rootScope进行绑定，$rootScope是所有$scope的最根部（ng-app是绑定controller方法，$rootscope是模块中的全局变量），不同的模块有不同的$rootScope，相当于每个人都有唯一的ID类似，在绑定数据的时候，回想找到上级，就是$scope，如果上级没有的话，那么就找本体（$rootscope），

1 <sccript type="text/javascript">
2         angular.module("Myapp", []).run(function ($rootScope) {
3             $rootScope.name = "dd";
4         })
5         angular.module("Myapp1", []);
6 </script>

　　<div ng-app="Myapp1">
        <h1>hello {{ name }}</h1>
    </div>
    <div ng-app="Myapp">
        <h1>hello {{ name }}</h1>
    </div>

3、控制器

　　控制器在在我看来，就是增强angular中的视图。Angularjs中的控制器是一个function，用来像视图页面作用域中添加功能的，用来给视图作用域对象设置初始状态和自定义行为。

我们在页面中创建一个控制器，angular就会生成并传递新的$scope给这个控制器

var first= angular.module("Myapp", []).run(function ($rootScope) {
            $rootScope.name = "bbb";
        })
       first.controller("firstcon", function ($scope) {
           $scope.del = "ddd";
       });

<body ng-app="Myapp">
    <div ng-controller="firstcon">
        <h1>hello {{ del }}</h1>
    </div>
</body>

　　上诉是描述一些控制器在js中的，控制器其实还能嵌套在html中

var first= angular.module("Myapp", []).run(function ($rootScope) {
            $rootScope.name = "bbb";
        })
       first.controller("firstcon", function ($scope) {
           $scope.del = "ddd";
       });
       first.controller("scend", function ($scope) {
           $scope.dh = "aaa"
       });

<body ng-app="Myapp">
    <div ng-controller="firstcon">
        <div ng-controller="scend">
            <h1>hello {{ del }}</h1>
            <h1>hello {{ dh }}</h1>
        </div>
        
    </div>
</body>

4、表达式

　　表达式和evel（表达式）非常像，在angular中表达式是由angularjs来处理的。angularjs通过$scope这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。讲$scope注入到控制中，然后调用它可以实现手动解析表达式

<script type="text/javascript">
        var first = angular.module("Myapp", []);
       first.controller("firstcon", function ($scope,$parse) {
           $scope.$watch('d', function (newVal, oldVal, scope) {
               if (oldVal !== newVal) {
                   var parseFun = $parse(newVal);
                   $scope.parseValue=parseFun(scope)
               }
           });
       });
      
    </script>

<body ng-app="Myapp">
   <div ng-controller="firstcon">
       <input ng-model="d" type="text" placeholder="deded" />
       <h2>{{parseValue}}</h2>
   </div>
</body>

$watch详解：

$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子：

$scope.name = 'hello'; var watch = $scope.$watch('name',function(newValue,oldValue, scope){ console.log(newValue); console.log(oldValue); }); $timeout(function(){ $scope.name = "world"; },1000);

$watch性能问题

太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。

$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：

var watch = $scope.$watch('someModel.someProperty', callback);

//...

watch();

还有2个和$watch相关的函数：

$watchGroup(watchExpressions, listener);

$watchCollection(obj, listener);

插值字符串

要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。

$interpolate服务是一个可以接受三个参数的函数，其中第一个参数是必须的。