AngularJS


第1章介绍

AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。

1.1 特点

AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。

框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。

AngularJS有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。

与之类似的框架还有BackBone、KnockoutJS、Vue、React等。

1.2 下载

1、通过AngularJS官网下载，不过由于国内特殊的国情，需要FQ才能访问。

2、通过npm下载，npm install angular

3、通过bower下载，bower install angular

bower是什么？

1.3 体验AngularJS

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 介绍</title>
  6. 	<!-- 引入AngularJS 框架 -->
  7. 	<script src="./libs/angular.min.js"></script>
  8. </head>
  9. <body ng-app>
  10. 	<input type="text" ng-model="msg">
  11. 	<h2>你好: {{msg}}</h2>
  12. </body>
  13. </html>

1.4 MVC

MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成，采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。

模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。

视图（View）一般用来展示数据，比如通过HTML展示。

控制器（Controller）一般用做连接模型和视图的桥梁。

 

通过ThinkPHP来演示后端MVC的执行流程，其重点在于理解。

MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV*等。

注：做为初学可以不必过于在意这些概念。

mvc介绍.png

       1.在开发网站中，所有的功能其实都是前端人员发送请求并接受相应，然后将响应的数据放到页面中去。

   数据---->页面（对应数据要展示的对应页面），将处理数据的角色，称为模型（Model）。展示数据的角色称为视图（View）。为了保证对应的数据要展示到对应的页面上，需要分配，称为控制器（controller）。

   [MVC是一种开发的模式，采用这种开发模式可以使开发变得更加高效。]

        2.通过米快画的形式开发，每个模块下包括MVC，使用HTML在构建是变得灵活。

            2.1当引入angular.js后会提供一个全局对象angular,在此对象下有若干的方法，其次module方法可以创建模块 var App=angluar.module("App",[]);

            2.2每个模块包括MVC，模块实例也是一个对象，在此对象下有若干的方法，其次controller方法创建一个控制器，App.controller('Demo',['$scope',function($scope){}]);$scopr即模型(Model)

            2.3视图即HTML，每一个视图都隶属于某一个控制器，通过ng-controller进行指定，ng-controller="Demo"

第2章模块化

使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。

采用模块化的组织方式，可以最大程度的实现代码的复用，可以像搭积木一样进行开发。

 

2.1 定义应用

通过为任一HTML标签添加ng-app属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。

 

2.2 定义模块

AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法用来定义一个模块。

 

注：应用（App）其本质也是一个模块（一个比较大的模块）。

2.3 定义控制器

控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。

 

模型（Model）数据是要展示到视图（View）上的，所以需要将控制器（Controller）关联到视图（View）上，通过为HTML标签添加ng-controller属性并赋值相应的控制器（Controller）的名称，就确立了关联关系。

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AnguarJS 模块</title>
  6. 	<script src="./libs/angular.min.js"></script>
  7. 	<script>
  8. 		// 提供一个全局对象 angular
  9. 		// 在这个对象下有若干方法，可以实现具体功能
  10. 		// 其中module方法可以创建一个模块
  11. 		// 需要两个参数，第1个为模块名称，第2个为依赖（目前空数组）
  12. 		var App = angular.module('App', []);
  14. 		// 要完成功能还需要MVC
  16. 		// 上一步创建的模块其返回值App也是一个对象
  17. 		// 在此对象下又有若干方法，其中controller方法
  18. 		// 可以创建一个控制器
  20. 		App.controller('Demo', ['$scope', function ($scope) {
  21. 			// $scope 是一个空对象{}
  22. 			// 就是Model
  23. 			$scope.name = '你好 itcast';
  25. 			$scope.courses = ['html', 'css', 'js'];
  27. 			$scope.stars = [
  28. 				{name: '刘德华', age: 60, sex: '男', area: '香港'},
  29. 				{name: '王力宏', age: 39, sex: '男', area: '台湾'},
  30. 				{name: '周杰伦', age: 37, sex: '男', area: '台湾'}
  31. 			];
  33. 		}]);
  35. 		// for(var i=0; i<courses.length; i++) {
  37. 		// 	courses[i]
  38. 		// }
  39. 	</script>
  40. </head>
  41. <body ng-app="App">
  42. 	<div class="box" ng-controller="Demo">
  43. 		<h1>{{name}}</h1>
  44. 		<ul>
  45. 			<li ng-repeat="i in courses">{{i}}</li>
  46. 		</ul>
  47. 		<table>
  48. 			<tr>
  49. 				<td>姓名</td>
  50. 				<td>性别</td>
  51. 				<td>年龄</td>
  52. 				<td>地区</td>
  53. 			</tr>
  54. 			<tr ng-repeat="star in stars">
  55. 				<td>{{star.name}}</td>
  56. 				<td>{{star.sex}}</td>
  57. 				<td>{{star.age}}</td>
  58. 				<td>{{star.area}}</td>
  59. 			</tr>
  60. 		</table>
  61. 	</div>
  62. </body>
  63. </html>

以上步骤就是AngularJS最基本的MVC工作模式。

下图是AngularJS的结构，学习AngularJS会围绕下图的结构展开。

 

第3章指令

HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

3.1 内置指令

ng-app 指定应用根元素，至少有一个元素指定了此属性。

ng-controller 指定控制器

ng-show控制元素是否显示，true显示、false不显示

ng-hide控制元素是否隐藏，true隐藏、false不隐藏

ng-if控制元素是否“存在”，true存在、false不存在

ng-src增强图片路径

ng-href增强地址

ng-class控制类名

ng-include引入模板

ng-disabled表单禁用

ng-readonly表单只读

ng-checked单/复选框表单选中

