美文网首页
angular 的简单使用

angular 的简单使用

作者: 宏_4491 | 来源:发表于2020-07-18 11:30 被阅读0次

    angular 的特点:
    1 最大程度上减少DOM操作。
    2 让JavaScript 中专注业务逻辑的代码。
    3 通过简单的指令结合页面逻辑和数据结构。
    4 通过自定义指令实现组件化编程。
    5 代码结构更加合理
    6 维护成本更低。

    代码如图

    <div ng-app="myApp" ng-controller="myCtrl">
    
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
    </div>
    <script>
    <br>
    名: {{::firstName }}
    </div>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
    
    • ng-app : angular 应用程序管理的边界。

    • ng-controller="myCtrl" : 属性是一个 AngularJS 指令。用于定义一个控制器。myCtrl 函数是一个 JavaScript 函数。

    • scope : AngularJS 使用scope 对象来调用控制器。
      在 AngularJS 中, scope 是一个应用对象(属于应用变量和函数)。 控制器的scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。控制器在作用域中创建了两个属性 (firstName 和 lastName)。

    • ng-model : 双向数据绑定的指令。

    • {{firstName + " " + lastName}} 是表达式 ,也是数据的双向绑定。

    • {{::firstName }} 加了双冒号就是单向的数据绑定。

    CDN 内容分发网络

    • 特点:节约网络带宽,提高访问速度。

    mvc 的理解

    mvc 的理解

    相关文章

      网友评论

          本文标题:angular 的简单使用

          本文链接:https://www.haomeiwen.com/subject/gwqjhktx.html