AngularJS 学习笔记 01：框架特性

傷城~ 2022-05-26 04:44 276阅读 0赞

*  简介
 *  特性
    
     *  1. 模块化
     *  2. 双向数据绑定
     *  3. 指令
     *  4. 依赖注入

# 简介 #

*  版本（1.x、2.x、3.x），由三个不同团队进行维护，三个版本之间并无关系，typescript 是 2.x 版本的语法糖
 *  以 1.x 版本为主
 *  适用于大型的项目开发、MV\*（mvc框架之母 / mvvm）
 *  特性：模块化、双向数据绑定、指令、依赖注入

# 特性 #

## 1. 模块化 ##

*  APP应用模块，是由若干个模块（module）组成的，每个模块实现一个功能，便于代码的复用

<!doctype html>
    <html ng-app='App'> 
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
        <div ng-controller='demoCtrl'>
            <ul>
                <li>name: {
       {info[0].name}} age: {
       {info[0].age}}</li>
            </ul>
        </div>
        <script src='angular.js'></script> 
    </body>
    </html>

*  AngularJS对外暴露了一个全局对象`angular`
 *  `angular.module()` 参数1：模块名称；参数2：此模块依赖的其他模块

// 调用 angular 对象的 module 方法创建模块
    var app = angular.module('App', [])
    
    // 用模块对象的方法去创建控制器
    app.controller('Demo', ['$scope', function(){ 
        // $scope为模型对象，将数据绑定到该对象
        $scope.info = [
            { name: 'logen', age: 270 }
        ];
    }])

## 2. 双向数据绑定 ##

![这里写图片描述][70]  
\- 数据模型（Module）和视图（View）之间的双向绑定  
\- 即 `view` 界面的操作能实时反映到数据 `module`，数据 `module` 的变更能实时展现到界面 `view`

## 3. 指令 ##

ng-app

*  所有 AngularJS 应用都必须要要一个根元素
 *  `ng-app` 指令用于指定根元素
 *  只允许有一个`ng-app`，若有多个，只有第一个会生效
 *  所有的 HTML 元素都支持该指令

// 
    var app = angular.module('App', [])
    
    app.controller('Demo', ['$scope', function(){ 
    
    }])

## 4. 依赖注入 ##

依赖注入简化了Angular解析模块/组件之间依赖的过程。  
通常一个组件要获得它的依赖，有三种方式：

1.  直接创建出依赖，如使用new操作符
2.  能够查找到依赖，如引用全局变量
3.  在需要的地方传入依赖

// 调用 angular 对象的 module 方法创建模块
    var app = angular.module("App", []);
    
    // 创建 value 对象 "defaultInput" 并传递数据
    app.value("item", 5);
    
    // 将 "item" 注入到控制器
    app.controller('demoCtrl', function($scope, CalcService, item) { 
       $scope.number = item;
       $scope.result = CalcService.square($scope.number);
    
       $scope.square = function() { 
          $scope.result = CalcService.square($scope.number);
       }
    });

*  注入式（推荐）

app.controller('demoCtrl', ['$scope', '$http', '$log', function($scope, $http, $log) { 
    
    }])

*  推断式

app.controller('demoCtrl', function($scope, $http, $log) { 
    
    })

> 参考引用  
> [AngularJS 依赖注入解析][AngularJS]  
> [AngularJS官方文档][AngularJS 1]

[70]: /images/20220526/22e1351337ba468cab2bc94b7f98581a.png
[AngularJS]: https://blog.csdn.net/jaytalent/article/details/50986402
[AngularJS 1]: http://www.angularjs.net.cn/tutorial/17.html