AngularJS学习.doc

### AngularJS基础知识与应用 #### 引入AngularJS AngularJS是一种开源的JavaScript框架，用于构建动态Web应用程序。为了在项目中使用AngularJS，我们首先需要将其脚本文件引入到HTML文档中。以下是一个示例： ```html <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> ``` 这里，`angular.min.js` 是AngularJS的核心库的压缩版本，它包含了执行所有AngularJS功能所需的全部代码。 #### AngularJS的基本结构 AngularJS应用由几个关键部分组成： 1. **视图(View)**: 通常指的是HTML文档，它是用户看到并与其交互的部分。 2. **模型(Model)**: 模型包含了视图中的数据。例如，在上面的例子中，`name` 就是一个模型变量，它被用来存储用户在文本框中输入的名字。 3. **控制器(Controller)**: 控制器是用于处理模型数据和业务逻辑的JavaScript函数。它可以读取模型数据，并且更新这些数据以响应用户的动作。例如，下面这段代码定义了一个名为 `myCtrl` 的控制器，它设置 `firstName` 和 `lastName` 的初始值。 ```javascript var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); ``` #### AngularJS表达式 AngularJS表达式类似于JavaScript表达式，但是它们被放置在双大括号 `{}` 中。这种表达式可以包含字母、操作符、变量等，但不支持条件判断、循环和异常处理。AngularJS表达式的一个重要特性是支持过滤器。 **示例:** ```html <div ng-app=""> <p>名字: <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> <h1>Hello <span ng-bind="name"></span></h1> </div> ``` 在这个例子中，`{{name}}` 和 `<span ng-bind="name"></span>` 都用于输出模型变量 `name` 的值。 - **{{ }}**: 双大括号表达式用于直接在HTML中显示模型的值。 - **ng-bind**: 此指令用于将模型绑定到HTML元素的 `innerHTML` 属性上。如果移除了 `ng-app` 指令，HTML将会直接显示 `ng-bind` 中的内容，而不是计算表达式的结果。 #### AngularJS指令 AngularJS通过自定义的HTML属性——指令来扩展HTML的功能。这些指令以 `ng-` 开头，用于向视图添加行为。 - **ng-app**: 这个指令定义了AngularJS应用程序的根元素，并在页面加载完成后自动初始化该应用程序。例如： ```html <div ng-app="myApp"> ``` 在这个例子中，`myApp` 是一个模块名称，表示AngularJS应用程序的模块。 - **ng-controller**: 定义控制器的作用域。例如： ```html <div ng-app="myApp" ng-controller="myCtrl"> ``` 这里 `myCtrl` 是一个控制器的名称，它会被注入到当前的作用域中。 - **ng-init**: 用于初始化AngularJS应用程序变量。例如： ```html <div ng-app="" ng-init="firstName='John'; lastName='Doe'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div> ``` #### 初始化对象和数组 AngularJS还支持初始化复杂的对象和数组结构。 - **初始化AngularJS对象**: ```html <div ng-app="" ng-init="person={firstName:'John', lastName:'Doe'}"> <p>姓为 {{person.lastName}}</p> </div> ``` - **初始化AngularJS数组**: ```html <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{points[2]}}</p> </div> ``` #### AngularJS模块(Module) AngularJS模块是应用程序的基础组成部分，它定义了应用程序的配置和依赖关系。模块允许开发者组织他们的代码，并且可以通过依赖注入机制来重用代码。 **示例:** ```javascript var app = angular.module('myApp', []); ``` 这里的 `myApp` 是模块的名称，后面的数组是用来声明模块依赖的。 #### AngularJS控制器(Controller) 控制器用于控制AngularJS应用程序的行为，它负责管理模型数据和处理用户事件。 **示例:** ```javascript app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); ``` 在这个例子中，`myCtrl` 控制器设置了 `$scope` 中的 `firstName` 和 `lastName` 的初始值。 AngularJS提供了强大的工具来构建动态的Web应用。通过理解其基本概念如视图、模型、控制器以及指令和表达式的使用，开发者能够有效地开发出具有高度互动性的Web应用。