ng-selected下拉框表单选中

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  7. 	<style>
  8. 		.red {
  9. 			color: red;
  10. 		}
  12. 		.blue {
  13. 			color: blue;
  14. 		}
  15. 	</style>
  17. 	<script src="./libs/angular.min.js"></script>
  18. </head>
  19. <body>
  20. 	<!-- <img src="./images/author.jpg" alt=""> -->
  22. 	<div ng-controller="DemoController">
  23. 		<link rel="stylesheet" ng-href="{{link}}">
  24. 		<p ng-show="false">学习使用ng-show指令，当属性值true时显示，否则隐藏</p>
  25. 		<p ng-hide="0">学习使用ng-hide指令，当属性值true时隐藏，否则显示</p>
  26. 		<p ng-if="1">学习使用ng-if指令，当属性值true时显示，否则隐藏</p>
  27. 		<img ng-src="{{path}}" alt="">
  29. 		<p class="{{color}}">一些文字</p>
  30. 		<p ng-class="{red: false, blue: true}">另一些文字</p>
  32. 		<form action="">
  33. 			<ul>
  34. 				<li>
  35. 					姓名：<input type="text" value="itcast" ng-disabled="false">
  36. 				</li>
  37. 				<li>
  38. 					地区：<input type="text" value="河北省" ng-readonly="true">
  39. 				</li>
  40. 				<li>爱好: 写代码<input type="checkbox" ng-checked="false"></li>
  41. 				<li>科目: 
  42. 					<select name="" id="">
  43. 						<option value="0">PHP</option>
  44. 						<option value="0" ng-selected="false">前端</option>
  45. 						<option value="0">UI</option>
  46. 					</select>
  47. 				</li>
  48. 			</ul>
  49. 		</form>
  50. 	</div>
  51. 	<script>
  52. 		// ng-app 指定一个应用
  53. 		// 可以用应用任意标签上，并且将此标签包括区
  54. 		// 视为一个应用的范围
  55. 		// 一个页面可以有多个但是不能进行嵌套，一般指定一个
  57. 		var App = angular.module('App', []);
  59. 		// ng-controller 指定某视图隶属于某一个控制器
  61. 		App.controller('DemoController', ['$scope', function ($scope) {
  63. 			$scope.path = './images/author.jpg';
  65. 			$scope.link = './css/base.css';
  67. 			$scope.color = 'red';
  69. 		}]);
  71. 	</script>
  72. </body>
  73. </html>

注：后续学习过程中还会介绍其它指令。

3.2 自定义指令

AngularJS允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 自定义指令</title>
  6. 	<script src="./libs/angular.min.js"></script>
  7. 	<script>
  8. 		var App = angular.module('Demo', []);
  10. 		// 自定义控制器
  11. 		App.controller('ItcastController', ['$scope', function ($scope) {
  13. 			$scope.list = ['html', 'css', 'js'];
  15. 		}]);
  17. 		// 自定义指令
  18. 		// 第一个参数，指令的名称
  19. 		// 第二个参数，回调函数
  20. 		App.directive('itcast', function () {
  21. 			// 此回调函数指定具体指令应该做哪些事情
  22. 			// 通过一个对象来定义
  24. 			var obj = {
  25. 				// 自定义指令可以是属性可以是标签
  26. 				// E element
  27. 				// A attribute
  28. 				// C class
  29. 				// M mark
  30. 				restrict: 'ECMA',
  31. 				// 所有内容必须包含在一个根元素下
  32. 				template: '<div><h1>你好, AngularJS!</h1><p>哈哈</p></div>',
  33. 				// templateUrl: './header.html',
  34. 				replace: true,
  35. 				// scope: {},
  36. 				// link: function () {},
  37. 				// compile: function () {}
  38. 			}
  40. 			return obj;
  41. 		});
  43. 	</script>
  44. </head>
  45. <body ng-app="Demo">
  46. 	
  47. 	<div itcast></div>
  48. 	<itcast></itcast>
  49. 	<div class="itcast"></div>
  50. 	<!-- directive:itcast -->
  52. 	<ul ng-controller="ItcastController">
  53. 		<li ng-repeat="item in list">{{item}}</li>
  54. 	</ul>
  55. </body>
  56. </html>

第4章数据绑定

AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。

所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。

4.1 单向绑定

单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。

如下图所示，只能模型（Model）数据向视图（View）传递。

 

4.2 双向绑定

双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，如下图所示。

 

4.3 相关指令

在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。

注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS 数据绑定</title>
  6.     <script src="./libs/angular.min.js"></script>
  7. </head>
  8. <body ng-app="Demo">
  9.     <div class="box" ng-controller="DemoController">
  10.         <!-- <h1 ng-cloak>{{name}}<small ng-bind="age"></small></h1> -->
  11.         <!-- <h1>{{name}}{{age}}</h1> -->
  12.         <h1 ng-bind-template="{{name}}{{age}}"></h1>
  13.         <ul>
  14.             <li ng-repeat="course in courses">{{course}}</li>
  15.         </ul>
  16.     </div>
  17.     <script>
  18.         
  19.         var App = angular.module('Demo', []);
  21.         App.controller('DemoController', ['$scope', function ($scope) {
  23.             $scope.name = '小明';
  24.             $scope.age = '18';
  25.             $scope.courses = ['html', 'css', 'js'];
  27.         }]);
  28.     </script>
  29. </body>
  30. </html>

通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS 数据绑定</title>
  6.     <script src="./libs/angular.min.js"></script>
  7.     <script>
  8.         
  9.         var App = angular.module('App', []);
  11.         App.controller('DemoController', ['$scope', function ($scope) {
  13.             $scope.msg = '你好!!!!!';
  14.             $scope.testmsg = '';
  15.             $scope.show = function () {
  16.                 // 可以输出模型数据
  17.                 alert($scope.msg);
  19.                 // alert($scope.testmsg);
  20.             }
  22.         }]);
  24.     </script>
  25. </head>
  26. <body ng-app="App">
  27.     <div ng-controller="DemoController">
  28.         <h3>{{msg}}</h3>
  29.         <input type="text" ng-model="testmsg">
  30.         <h4>{{testmsg}}</h4>
  31.         <button ng-click="show()">显示</button>
  32.     </div>
  33. </body>
  34. </html>

通过ng-init可以初始化模型（Model）也就是$scope。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 数据绑定</title>
  6. </head>
  7. <body>
  9. 	<div ng-controller="DemoController" ng-init="name='小明'; age=18">
  10. 		
  11. 		<h1>{{name}}</h1>
  12. 		<small>{{age}}</small>
  14. 	</div>
  16. 	<script src="./libs/angular.min.js"></script>
  17. 	<script>
  18. 		var App = angular.module('App', []);
  20. 		App.controller('DemoController', ['$scope', function ($scope) {
  22. 			// $scope.name = "小明";
  24. 		}]);
  25. 	</script>
  26. </body>
  27. </html>

AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 数据绑定</title>
  6. 	<style>
  7. 		ul {
  8. 			list-style: none;
  9. 		}
  11. 		.mouseover {
  12. 			width: 100px;
  13. 			height: 100px;
  14. 			background-color: pink;
  15. 		}
  16. 	</style>
  17. </head>
  18. <body>
  19. 	
  20. 	<div ng-controller="DemoController">
  21. 		<ul>
  22. 			<li>{{name}}</li>
  23. 			<li><button ng-click="myclick()">点击</button></li>
  24. 			<li class="mouseover" ng-mouseout="mymouseout()" ng-mouseover="mymouseover()"></li>
  25. 			<li><input type="text" ng-keydown="mykeydown()"></li>
  26. 		</ul>
  27. 	</div>
  28. 	
  29. 	<script src="./libs/angular.min.js"></script>
  30. 	<script>
  31. 		var App = angular.module('App', []);
  33. 		App.controller('DemoController', ['$scope', function ($scope) {
  35. 			$scope.name = '小明';
  37. 			$scope.myclick = function () {
  38. 				alert('点击了一下?');
  39. 			}
  41. 			$scope.mymouseover = function () {
  42. 				console.log('鼠标经过过?');
  43. 			}
  45. 			$scope.mymouseout = function () {
  46. 				console.log('鼠标离开了？');
  47. 			}
  49. 			$scope.mykeydown = function () {
  50. 				console.log('按键被按下');
  51. 			}
  53. 		}]);
  54. 	</script>
  55. </body>
  56. </html>

通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 数据绑定</title>
  6. </head>
  7. <body>
  8. 	
  9. 	<div ng-controller="DemoController">
  10. 		<ul>
  11. 			<li ng-repeat="val in obj">{{val}}</li>
  12. 		</ul>
  13. 		<ul>
  14. 			<li ng-repeat="val in courses" ng-switch on="val">
  15. 				<span ng-switch-when="css">{{val}}</span>
  16. 			</li>
  17. 		</ul>
  18. 	</div>
  20. 	<script src="./libs/angular.min.js"></script>
  21. 	<script>
  22. 		
  23. 		var App = angular.module('App', []);
  25. 		App.controller('DemoController', ['$scope', function ($scope) {
  27. 			$scope.obj = {
  28. 				name: '小明',
  29. 				age: 18
  30. 			}
  32. 			$scope.courses = ['html', 'css', 'js'];
  34. 		}]);
  37. 		var arr = ['html', 'css', 'js'];
  39. 		for(var i=0; i<arr.length; i++) {
  41. 			if(arr[i] == 'css') {
  42. 				console.log(arr[i])
  43. 			}
  45. 		}
  47. 		// switch($str) {
  48. 		// 	case 'css':
  49. 		// 		console.log($str);
  50. 		// 		break;
  51. 		// 	case 'js'
  52. 		// } 
  54. 	</script>
  55. </body>
  56. </html>
数据绑定.png

第5章作用域

通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。

每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。

5.1 根作用域

一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script src="./libs/angular.min.js"></script>
  7. 	<script>
  8. 		
  9. 		var App = angular.module('App', []);
  11. 		// 
  12. 		App.controller('ParentController', ['$scope', function ($scope) {
  14. 			// $scope.name = '康熙';
  16. 		}]);
  18. 		App.controller('ChildController', ['$scope', function ($scope) {
  19. 			// $scope.name = '雍正';
  20. 		}]);
  24. 		var a = 10;
  26. 		function fn() {
  27. 			// a = 15;
  28. 			alert(a);
  30. 			function bar() {
  31. 				// a = 20;
  32. 				alert(a);
  33. 			}
  35. 			bar();
  36. 		}
  38. 		fn();
  41. 	</script>
  42. </head>
  43. <body>
  44. 	<div class="box" ng-app="App" ng-init="name='顺治'">
  45. 		<div class="parent" ng-controller="ParentController">
  46. 			<dl>
  47. 				<dt>{{name}}</dt>
  48. 				<dd></dd>
  49. 			</dl>
  50. 			
  51. 			<div class="child" ng-controller="ChildController">
  52. 				<dl>
  53. 					<dt>---{{name}}</dt>
  54. 					<dd></dd>
  55. 				</dl>
  56. 			</div>
  57. 		</div>
  58. 	</div>
  59. </body>
  60. </html>

5.2 子作用域

通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

第6章过滤器

在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。

6.1 内置过滤器

1、currency将数值格式化为货币格式

2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。

3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数

4、json将Javascrip对象转成JSON字符串。

5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

6、lowercase将文本转换成小写格式

7、uppercase将文本转换成大写格式

8、number数字格式化，可控制小位位数

9、orderBy对数组进行排序，第2个参数可控制方向

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 过滤器</title>
  6. </head>
  7. <body ng-app="App">
  8. 	
  9. 	<ul ng-controller="DemoController">
  10. 		<li>当前时间为: {{now|date:'y-M-d hh:mm:ss'}}</li>
  11. 		<li>商品价格: {{price|currency:'￥':4}}</li>
  12. 		<li>你叫啥: {{desc|uppercase}}</li>
  13. 		<li>年龄: {{age|lowercase}}</li>
  14. 		<li>数值: {{num|number:3}}</li>
  15. 		<li>转JSON: {{obj|json}}</li>
  16. 		<li>截取: {{desc|limitTo:-4}}</li>
  17. 		<li>截取: {{items|limitTo:2:3}}</li>
  18. 		<li>排序: {{students|orderBy:'score':false}}</li>
  19. 		<li>过滤: {{students|filter:'小明'}}</li>
  20. 		<li>过滤: {{students|filter:{name:'小牛'} }}</li>
  21. 		<li>过滤: {{courses|filter: 'p'}}</li>
  22. 	</ul>
  24. 	<script src="./libs/angular.min.js"></script>
  25. 	<script>
  27. 		var App = angular.module('App', []);
  29. 		App.controller('DemoController', ['$scope', function ($scope) {
  31. 			$scope.now = new Date;
  33. 			$scope.price = 12.345;
  35. 			$scope.desc = 'my name is xiaoming';
  37. 			$scope.age = 'HOw Old are you?';
  39. 			$scope.num = 123.4567;
  41. 			$scope.obj = {name: '小明', age: 18};
  43. 			$scope.items = ['html', 'css', 'js', 'php', 'java'];
  45. 			$scope.students = [
  46. 				{name: '小明', age: 18, score: 99},
  47. 				{name: '小红', age: 16, score: 96},
  48. 				{name: '小牛', age: 19, score: 97}
  49. 			];
  51. 			$scope.courses = ['php', 'java', 'javascript', 'photoshop'];
  53. 		}])
  54. 	</script>
  55. </body>
  56. </html>

