首页 > 代码库 > Angularjs[1]

Angularjs[1]

2024-09-02 02:56:46   219人阅读

001-：

客户端模版：Angular中，模版和数据均会被发送到浏览器中，然后在客户端进行装配。

数据绑定（MVVM）：数据绑定可以自动将 model 和 view 之间数据同步。

依赖注入：

002-数据绑定：

搭建Angularjs开发环境  www.angularjs.org

<body ng-app>
<input type="text" ng-model="name" value="">
<!--{{angular的表达式}}-->
{{name}}
<input type="text" ng-model="name" value="">
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>

1.ng-app指令：告知 Angular 应当管理界面哪一块；

2.Angular 表达式与 js 表达式区别：

   - 属性求值：所有属性的求值是对于 scope 的，而 js 是对于 window 对象的;

   - 宽容：表达式求值，对于 undefined 和 null，Angular 是宽容的，但 js 会产生 NullPointerExceptions;

   - 没有流程控制语句：在 Angular 表达式里，不能做以下任何：条件分支，循环，抛出异常；

   - 过滤器（filters）：可将表达式结果传入过滤器链（filter chains）。

003-控制器：

<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            <input type="text" value="" ng-model="age">
            {{name}}
            {{age}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
var firstController = function ($scope) {
    //$scope 作用域
    //申明一个 model
    $scope.name = ‘Alrale‘;
    $scope.age = ‘20‘;
}

1.$scope：是指向 model 的 object，也是表达式的执行上下文；scope被放置于一个类似应用的DOM结构的层次结构中。

004-ngBind：

<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            <input type="text" value="" ng-model="age">
            <div ng-bind="name"></div>
            <div ng-bind="age"></div>
        </div>
    </div>
    <script>
        alert(‘!‘);
    </script>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
var firstController = function ($scope) {
    $scope.name = ‘Alrale‘;
    $scope.age = ‘20‘;
}

005-多个控制器

<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            <div ng-controller="secondController">
                <input type="text" value="" ng-model="name">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
var firstController = function ($scope) {
    $scope.name = ‘Alrale‘;
    $scope.age = ‘20‘;
}
var secondController = function ($scope) {
    
}

006-$scrope 中 $apply 方法：

<body>
    <div ng-app>
        <div ng-controller="firstController">
            {{date}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
var firstController = function ($scope) {
    $scope.date = new Date();

    // setInterval(function () {
    //     //这里虽然变化，但是没有触发 脏检查
    //     $scope.date = new Date();
    // },1000)

    setInterval(function () {
        $scope.$apply(function () {
            $scope.date = new Date();
        })
    },1000)
}

1.脏检查：将原对象复制一份快照，在某个时间，比较现在对象与快照的值，如果不一样就表明发生变化。

2.Angular 通过脏检查得知变量是否发上变化。

   Angular 策略：

   - 不会脏检查所有的对象，当对象被绑定到html中，这个对象添加微检查对象（wetcher）。

   - 不会脏检查所有的属性，同样当属性被绑定后，这个属性会被列为检查的属性。

Angular程序初始化时，会将绑定的对象的属性添加为监听对象（watcher），也就是说一个对象绑定了N个属性，就会添加N个 watcher。

3.手动触发脏检查：$apply 进入 angular context，然后通过$digest去触发脏检查，推荐给 $apply 参数，否则会检查该 $scope 里所有监听的属性。

4.不建议直接调用 $digest() 属性，而应使用 $apply()。

 

Angularjs[1]


联系
我们