初识AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
     <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

AngularJS 表达式与 JavaScript 表达式异同点：
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

2.1 AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

3. AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据(通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。)。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-controller 指令定义了应用程序控制器。

ng-repeat 指令会重复一个 HTML 元素。

完整的指令内容可以参阅 AngularJS 参考手册。

1 <div ng-app="" ng-init="firstName=‘John‘">
2 
3      <p>在输入框中尝试输入：</p>
4      <p>姓名：<input type="text" ng-model="firstName"></p>
5      <p>你输入的为： {{ firstName }}</p>
6 
7 </div>

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

注:一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

4. AngularJS scope作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

 1 <div ng-app="myApp" ng-controller="myCtrl">
 2 
 3 <h1>{{carname}}</h1>
 4 
 5 </div>
 6 
 7 <script>
 8 var app = angular.module(‘myApp‘, []);
 9 
10 app.controller(‘myCtrl‘, function($scope) {
11     $scope.carname = "Volvo";
12 });
13 </script>

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

4.1 根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

 1 <div ng-app="myApp" ng-controller="myCtrl">
 2 
 3 <h1>{{lastname}} 家族成员:</h1>
 4 
 5 <ul>
 6     <li ng-repeat="x in names">{{x}} {{lastname}}</li>
 7 </ul>
 8 
 9 </div>
10 
11 <script>
12 var app = angular.module(‘myApp‘, []);
13 
14 app.controller(‘myCtrl‘, function($scope, $rootScope) {
15     $scope.names = ["Emil", "Tobias", "Linus"];
16     $rootScope.lastname = "Refsnes";
17 });
18 </script>

5. angularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

 1 <div ng-app="myApp" ng-controller="personCtrl">
 2 
 3 名: <input type="text" ng-model="firstName"><br>
 4 姓: <input type="text" ng-model="lastName"><br>
 5 <br>
 6 姓名: {{firstName + " " + lastName}}
 7 <br>
 8 姓名: {{fullName()}}
 9 
10 </div>
11 
12 <script>
13 var app = angular.module(‘myApp‘, []);
14 app.controller(‘personCtrl‘, function($scope) {
15     $scope.firstName = "John";
16     $scope.lastName = "Doe";
17     $scope.fullName = function() {
18         return $scope.firstName + " " + $scope.lastName;
19     }
20 });
21 </script>

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字

angular.module 函数用来创建一个模块

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

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

6. AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

例如：

$location 服务，它可以返回当前页面的 URL 地址。

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

$timeout 服务对应了 JS window.setTimeout 函数。

