AngularJS 学习笔记 01：框架特性

最新推荐文章于 2025-04-04 09:35:53 发布

原创最新推荐文章于 2025-04-04 09:35:53 发布 · 227 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Frame for data 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了AngularJS的核心特性，包括模块化、双向数据绑定、指令和依赖注入等，并通过实例展示了这些特性的具体应用。

简介
特性

简介

版本（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> <!-- 引入 angular -->
</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. 双向数据绑定

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

<div ng-app="App" ng-controller="demoCtrl">

    <!-- input 值的改变会实时同步到模型数据 $scope.name -->
    <input ng-model="name">
    <h1>你输入了: {{name}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('demoCtrl', function($scope) {
    // 数据模型中的值发生改变也会实时同步到页面视图中去
    $scope.name = "hannah";
});
</script>

3. 指令

ng-app

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

<html ng-app = 'App'> <!-- 指定根元素 -->

    <body ng-controller = "Demo"> <!-- 指定控制器 -->

    </body>

</html>

// 
var app = angular.module('App', [])

app.controller('Demo', ['$scope', function(){

}])

4. 依赖注入

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

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

// 调用 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官方文档