6.2 自定义过滤器

除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 自定义过滤器</title>
  6. 	<script src="./libs/angular.min.js"></script>
  7. 	<script>
  8. 		var App = angular.module('App', []);
  10. 		// 定义控制器
  11. 		App.controller('DemoController', ['$scope', function ($scope) {
  13. 			$scope.str = '测试内容';
  15. 			$scope.price = 12.345;
  17. 			$scope.desc = 'my name is laozhao';
  19. 		}]);
  20. 		// 定义指令
  21. 		// App.directive();
  23. 		// 定义过滤器
  24. 		// 过滤器本质就一个函数
  25. 		// 第1个参数为过滤器名称(函数名称)
  26. 		// 第2个参数为回调函数
  27. 		App.filter('demo', function () {
  29. 			// 在此定义过滤器具体的功能
  30. 			// function abc() {
  31. 			// 	console.log('1111');
  32. 			// }
  34. 			// return abc;
  36. 			return function (arg, type, fixed) {
  37. 				// return arg + arg2 + arg3;
  38. 				return type + arg.toFixed(fixed);
  39. 			}
  40. 		});
  43. 		// 自定义一个实英文首字母大定的过滤器
  44. 		App.filter('capitalize', function () {
  45. 			return function (input) {
  46. 				console.log(input);
  47. 				return input[0].toUpperCase() + input.slice(1);
  48. 			}
  49. 		});
  50. 	</script>
  51. </head>
  52. <body ng-app="App">
  53. 	<div ng-controller="DemoController">
  54. 		<dl>
  55. 			<dt>自定义过滤器</dt>
  56. 			<dd>{{price|demo:'￥':2}}</dd>
  57. 			<dd>{{desc|capitalize}}</dd>
  58. 		</dl>
  59. 	</div>
  60. </body>
  61. </html>

第7章依赖注入

AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。

所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。

常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等

7.1 推断式注入

没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。

 

这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 依赖注入</title>
  6. </head>
  7. <body ng-app="App">
  8. 	
  9. 	<div class="box" ng-controller="DemoController">
  10. 		<h1>{{name}}</h1>
  11. 	</div>
  13. 	<script src="./libs/angular.min.js"></script>
  14. 	<script>
  15. 		
  16. 		var App = angular.module('App', []);
  18. 		// AngularJS 内置一些具有特殊功能的“模块”
  19. 		// 开发者在开发的时候可以直接使用这些“模块”
  20. 		App.controller('DemoController', function ($scope, $http) {
  21. 			$scope.name = '推断式';
  22. 		});
  23. 	</script>
  24. </body>
  25. </html>

7.2 行内注入

以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。

 

推荐使用这种方式声明依赖

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 依赖注入</title>
  6. 	<script src="./libs/angular.min.js"></script>
  7. 	<script>
  8. 		var App = angular.module('App', []);
  10. 		// 写一个控制器
  11. 		// $scope 就是AngularJS 事件提供供的一个功能模块
  12. 		// 数组是用来声明需要依赖哪些功能模块的
  13. 		// 数组最后一个单元必须为函数，函数的参数即注入
  14. 		// angularJS将查找得到的功能模块以参数的形式传入
  15. 		// 最后一个数组单元传递的函数，这个过程称为注入
  17. 		// 行内式依赖注入
  18. 		App.controller('DemoController', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {
  19. 			$scope.name = '依赖注入';
  21. 		}]);
  23. 		// 依赖注入并非只能用于定义控制器时，
  24. 		// 只是我们目前接触控制器最多，拿它举例说明
  26. 	</script>
  27. </head>
  28. <body ng-app="App">
  29. 	<div ng-controller="DemoController">
  30. 		<h1>{{name}}</h1>
  31. 	</div>
  32. </body>
  33. </html>

第8章服务

服务是一个对象或函数，对外提供特定的功能。

8.1 内建服务

1、$location是对原生Javascript中location对象属性和方法的封装。

        $location是关于链接的操作，hash是特殊的，#号后面的都封装成hash了，方便调用别的方法。

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 服务</title>
  6. </head>
  7. <body>
  9. 	<dl ng-controller="DemoController">
  10. 		<dt>$location服务</dt>
  11. 		<a href="#/abc?name=itcast&age=10#hash">地址</a>
  12. 		<dd>absUrl: {{absUrl}}</dd>
  13. 		<dd>host: {{host}}</dd>
  14. 		<dd>port: {{port}}</dd>
  15. 		<dd>hash: {{hash}}</dd>
  16. 		<dd>search: {{search}}</dd>
  17. 		<dd>protocol: {{protocol}}</dd>
  18. 	</dl>
  19. 	<script src="./libs/angular.min.js"></script>
  20. 	<script>
  21. 		var App = angular.module('App', []);
  23. 		// $location内置服务
  25. 		// AngularJS 专门提供了一个帮助获取URL地址一个服务
  26. 		App.controller('DemoController', ['$scope', '$location', function ($scope, $location) {
  28. 			console.log($location);
  29. 			// 获取绝对路径
  30. 			$scope.absUrl = $location.absUrl();
  31. 			$scope.host = $location.host();
  32. 			$scope.port = $location.port();
  34. 			// angularjs 对hash做了特别的处理
  35. 			$scope.hash = $location.hash();
  37. 			$scope.search = $location.search();
  39. 			$scope.protocol = $location.protocol();
  41. 		}]);
  44. 		// 一个完整地址是包括若干部分的
  45. 		// http://www.baidu.com:80
  46. 		// http://localhost/02day/4-code/$http.html
  47. 		// http://localhost/02day/4-code/$http.html?name=小明&age=10
  48. 		// http://localhost/02day/4-code/$http.html#demo
  50. 		// http 表示协议
  51. 		// localhost/127.0.0.1/www.baidu.com 表示主机
  52. 		// 80 表示端口号
  53. 		// # 表示锚链接
  54. 		// ? 表示查询参数或叫queryString
  55. 		// 02day/4-code 表示pathname
  57. 		// js BOM 提供了一个对象 location 可以获取地址的任一部分
  59. 		for(var key in location) {
  60. 			console.log(key + '~~~' + location[key]);
  61. 		}
  63. 	</script>
  65. </body>
  66. </html>