$interval 服务对应了 JS window.setInterval 函数。

 1 var app = angular.module(‘myApp‘, []);
 2 
 3 //$location用法示例
 4 app.controller(‘locationCtrl‘, function($scope, $location) {
 5     $scope.myUrl = $location.absUrl();
 6     
 7 //$http用法示例    
 8 app.controller(‘httpCtrl‘, function($scope, $http) {
 9     $http.get("welcome.htm").then(function (response) {
10         $scope.myWelcome = response.data;
11     });
12     
13 //$timeout用法示例    
14 app.controller(‘timeoutCtrl‘, function($scope, $timeout) {
15 $scope.myHeader = "Hello World!";
16 $timeout(function () {
17     $scope.myHeader = "How are you today?";
18 }, 2000);
19 
20 //$interval用法示例
21 app.controller(‘intervalCtrl‘, function($scope, $interval) {
22     $scope.theTime = new Date().toLocaleTimeString();
23     $interval(function () {
24         $scope.theTime = new Date().toLocaleTimeString();
25     }, 1000);
26 });

7. angularJS 事件

AngularJS 支持以下事件:

ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change

8. angularJS API函数

转换
API	描述
angular.lowercase()	将字符串转换为小写
angular.uppercase()	将字符串转换为大写
angular.copy()	数组或对象深度拷贝
angular.forEach()	对象或数组的迭代函数

比较
angular.isArray()	如果引用的是数组返回 true
angular.isDate()	如果引用的是日期返回 true
angular.isDefined()	如果引用的已定义返回 true
angular.isElement()	如果引用的是 DOM 元素返回 true
angular.isFunction()	如果引用的是函数返回 true
angular.isNumber()	如果引用的是数字返回 true
angular.isObject()	如果引用的是对象返回 true
angular.isString()	如果引用的是字符串返回 true
angular.isUndefined()	如果引用的未定义返回 true
angular.equals()	如果两个对象相等返回 true

**JSON**
angular.fromJson()	反序列化 JSON 字符串
angular.toJson()	序列化 JSON 字符串

基础
angular.bootstrap()	手动启动 AngularJS
angular.element()	包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module()	创建，注册或检索 AngularJS 模块

9. AngularJS 依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

一句话 --- 没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value
factory
service
provider
constant

9.1 value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

 1 // 定义一个模块
 2 var mainApp = angular.module("mainApp", []);
 3 
 4 // 创建 value 对象 "defaultInput" 并传递数据
 5 mainApp.value("defaultInput", 5);
 6 ...
 7 
 8 // 将 "defaultInput" 注入到控制器
 9 mainApp.controller(‘CalcController‘, function($scope, CalcService, defaultInput) {
10    $scope.number = defaultInput;
11    $scope.result = CalcService.square($scope.number);
12    
13    $scope.square = function() {
14       $scope.result = CalcService.square($scope.number);
15    }
16 });

9.2 factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

通常我们使用 factory 函数来计算或返回值。

 1 // 定义一个模块
 2 var mainApp = angular.module("mainApp", []);
 3 
 4 // 创建 factory "MathService" 用于两数的乘积 
 5 mainApp.factory(‘MathService‘, function() {
 6    var factory = {};
 7    
 8    factory.multiply = function(a, b) {
 9       return a * b
10    }
11    return factory;
12 }); 
13 
14 // 在 service 中注入 factory "MathService"
15 mainApp.service(‘CalcService‘, function(MathService){
16    this.square = function(a) {
17       return MathService.multiply(a,a);
18    }
19 });

9.3 provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

 1 // 定义一个模块
 2 var mainApp = angular.module("mainApp", []);
 3 ...
 4 
 5 // 使用 provider 创建 service 定义一个方法用于计算两数乘积
 6 mainApp.config(function($provide) {
 7    $provide.provider(‘MathService‘, function() {
 8       this.$get = function() {
 9          var factory = {};  
10          
11          factory.multiply = function(a, b) {
12             return a * b; 
13          }
14          return factory;
15       };
16    });
17 });

9.4 constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

1 mainApp.constant("configParam", "constant value");

以下实例提供了以上几个依赖注入机制的演示

 1 <html>
 2    
 3    <head>
 4       <meta charset="utf-8">
 5       <title>AngularJS  依赖注入</title>
 6    </head>
 7    
 8    <body>
 9       <h2>AngularJS 简单应用</h2>
10       
11       <div ng-app = "mainApp" ng-controller = "CalcController">
12          <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
13          <button ng-click = "square()">X<sup>2</sup></button>
14          <p>结果: {{result}}</p>
15       </div>
16       
17       <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
18       
19       <script>
20          var mainApp = angular.module("mainApp", []);
21          
22          mainApp.config(function($provide) {
23             $provide.provider(‘MathService‘, function() {
24                this.$get = function() {
25                   var factory = {};
26                   
27                   factory.multiply = function(a, b) {
28                      return a * b;
29                   }
30                   return factory;
31                };
32             });
33          });
34             
35          mainApp.value("defaultInput", 5);
36          
37          mainApp.factory(‘MathService‘, function() {
38             var factory = {};
39             
40             factory.multiply = function(a, b) {
41                return a * b;
42             }
43             return factory;
44          });
45          
46          mainApp.service(‘CalcService‘, function(MathService){
47             this.square = function(a) {
48                return MathService.multiply(a,a);
49             }
50          });
51          
52          mainApp.controller(‘CalcController‘, function($scope, CalcService, defaultInput) {
53             $scope.number = defaultInput;
54             $scope.result = CalcService.square($scope.number);
55 
56             $scope.square = function() {
57                $scope.result = CalcService.square($scope.number);
58             }
59          });
60             
61       </script>
62       
63    </body>
64 </html>

10. AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://baidu.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://baidu.com/#/first
http://baidu.com/#/second
http://baidu.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://baidu.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

 1 <body ng-app=‘routingDemoApp‘>
 2      
 3         <h2>AngularJS 路由应用</h2>
 4         <ul>
 5             <li><a href="#/">首页</a></li>
 6             <li><a href="#/computers">电脑</a></li>
 7             <li><a href="#/printers">打印机</a></li>
 8             <li><a href="#/blabla">其他</a></li>
 9         </ul>
10          
11         <div ng-view></div>
12         <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
13         <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
14         <script>
15             angular.module(‘routingDemoApp‘,[‘ngRoute‘])
16             .config([‘$routeProvider‘, function($routeProvider){
17                 $routeProvider
18                 .when(‘/‘,{template:‘这是首页页面‘})
19                 .when(‘/computers‘,{template:‘这是电脑分类页面‘})
20                 .when(‘/printers‘,{template:‘这是打印机页面‘})
21                 .otherwise({redirectTo:‘/‘});
22             }]);
23         </script>
24      
25      
26     </body>

实例解析：

1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
```
1 angular.module(‘routingDemoApp‘,[‘ngRoute‘])
```
3、使用 ngView 指令。
```
1 <div ng-view></div>
```
该 div 内的 HTML 内容会根据路由的变化而变化。

4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

1 module.config([‘$routeProvider‘, function($routeProvider){
2     $routeProvider
3         .when(‘/‘,{template:‘这是首页页面‘})
4         .when(‘/computers‘,{template:‘这是电脑分类页面‘})
5         .when(‘/printers‘,{template:‘这是打印机页面‘})
6         .otherwise({redirectTo:‘/‘});
7 }]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

初识AngularJS

标签：

原文地址：http://www.cnblogs.com/daixiaotian/p/5955584.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行