2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。

        $timeout是等待多久后执行，$interval是间歇执行。

         清除定时器：$interval.cancel(interval赋值的变量)。

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 服务</title>
  6. </head>
  7. <body>
  8. 	<div ng-controller="DemoController">
  9. 		<ul>
  10. 			<li>{{msg}}</li>
  11. 			<li>{{count}}</li>
  12. 			<li>{{now|date:'yyyy-MM-dd hh:mm:ss'}}</li>
  13. 			<li><button ng-click="start()">开始计时</button></li>
  14. 			<li><button ng-click="stop()">停止计时</button></li>
  15. 		</ul>
  16. 	</div>
  17. 	<script src="./libs/angular.min.js"></script>
  18. 	<script>
  19. 		var App = angular.module('App', []);
  21. 		// $timeout 和 $interval
  22. 		App.controller('DemoController', ['$scope', '$timeout', '$interval',function ($scope, $timeout, $interval) {
  24. 			// $timeout(function () {
  25. 			// 	$scope.msg = '我在1秒后显示';
  26. 			// }, 1000);
  28. 			// var count = 0;
  29. 			// $interval(function () {
  30. 			// 	$scope.count = count++;
  31. 			// }, 500);
  33. 			var timer;
  34. 			$scope.start = function () {
  35. 				timer = $interval(function () {
  36. 					$scope.now = new Date;
  37. 				}, 1000);
  38. 			}
  40. 			$scope.stop = function () {
  41. 				// 清
  42. 				$interval.cancel(timer);
  43. 			}
  45. 		}])
  46. 	</script>
  48. </body>
  49. </html>

3、$filter过滤器在控制器中格式化数据,用来处理数据格式的。

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 服务</title>
  6. </head>
  7. <body>
  8. 	<ul ng-controller="DemoController">
  9. 		<li>价格: {{price}}</li>
  10. 		<li>大写: {{intro}}</li>
  11. 		<li>截取: {{list}}</li>
  12. 	</ul>
  13. 	<script src="./libs/angular.min.js"></script>
  14. 	<script>
  15. 	
  16. 		var App = angular.module('App', []);
  18. 		// 前面学习过滤器，主要应用在{{}}中
  19. 		// 但是也会有需求，在控制器中使用，这时需要用到一个
  20. 		// 叫$filter的服务
  22. 		// $filter是过滤器
  23. 		App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {
  25. 			// $filter服务仍然是处理数据格式的
  26. 			var price = 12.345; // ￥12.345;
  28. 			var currency = $filter('currency');
  30. 			$scope.price = currency(price, '￥', 3);
  33. 			var intro = 'my name is laozhao';
  35. 			var uppercase = $filter('uppercase');
  37. 			$scope.intro = uppercase(intro);
  40. 			var list = ['html', 'css', 'js'];
  42. 			var limitTo = $filter('limitTo');
  44. 			$scope.list = limitTo(list, 2);
  46. 		}])
  48. 	</script>
  50. </body>
  51. </html>

4、$log打印调试信息

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 服务</title>
  6. 	<script src="./libs/angular.min.js"></script>
  7. 	<script>
  8. 		var App = angular.module('App', []);
  10. 		// $scope是一个具有特定功能的模块
  11. 		// 在AngularJS中将具有特定功能的模块称为服务
  12. 		App.controller('DemoController', ['$scope', '$log', function ($scope, $log) {
  14. 			// $scope 是一个AngularJS内置服务，可以充当模型这个角色
  15. 			$scope.name = '小明';
  17. 			// $log是一个内置的服务，可以帮助开发者在开发阶段进行调试
  18. 			$log.debug('调试信息');
  20. 			$log.info('信息');
  22. 			$log.log('打印');
  24. 			$log.error('错误');
  26. 		 	$log.warn('警告');
  28. 		}]);
  29. 	</script>
  30. </head>
  31. <body ng-app="App">
  32. 	<div ng-controller="DemoController">
  33. 		<h1>{{name}}</h1>
  34. 	</div>
  35. </body>
  36. </html>

5、$http用于向服务端发起异步请求。

 

同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。

注：各参数含义见代码注释。

GET:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS $http服务</title>
  6. </head>
  7. <body ng-app="App">
  9. 	<div ng-controller="DemoController">
  10. 		<h1>练习$http</h1>
  11. 	</div>
  12. 	
  13. 	<script src="./libs/angular.min.js"></script>
  14. 	<script>
  15. 		
  16. 		var App = angular.module('App', []);
  18. 		App.controller('DemoController', ['$http', '$log', function ($http, $log) {
  20. 			// $http 是angularJS内置服务，可以向服务器发起异步请求
  21. 			$http({
  22. 				url: './example.php', // 请求地址
  23. 				method: 'get', // 请求方式
  24. 				params: {sex: '男'}, // 专门用来传递get形式的参数
  25. 				// AngularJS 以get形式传参时，并没有使用data
  26. 				data: 'name=小明&age=10' // 专门用来传post形式的参数
  27. 			}).success(function (info) { // 响应成功后会执行
  28. 				// info 即服务端返回的数据
  29. 				$log.info(info);
  30. 			});
  32. 		}]);
  34. 		// XMLHttpRequest
  35. 		// var xhr = new XMLHttpRequest;
  37. 		// xhr.open('post', './example.php');
  39. 		// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  41. 		// 之所以在jQuery可以通data以对象形式传递参数
  42. 		// 是因jQuery内部进行处理(key=val&key1=val1)
  44. 		// 之所以在jQuery中传递参数不论get或post都可以使用
  45. 		// data传递，是因为在jQuery内部做了判断将参数放到不同位置了
  47. 		// 标准格式 key=val&key1=val1
  48. 		// xhr.send('name=小明&age=10');
  50. 		// $.ajax({
  51. 		// 	url: './example.php',
  52. 		// 	type: 'post',
  53. 		// 	data: {name: 'itcast', age: 10}
  54. 		// })
  55. 	</script>
  56. </body>
  57. </html>
POST:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS $http服务</title>
  6. </head>
  7. <body ng-app="App">
  9. 	<div ng-controller="DemoController">
  10. 		<h1>练习$http</h1>
  11. 	</div>
  12. 	
  13. 	<script src="./libs/angular.min.js"></script>
  14. 	<script>
  15. 		
  16. 		var App = angular.module('App', []);
  18. 		App.controller('DemoController', ['$http', '$log', function ($http, $log) {
  20. 			// $http 是angularJS内置服务，可以向服务器发起异步请求
  21. 			$http({
  22. 				url: './example.php', // 请求地址
  23. 				method: 'post', // 请求方式
  24. 				// angularJS没有将一个对象数据转换成
  25. 				// key=val&key1=val1
  26. 				// data: {name: '小明', age: 18}, // 传递参数
  27. 				data: 'name=小明&age=10',
  28. 				headers: {
  29. 					'Content-Type': 'application/x-www-form-urlencoded'
  30. 				}
  31. 			}).success(function (info) { // 响应成功后会执行
  32. 				// info 即服务端返回的数据
  33. 				$log.info(info);
  34. 			});
  36. 		}]);
  38. 		// XMLHttpRequest
  39. 		// var xhr = new XMLHttpRequest;
  41. 		// xhr.open('post', './example.php');
  43. 		// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  45. 		// 之所以在jQuery可以通data以对象形式传递参数
  46. 		// 是因jQuery内部进行处理(key=val&key1=val1)
  48. 		// 标准格式 key=val&key1=val1
  49. 		// xhr.send('name=小明&age=10');
  51. 		// $.ajax({
  52. 		// 	url: './example.php',
  53. 		// 	type: 'post',
  54. 		// 	data: {name: 'itcast', age: 10}
  55. 		// })
  56. 	</script>
  57. </body>
  58. </html>
JSONP:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS $http服务</title>
  6. </head>
  7. <body ng-app="App">
  9. 	<div ng-controller="DemoController">
  10. 		<h1>练习$http</h1>
  11. 	</div>
  12. 	
  13. 	<script src="./libs/angular.min.js"></script>
  14. 	<script>
  15. 		
  16. 		var App = angular.module('App', []);
  18. 		App.controller('DemoController', ['$http', '$log', function ($http, $log) {
  20. 			$http({
  21. 				url: './jsonp.php',
  22. 				method: 'jsonp', // 使用JSONP请求
  23. 				// JSON原理中需要将前端“事先”定义好的一个函数名
  24. 				// 传递给后端，后在返回这个函数调用（函数名()）
  25. 				// 并且在调用时传递一个实参，通过这种方式可以间接
  26. 				// 获取服务端数据
  27. 				// 类似这种格式值angular.callbacks._0被添加到了
  28. 				// 请求后面，angular.callbacks._0就是angularjs事先定义好的一个函数名字
  29. 				// angular.callbacks._0();
  30. 				params: {callback: 'JSON_CALLBACK'}
  31. 			}).success(function (info) {
  32. 				$log.info(info);
  33. 			});
  35. 			// $.ajax({
  36. 			// 	url: '',
  37. 			// 	dataType: 'jsonp',
  38. 			// 	success: function (info) {
  40. 			// 	}
  41. 			// });
  43. 		}]);
  44. 	</script>
  46. </body>
  47. </html>


8.2 自定义服务

通过上面例子得知，所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。

 

1、factory方法

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 自定义服务</title>
  6. </head>
  7. <body>
  8. 	<div ng-controller="DemoController">
  10. 		<span>{{now}}</span>
  12. 		<button ng-click="show()">显示时间</button>
  13. 	
  14. 	</div>
  15. 	<script src="./libs/angular.min.js"></script>
  16. 	<script>
  17. 		var App = angular.module('App', []);
  19. 		// App.directive(); 自定义指令
  21. 		// App.filter(); 自定义过滤器
  23. 		// App.controller(); “自定义”控制器
  25. 		// App.factory(); 自定义服务
  27. 		// 定义一个名叫showTime的服务
  28. 		App.factory('showTime', ['$filter', function ($filter) {
  30. 			function show() {
  31. 				// 当外部调用show方法时
  32. 				// 将结果返回
  33. 				return $filter('date')(new Date, 'yyyy-MM-dd hh:mm:ss');
  34. 			}
  35. 			// 将封装好的服务返回，供外部使用
  36. 			// 可以以对象形式也可以直接返回函数
  38. 			// return show
  40. 			// 或者
  41. 			return {
  42. 				show: show
  43. 			}
  45. 		}]);
  47. 		// 定义一个控制器，将自定义的服务注入进来
  48. 		// 测试
  49. 		App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {
  51. 			// showTime就是自定义的服务
  52. 			$scope.show = function () {
  53. 				// 当我们自定义的服务返回一个对象时
  54. 				// 使用 showTime.show()
  55. 				// $scope.now = showTime.show();
  57. 				// 当我们自定义的服务直接返回函数时
  58. 				// 使用showTime();
  59. 				$scope.now = showTime();
  61. 			};
  63. 		}]);
  65. 	</script>
  67. </body>
  68. </html>

2、service方法

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 自定义服务</title>
  6. </head>
  7. <body>
  8. 	<div ng-controller="DemoController">
  9. 		<h1>{{now}}</h1>
  10. 	</div>
  11. 	<script src="./libs/angular.min.js"></script>
  12. 	<script>
  13. 		var App = angular.module('App', []);
  15. 		// 自定义服务
  16. 		// 通过 servie定义一个服务
  17. 		// 第1个参数是自定义服务名称
  18. 		// 第2个参数是依赖注入
  19. 		App.service('showTime', ['$filter', function ($filter) {
  20. 			// 将定义好的服务添加到this对象上
  21. 			// 外部就可以使用了
  22. 			// $filter可以直接拿来用
  23. 			this.show = function (format) {
  24. 				return $filter('date')(new Date, format);
  25. 			}
  26. 		}]);
  28. 		// 自定义一个控制器，测试自定义服务
  29. 		App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {
  31. 			$scope.now = showTime.show('MM');
  33. 		}])
  35. 	</script>
  37. </body>
  38. </html>

3、value方法定义常量

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 自定义服务</title>
  6. </head>
  7. <body>
  8. 	<div ng-controller="DemoController">
  9. 		{{author}}
  10. 		{{version}}
  11. 	</div>
  12. 	<script src="./libs/angular.min.js"></script>
  13. 	<script>
  14. 		var App = angular.module('App', []);
  16. 		// 自定义常量服务
  17. 		App.value('author', 'itcast');
  18. 		App.value('version', '1.0');
  20. 		// 本质上一个服务
  21. 		// 从表现形式上是一个常量
  22. 		// 常量就是不变的值与变对量相对应
  24. 		// 声明依赖调用服务
  25. 		App.controller('DemoController', ['$scope', 'author', 'version', function ($scope, author, version) {
  27. 			$scope.author = author;
  28. 			$scope.version = version;
  30. 		}])
  32. 	</script>
  34. </body>
  35. </html>

在介绍服务时曾提到服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。

第9章模块加载

AngularJS模块可以在被加载或者执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。

 

9.1 配置块

1、通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。

比如$log、$http、$location都是内置服务，相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。

下图以$log为例进行演示，修改了配置

 

下图以$filter为例进行演示，实现相同功能

 

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 服务</title>
  6. </head>
  7. <body>
  8. 	<ul ng-controller="DemoController">
  9. 		<li>价格: {{price}}</li>
  10. 		<li>大写: {{intro}}</li>
  11. 		<li>截取: {{list}}</li>
  12. 	</ul>
  13. 	<script src="./libs/angular.min.js"></script>
  14. 	<script>
  15. 	
  16. 		var App = angular.module('App', []);
  18. 		// 前面学习过滤器，主要应用在{{}}中
  19. 		// 但是也会有需求，在控制器中使用，这时需要用到一个
  20. 		// 叫$filter的服务
  22. 		// $filter是过滤器
  23. 		App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {
  25. 			// $filter服务仍然是处理数据格式的
  26. 			var price = 12.345; // ￥12.345;
  28. 			var currency = $filter('currency');
  30. 			$scope.price = currency(price, '￥', 3);
  33. 			var intro = 'my name is laozhao';
  35. 			var uppercase = $filter('uppercase');
  37. 			$scope.intro = uppercase(intro);
  40. 			var list = ['html', 'css', 'js'];
  42. 			var limitTo = $filter('limitTo');
  44. 			$scope.list = limitTo(list, 2);
  46. 		}])
  48. 	</script>
  50. </body>
  51. </html>

9.2 运行块

服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。

rootScope根作用域（相当于window）

 

不但如此，run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行，比如验证用户是否登录，未登录则不允许进行任何其它操作。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App" ng-init="name='顺治'">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 模块加载</title>
  6. </head>
  7. <body>
  8. 	<div ng-controller="DemoController">
  9. 		{{name}}
  10. 		{{age}}
  11. 	</div>
  12. 	<script src="./libs/angular.min.js"></script>
  13. 	<script>
  14. 		var App = angular.module('App', []);
  16. 		// 在AngularJS中某些模块是可以直接运行的
  17. 		// 使用 App.run()
  19. 		// 例如直接运行$http、$rootScope服务
  20. 		// $rootScope根作域(相当于window)
  21. 		App.run(['$http', '$rootScope', function ($http, $rootScope) {
  23. 			// 定义全局作用域
  24. 			$rootScope.name = '顺治';
  25. 			$rootScope.age = '28';
  27. 			// 利用$http发送异步请求
  28. 			$http({
  29. 				url: './example.php'
  30. 			}).success(function (info) {
  31. 				console.log(info);
  32. 			});
  33. 		}]);
  35. 		// 定义制器测试全局作用域
  36. 		App.controller('DemoController', ['$scope', function ($scope) {
  38. 			// $scope.name = '康熙';
  40. 		}])
  41. 	</script>
  43. </body>
  44. </html>

注：此知识点意在了解AngularJS的加载机制。

第10章路由

一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。

10.1 SPA

SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。

10.2 路由（约等于地址）前端路由就是封装了锚链接

在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 路由和多视图</title>
  6. 	<style>
  7. 		body {
  8. 			padding: 0;
  9. 			margin: 0;
  10. 			background-color: #F7F7F7;
  11. 			font-family: Arial;
  12. 		}
  14. 		.wrapper {
  15. 			width: 980px;
  16. 			margin: 50px auto;
  17. 		}
  19. 		ul {
  20. 			padding: 0;
  21. 			margin: 0;
  22. 			overflow: hidden;
  23. 			list-style: none;
  24. 			background-color: #000;
  25. 			border-radius: 4px;
  26. 		}
  28. 		li {
  29. 			float: left;
  30. 			width: 120px;
  31. 			height: 40px;
  32. 			text-align: center;
  33. 			line-height: 40px;
  34. 			font-size: 18px;
  35. 		}
  37. 		li.active {
  38. 			background-color: #333;
  39. 		}
  41. 		li a {
  42. 			display: block;
  43. 			color: #FFF;
  44. 			text-decoration: none;
  45. 		}
  47. 		.content {
  48. 			margin-top: 30px;
  49. 			font-size: 24px;
  50. 			padding: 0 20px;
  51. 		}
  52. 	</style>
  53. </head>
  54. <body ng-app="App">
  55. 	<div class="wrapper">
  56. 		<!-- 导航菜单 -->
  57. 		<ul>
  58. 			<li class="active">
  59. 				<a href="#/index">Index</a>
  60. 			</li>
  61. 			<li>
  62. 				<a href="#/introduce">Introduce</a>
  63. 			</li>
  64. 			<li>
  65. 				<a href="#/contact">Contact Us</a>
  66. 			</li>
  67. 		</ul>
  68. 		<!-- 内容 -->
  69. 		<div class="content">
  70. 			<!-- 占位符 -->
  71. 			<div ng-view></div>
  72. 		</div>
  73. 	</div>
  74. 	<!-- 引入核心框架 -->
  75. 	<script src="./libs/angular.min.js"></script>
  76. 	<!-- 引入路由模块 -->
  77. 	<script src="./libs/angular-route.js"></script>
  78. 	<script>
  79. 		var App = angular.module('App', ['ngRoute']);
  81. 		// 就可以使用路由模块了
  82. 		// 路由模块需要经过一系列配置才可以使用
  83. 		// $routeProvider
  84. 		App.config(['$routeProvider', function ($routeProvider) {
  86. 			// 第1个参数路由的变化
  87. 			// 第2个参数当前路由的具体逻辑
  88. 			$routeProvider.when('/index', {
  89. 				template: '<h1>Index Page!</h1>'
  90. 			}).when('/introduce', {
  91. 				template: '<h1>Introduce Page!</h1>'
  92. 			}).when('/contact', {
  93. 				template: '<h1>Contact Us Page!</h1>'
  94. 			}).when('/404', {
  95. 				template: '<h1 style="color:red;">Not Found</h1>'
  96. 			})
  97. 			.otherwise({
  98. 				redirectTo: '/404'
  99. 			});
  101. 		}]);
  102. 	</script>
  103. </body>
  104. </html>

通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。

AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

在1.2版前路由功能是包含在AngularJS核心代码当中，之后的版本将路由功能独立成一个模块，下载angular-route.js


要实现更新数据，需要发送请求找服务器要，当锚点发送改变后再要数据，使用hashchange事件，添加给window对象，这个事件会在锚点发生改变的时候触发

window.addEventListener('hashchangge',function(){

    

});

10.2.1 使用

1、引入angular-route.js

 

2、实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）。

 

3、配置路由模块

 

4、布局模板

通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

 

10.2.1 路由参数

1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。

2、第1个参数是一个字符串，代表当前URL中的hash值。

3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。

a、template 字符串形式的视图模板

b、templateUrl 引入外部视图模板

c、controller 视图模板所属的控制器

d、redirectTo跳转到其它路由

4、获取参数，在控制中注入$routeParams可以获取传递的参数

 

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS 路由和多视图</title>
  6. 	<style>
  7. 		body {
  8. 			padding: 0;
  9. 			margin: 0;
  10. 			background-color: #F7F7F7;
  11. 			font-family: Arial;
  12. 		}
  14. 		.wrapper {
  15. 			width: 980px;
  16. 			margin: 50px auto;
  17. 		}
  19. 		ul {
  20. 			padding: 0;
  21. 			margin: 0;
  22. 			overflow: hidden;
  23. 			list-style: none;
  24. 			background-color: #000;
  25. 			border-radius: 4px;
  26. 		}
  28. 		li {
  29. 			float: left;
  30. 			width: 120px;
  31. 			height: 40px;
  32. 			text-align: center;
  33. 			line-height: 40px;
  34. 			font-size: 18px;
  35. 		}
  37. 		li.active {
  38. 			background-color: #333;
  39. 		}
  41. 		li a {
  42. 			display: block;
  43. 			color: #FFF;
  44. 			text-decoration: none;
  45. 		}
  47. 		.content {
  48. 			margin-top: 30px;
  49. 			font-size: 24px;
  50. 			padding: 0 20px;
  51. 		}
  52. 	</style>
  53. </head>
  54. <body ng-app="App">
  55. 	<div class="wrapper">
  56. 		<!-- 导航菜单 -->
  57. 		<ul>
  58. 			<li class="active">
  59. 				<a href="#/index">Index</a>
  60. 			</li>
  61. 			<li>
  62. 				<a href="#/introduce">Introduce</a>
  63. 			</li>
  64. 			<li>
  65. 				<a href="#/contact">Contact Us</a>
  66. 			</li>
  67. 		</ul>
  68. 		<!-- 内容 -->
  69. 		<div class="content">
  70. 			<!-- 占位符 -->
  71. 			<div ng-view></div>
  72. 		</div>
  73. 	</div>
  74. 	<!-- 引入核心框架 -->
  75. 	<script src="./libs/angular.min.js"></script>
  76. 	<!-- 引入路由模块 -->
  77. 	<script src="./libs/angular-route.js"></script>
  78. 	<script>
  79. 		var App = angular.module('App', ['ngRoute']);
  81. 		App.config(['$routeProvider', function ($routeProvider) {
  83. 			$routeProvider.when('/index', {
  84. 				// 引入外部视图模板
  85. 				templateUrl: './views/index.tpl',
  86. 				// 为引入的视图模板指定控制器
  87. 				controller: 'IndexController'
  88. 			}).when('/introduce', {
  89. 				templateUrl: './views/introduce.html'
  90. 			}).when('/contact', {
  91. 				templateUrl: './views/concat.tpl'
  92. 			})
  93. 		}])
  95. 		// 定义控制器
  96. 		App.controller('IndexController', ['$scope', '$http', function ($scope, $http) {
  98. 			// $http({
  99. 			// 	url: ''
  100. 			// }).success(function (info) {
  101. 			// 	$scope.info = info;
  102. 			// });
  104. 			// 添加数据
  105. 			$scope.course = [
  106. 				{name: 'HTML', level: '初级', days: '10天'},
  107. 				{name: 'CSS', level: '初级', days: '12天'},
  108. 				{name: 'JAVASCRIPT', level: '高级', days: '18天'},
  109. 			]
  111. 		}]);
  113. 		// 后缀是通知操作系统应该使用哪个应用程序将它打开
  114. 	</script>
  115. </body>
  116. </html>

第11章其它

11.1 jQuery

在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite，通过angular.element不能选择元素，但可以将一个DOM元素转成jQuery对象，如果引提前引入了jQuery则angular.element则完全等于jQuery。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS jqLite</title>
  6. 	<style>
  7. 		.box {
  8. 			width: 200px;
  9. 			height: 200px;
  10. 			border: 1px solid #CCC;
  11. 		}
  12. 	</style>
  14. </head>
  15. <body ng-app="App">
  16. 	<div class="box">有一些文字</div>
  17. 	<script src="./libs/jquery.min.js"></script>
  18. 	<script src="./libs/angular.min.js"></script>
  19. 	<script>
  20. 		var App = angular.module('App', []);
  22. 		// 类似于 $('.box').css('color', 'red');
  23. 		// $('div')
  24. 		// jQuery 也可将一个原生DOM对象转成jQuery对象
  25. 		// angular.element() 接收的一个原生DOM对象
  26. 		// 会将这个原生DOM对象转成jQuery对象
  27. 		var box = document.querySelector('.box');
  28. 		angular.element(box).css('color', 'red');
  30. 		angular.element(box).animate({
  31. 			width: 400,
  32. 			height: 400
  33. 		}, 600);
  34. 		
  35. 	</script>
  36. </body>
  37. </html>

11.2 bower

基于NodeJS的一个静态资源管理工具，由twitter公司开发维，解决大型网站中静态资源的依赖问题。

1、依赖NodeJS环境和git工具。

2、npm install -g bower安装bower

3、bower search 查找资源信息

4、bower install  安装（下载）资源，通过#号可以指定版本号

5、bower info 查看资源信息

6、bower uninstall 卸载（删除）资源

7、bower init初始化，用来记录资源信息及依赖。


bower可以管理静态资源，并解决依赖关系。bower是基于nodejs的一个工具（使用nodejs开发的），要使用bower需要安装nodejs环境

nodejs就是一个软件，（普通安装即可）。避免安装在中文目录下。

安装完成后，并不会在桌面上创建图标，任务栏也不会有，只可以通过命令行来使用nodejs。

win+r   输入cmd 进入命令管理窗口。

输入 node -v验证nodejs是否正常   -前面有一个空格，显示版本号就是正常。

再输入 npm -v验证npm是否正常

 
 




posted @ 2016-12-25 19:34  水清风i  阅读(284)  评论(0)    收藏  举报