AngularJs

D_呆橘

于 2022-12-27 09:41:20 发布

阅读量650

点赞数

CC 4.0 BY-SA版权

分类专栏：个人笔记文章标签： angular.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/D_tangerine/article/details/128451975

个人笔记专栏收录该内容

6 篇文章

订阅专栏

AngularJs简介

简介与安装

简介

AngularJS 是JavaScript的一个框架。它是JavaScript 编写的一个库。是AngularJS为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。

**AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。**例如：

1）使用双大括号{{}}语法进行数据绑定；

2）使用DOM控制结构来实现迭代或者隐藏DOM片段；

3）支持表单和表单的验证；

4）能将逻辑代码关联到相关的DOM元素上；

5）能将HTML分组成可重用的组件。

关于AngularJS的特点：

1）数据的双向绑定，这可能是其最激动人心的特性，view层的数据和model层的数据是双向绑定的，其中之一发生更改，另一方会随之变化，而不需要写任何代码；

2）代码模块化，每个模块的代码独立且拥有自己的作用域，比如model，controller等；

3）强大的directive，可以将很多功能封装成HTML的tag，属性或者注释等，这大大美化了HTML的结构，增强了可阅读性；

4）依赖注入，将这种后端语言的设计模式赋予前端代码，这意味着前端的代码可以提高重用性和灵活性，未来的模式可能将大量操作放在客户端，服务端只提供数据来源和其它客户端无法完成的操作；

5）测试驱动开发，使用Angular开发的应用可以很容易地进行单元测试和端对端测试，这解决了传统的JS代码难以测试和维护的缺陷。

安装

AngularJS下载

1）AngularJS下载地址：

https://angularjs.org/

https://github.com/angular/angular.js/releases

2）安装与使用(CDN方式)

创建AngularJS的一个简单应用程序“Hello World!”：

使用编辑器，创建一个HTML文件，例如：helloworld.html。

将下面的源代码复制到您的HTML文件。

源码：

<!doctype html>
<html ng-app>
    <head>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

在web浏览器中打开这个HTML文件。

代码说明：

1）当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

2）这行载入AngularJS脚本：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

3）标签中的正文是应用的模板，在UI中显示问候语：

Hello {{'World'}}!

*注意：使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。

AngularJS应用场景

AngularJS主要考虑的是构建CRUD（增加Create、查询Retrieve、更新Update、删除Delete）应用。幸运的是，至少90%的WEB应用都是CRUD应用。

如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。

但是像游戏开发之类对DOM进行大量操作、又或者单纯需要极高运行速度的应用，就不适合使用AngularJS了。

实现效果

在下图中，表单验证使用了AngularJS特性中的双向数据绑定、MVC、依赖注入。

表单验证.png

页面跳转中使用了AngularJS特性中的路由控制，说白了路由就是为了页面跳转的，在web应用中路由可以将应用的所有页面缓存，从而加快页面跳转的速度。

路由.png

eg.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>路由配置对象</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script type="text/javascript">
        angular.module('ngRouteExample', ['ngRoute'])
            .controller('HomeController', function ($scope) {
                $scope.$route = $route;
            })
            .controller('AboutController', function ($scope) {
                $scope.$route = $route;
            })
            .config(function ($routeProvider) {
                $routeProvider.
                when('/home', {
                    templateUrl: 'embedded.home.html',
                    controller: 'HomeController'
                }).
                when('/about', {
                    templateUrl: 'embedded.about.html',
                    controller: 'AboutController'
                }).
                otherwise({
                    redirectTo: '/home'
                });
            });
    </script>
    <style type="text/css">
        a:link,
        a:visited {
            text-decoration: none;
            /*超链接无下划线*/
            color:black;
        }
    </style>
</head>

<body ng-app="ngRouteExample" class="ng-scope">
    <script type="text/ng-template" id="embedded.home.html">
        <h1> 首页 </h1>
    </script>
    <script type="text/ng-template" id="embedded.about.html">
        <h1>关于我们 </h1>
    </script>
    <div>
        <div id="navigation">
            <a href="#/home">首页</a>
            <a href="#/about">关于我们</a>
        </div>

        <div ng-view="">
        </div>
    </div>
</body>

</html>

自定义指令eg.

<!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>
<script>
    var app = angular.module("myApp", []);
    app.directive("iflyDirective", function () {
        return {
            template: "<h1>我的指令!</h1>"
        };
    });
</script>

<body ng-app="myApp">  
    <ifly-directive></ifly-directive>
</body>

</html>

AngularJS 基础

AngularJS 基础-指令

ng-app、ng-init、ng-model指令

AngularJS指令带有前缀 ng-，通过指令的新属性来扩展 HTML，通过内置的指令来为应用添加功能，允许你自定义指令。

常用的ng-app 指令是初始化一个 AngularJS 应用程序，ng-app 指令定义了 AngularJS 应用程序的根元素，在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init 指令初始化应用程序数据；

ng-app 指令定义一个 AngularJS 应用程序；

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

ng-bind 指令把应用程序数据绑定到 HTML 视图。也可以使用{{}}来简写。

代码示例：

<div ng-app="" ng-init="firstName='John'">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p><!--简写-->
  <p>你输入的为：<span ng-bind="firstName"></span></p><!--未简写-->
</div>

当网页加载完毕，AngularJS 自动开启：

ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改。

ng-repeat指令

ng-repeat 指令对于集合（数组）中的每一个项目会复制一次 HTML 元素。

例如：

<div ng-app="" ng-init="names=[{name:'王',country:'一'},{name:'李',country:'二'},{name:'钱',country:'三'}]">
    <p>循环对象:</p>
    <ul>
        <li ng-repeat="x in names">
        {{ x.name + ', ' + x.country }}</li>
    </ul>
</div>

网页显示结果为：

这里的ng-init是数据的初始化，通过ng-repeat依次将names数组的值赋值给x（跟C语言里面的for循环有些类似），首先是{name:‘王’,country:‘一’}赋给x，通过x.name和x.country打印出值来，以此类推。需要注意的是，ng-repeat="x in names"这里面的x和names都是自定义的，{{}}里面如果是字符串的话需要用引号引起来。

ng-if指令

定义和用法：

ng-if 指令用于在表达式为 false 时移除 HTML 元素。

如果 if 语句执行的结果为 true，会添加移除元素，并显示。

ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

语法：

这里的element是指div，p，span等这些标签。

参数值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<!--在此编写代码-->

<p>当复选框取消选中时 DIV 元素将移除。</p>
<p>当重新选中复选框，DIV 元素会重新显示。</p>
<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
    <h1>Welcome</h1>
    <p>Welcome to my home.</p>
    <hr>
</div>
</body>
</html>

ng-value指令

定义和用法：

ng-value 指令用于设置 input 或 select 元素的 value 属性。

语法：

参数值：

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

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-value="myVar">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myVar = "Hello World!";

});
</script>

<p>该实例演示了如何使用 AngularJS 表达式来设置输入框的值。</p>
</body>
</html>

ng-src指令

定义和用法：

ng-src 指令覆盖了元素的 src 属性。

如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。

ng-src 指令确保的 AngularJS 代码执行前不显示图片。

语法：

参数值：

自定义指令

AngularJS 除内置的指令外，还可以创建自定义指令。你可以使用 .directive 函数来添加自定义指令。

当调用自定义指令时，HTML 元素需要添加自定义指令名。使用驼峰法来命名一个指令，比如iflyDirective。但在使用它时需要以符号“-” 分割, 正确的格式为ifly-directive。

限制使用：

你可以限制你的指令只能通过特定的方式来调用，通过添加 restrict 属性并设置值, 来设置指令只能通过属性的方式来调用。

restrict值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

restrict默认值为 EA, 即可以通过元素名和属性名来调用指令。

<!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 ng-app="myApp">
<ifly-directive></ifly-directive>
<script>
var app = angular.module("myApp", []);
app.directive("iflyDirective", function() {
    return {
        template : "<h1>我的指令!</h1>"
    };
});
</script>
</body>
</html>

AngularJS 基础-表达式

数字运算

AngularJS 表达式写在双大括号内：{{ expression }}，AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令一样。AngularJS 将在表达式书写

的位置"输出"数据。AngularJS表达式很像 JavaScript 的表达式：它们可以包含文字、运算符和变量。

AngularJS 数字就像 JavaScript 数字，例如：

<div ng-app="" ng-init="quantity=10;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>

网页显示结果为：总价50。

使用 ng-bind 的方式：

<div ng-app="" ng-init="quantity=10;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>

AngularJS 基础-输入验证

1.必填验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />

2.最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= “{number}”：

<input type="text" ng-minlength="5" />

3.最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength=“{number}”：

<input type="text" ng-maxlength="20" />

4.模式匹配

使用**ng-pattern=“/PATTERN/”**来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="/[a-zA-Z]/" />

5.邮箱验证

验证输入内容是否是邮箱地址，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="user.email" />

6.数字验证

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="user.age" />

7.URL验证

验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

另外AngularJS还提供了表单验证属性：

AngularJS 基础-事件

什么是事件：

如同浏览器响应浏览器层的事件，比如鼠标点击、获得焦点，angular应用也可以响应angular事件，angular事件系统并不与浏览器的事件系统相通，我们只能在作用域上监听angular事件而不是DOM事件。

事件传播：

因为作用域是有层次的，所以我们可以在作用域链上传递事件：

使用$emit冒泡事件，事件从当前子作用域冒泡到父作用域，在产生事件的作用域之上的所有作用域都会收到这个事件的通知。

$emit()方法带有两个参数：

name 是要发出的事件的名称

args 是一个参数集合，作为对象传递到事件监听器上。

使用$broadcast向下传递事件，每个注册了监听器的子作用域都会收到这个信息。

$broadcast()方法带有两个参数：

name 是要广播的事件的名称

args 是一个参数集合，作为对象传递到事件监听器上。

使用$on监听事件

$on()方法带有两个参数：

event 是事件对象，param 是参数集合，是 $b ro a d c a s t () 、$ emit()传递过来的参数集合。

事件对象属性

$on中的event事件对象属性如下：

targetScope(作用域对象)

发送或者广播事件的作用域；

currentScope(作用域对象)

当前处理事件的作用域；

name(字符串)

正在处理事件的名称；

stopPropagation(函数)

取消通过$emit触发事件的进一步传播；

preventDefault(函数)

preventDefault()把defaultprevented标志设置为true，尽管不能停止事件传播，但是子作用域可以通过defaultprevented标志知道无需处理这个事件；

defaultPrevented(布尔值)

可以通过判断defaultPrevented属性来判断父级传播的事件是否可以去忽略。

常用事件

ng-click	鼠标单击触发某事件
ng-dblclick	鼠标双击触发某事件
ng-blur	失去焦点触发某事件，适用标签：a、input、select、textarea
ng-focus	获取焦点触发某事件，与ng-blur相反，适用标签：a、input、select、textarea
ng-change	model更新触发某事件，适用标签：input
ng-copy	鼠标右键复制和快捷键Ctrl+C都会触发，适用标签：input、textarea
ng-cut	鼠标右键剪切和快捷键Ctrl+X都会触发，适用标签：a、input、select、textarea
ng-paste	鼠标右键粘贴和快捷键Ctrl+V都会触发，适用标签：a、input、select、textarea
ng-keydown	键盘按键按下触发某事件，要把$event传过去，一般都是要判断按了哪个按键的，适用所有标签
ng-keyup	键盘按键按下并松开触发某事件，要把$event传过去，一般都是要判断按了哪个按键的，适用所有标签
ng-keypress	键盘按键保持按下触发某事件，要把$event传过去，一般都是要判断按了哪个按键的，适用所有标签
ng-mousedown	鼠标按下触发某事件，适用所有标签
ng-mouseup	鼠标按下弹起触发某事件，适用所有标签
ng-mouseenter	鼠标进入触发某事件，适用所有标签
ng-mouseleave	鼠标离开触发某事件，适用所有标签
ng-mousemove	鼠标移动触发某事件，适用所有标签

AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并未包含在AngularJS核心库中，因此需要使用ngAnimate需要在定义Module时声明对其的引用。

基于CSS的动画效果

动画是通过改变 HTML 元素产生的动态变化效果。

ngAnimate 可以做什么?

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

ng-show

ng-hide

ng-class

ng-view

ng-include

ng-repeat

ng-if

ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。

此外，在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：

ng-animate

ng-hide-animate

ng-hide-add (如果元素将被隐藏)

ng-hide-remove (如果元素将显示)

ng-hide-add-active (如果元素将隐藏)

ng-hide-remove-active (如果元素将显示)

引入 angular-animate.min.js 库：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

在应用中使用模型 ngAnimate：

<div ng-app="ngAnimate"></div>

AngularJS中实现动画效果有两大种方式：

1）基于CSS的动画效果

CSS Transition Animation

CSS Class-based Animation

2）基于Javascript的动画效果

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightgreen;
  height: 200px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  color:red;
  font-size:40px;
}
.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">
<div ng-hide="myCheck">动画</div>
<h1>控制绿色方框显示: <input type="checkbox" ng-model="myCheck"></h1>
</body>
</html>

基于Javascript的动画效果

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
     <script type="text/javascript">
         (function () {
            var app = angular.module('javascriptBasedAnimationTest', ['ngAnimate']);
             app.animation('.slide', [function () {
                 return {
                    enter: function (element, doneFn) {
                       jQuery(element).fadeIn(1000, doneFn);
                    },
                     move: function (element, doneFn) {
                         jQuery(element).fadeIn(1000, doneFn);
                     },
  
                     leave: function (element, doneFn) {
                        jQuery(element).fadeOut(1000, doneFn);
                    }
                 }
             }]);
            app.controller('myController', ['$scope', function ($scope) {
                 $scope.students = ["WEB前端开发",".NET开发","软件测试","JAVA开发","Android开发"];
             }]);
        })();
    </script>
</head>
 <body ng-app="javascriptBasedAnimationTest" ng-controller="myController">
     <div ng-if="isshow" ng-repeat="stu in students" class="slide">
        {{ stu }}
     </div>
     <input type="button" value="Toggle" ng-click="isshow=!isshow" />
 </body>
</html>

AngularJS 基础-过滤器

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

内置过滤器的使用方法：

1）一个过滤器，不带参数的情况

 {{expression | filter}}

2）一个过滤器，带参数的情况

{{expression | filter:arguments}}

3）一个过滤器，带多个参数的情况

{{expression | filter: arg1: arg2: ...}}

4）多个过滤器，不带参数的情况

{{expression | filter1 | filter2 | ...}}

下面分别使用以下AngularJS的内置过滤器：

currency：

currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。

可以这样使用：

<div ng-app>
    <div> {{ 123 | currency: "$￥" }} </div>
</div>

返回结果为：

$￥123.00

number：

number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数。

如果传入的是一个非数字字符，会返回空字符串。

可以这样使用：

<div ng-app>
    <div>{{ 3600 | number:2}}</div>
    <div>{{ 3600 | number}}</div>
    <div>{{3600 | number:"a"}}</div>
    <div>{{3600 | number:a}}</div>
</div>

返回结果为：

3,600.00

3,600

NaN.

3,600

lowercase：

lowercase将字符串转换为小写。

可以这样使用：

<div ng-app>
    <div>{{ "HEllo" | lowercase}}</div>
</div>

返回结果为：hello

uppercase：

uppercase将字符串转换为大写。

可以这样使用：

<div ng-app>
    <div>{{ "HEllo" | uppercase}}</div>
</div>

返回结果为：HELLO

json：

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。

这个过滤器对调试相当有用。

可以这样使用：

<div ng-app>
    <div>{{ {"name":"dreamapple","language":"AngularJS"} | json}}</div>
</div>

返回结果为：{ “name”: “dreamapple”, “language”: “AngularJS” }

date：

date过滤器将日期过滤成你想要的格式。

{{ today | date: "yyyy - mm - dd"}}

结果为：2016- 08 – 10

{{ today | date: "yyyy - mm - dd HH:mm::ss"}}

结果为：2016 - 08 - 10 20:18::38

eg.利用过滤器格式化数字为货币格式，并且格式化大写字母为小写字母。效果如下：

<!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="myApp" ng-controller="personCtrl">

<p>商品为 {{ lastName | lowercase }}，价格为{{ number | currency }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.lastName = "MP4";
	$scope.number=500;
});
</script>

</body>
</html>

eg.输入过滤器可以通过一个管道字符“|”和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

实现效果：

<!DOCTYPE html>
<html ng-app>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="ctl">
            搜索:<input ng-model="query">
            排序:<select ng-model="order">
                <option value="name">姓名</option>
                <option value="age">年龄</option>
            </select>
            <ul class="persons">
                <li ng-repeat="person in persons | filter:query | orderBy:order">
                    {{person.name}}
                     
                    {{person.age}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            function ctl($scope){
                $scope.persons = [
                    {"name":"张梦雪","age":25},
                    {"name":"吴敏霞","age":18},
                    {"name":"施廷懋","age":20},
                    {"name":"龙清泉","age":30}
                ];
                $scope.order = "age";
            }
        </script>
    </body>
</html>

AngularJS 基础-Scope

图片 1.png

通过ng-app指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。

一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

scope是模型，是JavaScript 的一个对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 应用组成如下：

1）View(视图), 即 HTML；

2）Model(模型), 当前视图中可用的数据；

3）Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开，应用程序被分成三个核心部件：模型、视图、控制器，它们各自处理自己的任务。

图片 2.png

AngularJS中MVC的基本步骤：

①声明一个模块

var app = angular.module(‘模块名字’,[依赖列表])

②注册模块

ng-app=‘模块名字’

③声明控制器

app.controller(“控制器的名字”，func)

④使用控制器

　　　　<div ng-controller='控制器的名字'></ div >

⑤操作模型数据

$scope对象去定义模型数据: $scope.name=‘mini_fan’

$scope是建立模型数据和视图的桥梁

$scope 的作用：

$scope 对象在 Angular 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色。但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯。

再进一步系统的划分它的作用和功能:

①提供了观察者可以监听数据模型的变化

②可以将数据模型的变化通知给整个 App

③可以进行嵌套,隔离业务功能和数据

④给表达式提供上下文执行环境

$scope 生命周期：

Angular 中也有一个’事件’的概念,比如当一个绑定了 ng-model 的 input 值发生变化时,或者一个 ng-click 的 button 被点击时,Angular 的事件循环就会启动。这里事件就在 Angular 执行上下文中处理,$scope 就会对定义的表达式求值。此时事件循环被启动, Angular 会监控应用程序内所有对象,脏值检查循环也会启动。

$scope 的生命周期有4个阶段:

1）创建：控制器或者指令创建时, Angular 会使用 $injector 创建一个新的作用域,然后在控制器或指令运行时,将作用域传递进去。

2）链接：Angular 启动后会将所有 $scope 对象附加或者说链接到视图上,所有创建 $scope 对象的函数也会被附加到视图上。这些作用域将会注册当 Angular 上下文发生变化时需要运行的函数。也就是 $watch 函数, Angular 通过这些函数或者何时开始事件循环。

3）更新：一旦事件循环开始运行,就会开始执行自己的脏值检测。一旦检测到变化,就会触发 $scope 上指定的回调函数。

4）销毁：通常一个 $scope 在视图中不再需要, Angular 会自己清理它。当然也可以通过 $destroy() 函数手动清理。

<!DOCTYPE html>
<!--2.通过ngApp指令 完成模块的注册-->
<html ng-app="myModule">

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
<!--4.在body被加载的时候，会去执行myCtrl控制器-->
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>删除</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="tmp in cart track by $index">
                <td>{{$index}}</td>
                <td>{{tmp.name}}</td>
                <td>{{tmp.price}}</td>
                <td>{{tmp.num}}</td>
                <td>{{tmp.price*tmp.num}}</td>
                <td><button ng-click="deleteCart($index)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <button ng-click="addCart()">添加</button>
    <script>
        //    1.声明一个模块
        var app = angular.module('myModule', ['ng']);
        //    3.控制器的声明
        app.controller('myCtrl', function ($scope) {
            //    5.操作模型数据
            $scope.cart = [{
                    name: "苹果",
                    price: 4,
                    num: 2
                },
                {
                    name: "香蕉",
                    price: 6,
                    num: 1
                },
                {
                    name: "桃",
                    price: 5,
                    num: 3
                }
            ];
            $scope.deleteCart = function ($index) {
                $scope.cart.splice($index, 1);
            }
            $scope.addCart = function () {
                $scope.cart.push({
                    name: "葡萄",
                    price: 3,
                    num: 4
                });
            }
        });
    </script>
</body>
</html>

Scope使用

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。当我们在 AngularJS 创建控制器时，可以将 $scope 对象当作一个参数传递。

例如：

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{sysname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sysname = "博思智慧";
});
</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取这些属性。视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

Scope作用范围

$scope 的使用贯穿整个 Angular App 应用，它与数据模型相关联，同时也是表达式执行的上下文。有了 $sco p e 就在视图和控制器之间建立了一个通道，基于作用域视图在修改数据时会立刻更新$ scope，同样的 $scope 发生改变时也会立刻重新渲染视图。

有了 $scope 这样一个桥梁，应用的业务代码可以都在 controller 中，而数据都存放在controller 的 $scope 中。了解当前使用的 scope对应的作用域是非常重要的。

示例：当使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象：

<!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="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["合肥", "芜湖", "安庆"];
});
</script>
</body>
</html>

AngularJS 基础-根作用域

所有的应用都有一个 $rootScope，它可以作用在ng-app 指令包含的所有 HTML 元素中。Angular 应用启动并生成视图时，会将根 ng-app 元素与 $roo tS co p e 进行绑定，$ rootScope 是所有 $scope 的最上层对象，可以理解为一个 Angular 应用中得全局作用域对象，所以为它附加太多逻辑或者变量并不是一个好主意，和污染 Javascript 全局作用域是一样的。

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

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用，

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> $rootScope 在循环对象内外都可以访问</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 姓成员:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["一", "二", "三"];
    $rootScope.lastname = "王";
});
</script>
</body>
</html>

AngularJS 基础-控制器方法

AngularJS 控制器控制 AngularJS 应用程序的数据，ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

eg. ng-controller=“personCtrl” 属性是一个 AngularJS 指令，用于定义一个控制器。personCtrl 函数是一个 JavaScript 函数。AngularJS 使用$scope 对象来调用控制器。

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

<!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="myApp" ng-controller="personCtrl">
姓名: <input type="text" ng-model="Name"><br>
编号: <input type="text" ng-model="Code"><br>
<br>
奥运选手: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.Name = "杜丽";
    $scope.Code = "cn001";
    $scope.fullName = function() {
        return $scope.Name + " " + $scope.Code;
    }
});
</script>
</body>
</html>

外部文件中的控制器

在项目较为复杂的应用程序中，通常是把控制器存储在外部文件中，为了方便管理。使用外部或者远程控制器personController.js 时，只需要通过

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="myApp" xuexuexi-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("xuexuexiDirective", function() {
    return {
        template : "自定义指令：xuexuexiDirective!"
    };
});
</script>
</body>
</html>

AngularJS 控件

ng-options指令与ng-repeat指令

在 AngularJS 中我们可以使用 ng-options 指令来创建一个下拉列表，列表项通过对象和数组循环输出。

示例：

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["中国", "俄罗斯", "美国", "法国", "英国"];
});
</script>

AngularJS 控件-数据源为对象

数据对象

AngularJS可以使用数组作为数据源，也可以把数据对象作为数据源。

示例：使用对象作为数据源, x 为键(key), y 为值(value)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="row">
        <div class="col-md-8">

             <label class="col-md-4">您的选择是: {{ engineer.currentActivityId}}</label>
        </div>
        <div class="col-md-8">
             <label class="col-md-1">选择:</label>
             <!--在此编写代码-->
             <select class="col-md-4" ng-model = "engineer.currentActivityId" ng-options = "a.id as a.name group by a.type for a in activities" >               
            </select >


        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 currentActivityId: 2
             };
         
             $scope.activities =
             [   
				{ id: 1, type: "WEB前端开发" , name: "PHP" },
                 { id: 2, type: "WEB前端开发" , name: "HTML5" },
                 { id: 3, type: "企业软件开发" , name: "JAVA" },
                 { id: 4, type: "企业软件开发" , name: ".NET" }

             ];
         }]);
    </script>
</body>
</html>

在表格中显示数据

使用ng-repeat 指令可以显示表格。

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }

        table tr:nth-child(odd) {
            background-color: #f1f1f1;
        }

        table tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <table>
            <tr ng-repeat="x in names">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {
            $scope.names = [{
                    "Name": "MengxueZhang",
                    "City": "Jinan",
                    "Country": "China"
                },
                {
                    "Name": "Yangsun",
                    "City": "Hangzhou",
                    "Country": "China"
                },
                {
                    "Name": "YanmeiXiang",
                    "City": "Baojing",
                    "Country": "China"
                }
            ];
        });
    </script>
</body>

AngularJS 控件- orderBy 过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd)	{
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<table>
	 <tr>
    <td>姓名</td>
    <td>身高</td>
  	</tr>
 <!--在此编写代码-->
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'老胡', height:'190'},
        {name:'老张',height:'174'},
        {name:'老韩',height:'175'},
		{name:'老马',height:'176'},
        {name:'老丁',height:'171'},
        {name:'老姜',height:'185'}
    ];
})
</script>


</body>
</html>

显示序号

表格显示序号可以在中添加 $index

使用 $index可以显示序号。

示例：

$e v e n 和$ odd

even表示奇数，odd表示偶数，使用 $e v e n 和$ odd控制表格奇偶项：

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        table,
        td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <table>
            <tr ng-repeat="x in names">
                <td ng-if="$odd" style="background-color:#f1f1f1">
                    {{ x.Name }}</td>
                <td ng-if="$even">
                    {{ x.Name }}</td>
                <td ng-if="$odd" style="background-color:#f1f1f1">
                    {{ x.Country }}</td>
                <td ng-if="$even">
                    {{ x.Country }}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {

            $scope.names = [{
                    "Name": "MengxueZhang",
                    "City": "Jinan",
                    "Country": "China"
                },
                {
                    "Name": "Yangsun",
                    "City": "Hangzhou",
                    "Country": "China"
                },
                {
                    "Name": "YanmeiXiang",
                    "City": "Baojing",
                    "Country": "China"
                }
            ];

        });
    </script>
</body>

</html>

使用 $e v e n 和$ odd控制表格的背景颜色并且输出序号。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<table>

 <tr ng-repeat="x in names">

                <td ng-if="$odd" style="background-color:lightblue">
                    {{ $index + 1}}</td>
                <td ng-if="$even" >
                    {{ $index + 1}}</td>
                <td ng-if="$odd" style="background-color:lightgreen">
                    {{ x.name }}</td>
                <td ng-if="$even">
                    {{ x.name }}</td>
                <td ng-if="$odd"style="background-color:lightyellow" >
                    {{ x.height }}</td>
                <td ng-if="$even">
                    {{ x.height }}</td>
            </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'老胡', height:'190'},
        {name:'老张',height:'174'},
        {name:'老韩',height:'175'},
		    {name:'老马',height:'176'},
        {name:'老丁',height:'171'},
        {name:'老姜',height:'185'}
    ];
})
</script>

</body>
</html>

AngularJS 服务

AngularJS 服务-$http 服务

服务这个概念其实并不陌生，在其它语言中便有这样的概念（如java），其作用就是对外提供某个特定的功能，如消息服务，文件压缩服务等，是一个独立的模块。它是一个单例对象或函数，对外提供特定的功能。

在AngularJS中有很多的服务，常用的比如http,location等等。

$http的使用:

$http用于发送http请求，动态的请求数据。这样就需要使用web容器来运行代码了，先看看程序源码，视图方面还是跟普通的代码相同：

1）创建一个无序列表，循环输出请求到的数据。

<div ng-controller="myAppCtrl">
            <ul>
                <li ng-repeat="user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>

2）在js中，创建一个模板，在模板上创建控制器。

<script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);
            myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){
                $http({
                    method:'GET',
                    url:'data.json'
                }).success(function(data,status,headers,config){
                    console.log("success!...");
                    console.log(data);
                    $scope.users = data;
                }).error(function(data,status,headers,config){
                    console.log("error!...");
                });
            }]);
        </script>

该控制器比前面提到的控制器多了一个注入的参数$http，添加了这个参数，就可以在方法内部直接调用。

采用如下的格式：

$http({
　　method:'GET',//http请求的类型
　　url:'data.json'//请求的地址
}).success(function(data,status,headers,config){
　　//成功了，怎么做
}).error(function(data,status,headers,config){
　　//失败了，怎么做
});

3）接下来需要在代码相同的路径下，创建data.json文件

[{
    "name":"test1"
},{
    "name":"test2"
},{
    "name":"test3"
}]

利用web容器，访问结果如下：

$location 服务

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

示例：

<!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="myApp" ng-controller="myCtrl">
<p> 获取当前url地址:</p>
<h3>{{myUrl}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>

$location 服务是作为一个参数传递到 controller 中。

$timeout服务

AngularJS中的 $t im eo u t 服务和 ja v a scr i pt 中原生的 se tT im eo u t () 以及 se t I n t er v a l () 函数类似，但 A n gu l a r J S 中的$ timeout()函数会返回一个promise。

例如：实现如图效果

<!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="myApp" ng-controller="myCtrl"> 
<p>10秒后将变化:</p>
<h1>{{myHeader}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "巴西世界杯!";
  $timeout(function () {
      $scope.myHeader = "里约奥运会！";
  }, 10000);
});
</script>
</body>
</html>

$interval

AngularJS 中的$interval 服务和JavaScript中的 window.setInterval 函数类似，实现周期性调用。

示例：

<!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="myApp" ng-controller="myCtrl"> 
<p>时钟:</p>
<h2>{{theTime}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>
</body>
</html>

自定义服务

AngularJS除了使用内置服务之外，你可以创建自己的Service服务。创建服务可以通过三种方式：factory、provider和service，但是它们的本质都是Provider，只是封装了不同的写法而已。

下面采用factory的形式：

1）先创建一个模块，在模块的基础上创建一个Service：

 var myAppModule = angular.module("myApp",[]);
            myAppModule.factory('myService',['$http',function($http){
                var doRequest = function(username){
                    return $http({
                        method:'GET',
                        url:'data.json'
                    });
                }
                return {
                    userList:function(username){
                        return doRequest(username);
                    }
                }
            }]);

代码分析：

这个Service需要注入一个属性 $http ，在方法内部，返回的值是一个对外提供的方法，userList。外部可以通过 userList(username) 的方式，进行调用。

真正的实现部分放在 doRequest 中，内部就是典型的一个AngularJS的$http请求了，请求会返回url相应的数据。

2）然后看一下外部如何使用，先看看视图部分：

<div ng-controller="myAppCtrl">
            <label>username</label>
            <input type="text" ng-model="username" placeholder="输入"/>
            <pre ng-show="username">
                {{users}}
            </pre>
        </div>

该部分是一个输入框input和一个代码框pre，它们共同使用了一个变量username。当username有值时，会在下面展示users对应的内容。

myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
                function($scope,$timeout,myService){
                    var timeout;
                    $scope.$watch('username',function(newUserName){
                        console.log("您输入了："+newUserName);
                        if(newUserName){
                            if(timeout){
                                $timeout.cancel(timeout);
                            }
                            timeout = $timeout(function(){
                                myService.userList(newUserName).success(function(data){
                                    console.log(data);
                                    $scope.users = data;
                                });
                            },350);
                        }
                    });
                }
            ]);

在对应的控制器中，采用了$watch这种监控方法，监控username属性的变化。当username属性变化时，会触发请求方法。

控制器多注入了一个 $t im eo u t 变量，该变量用于控制输入的时间。代码观察$ timeout(function(…),350)；当输入的间隔超过350ms时，就会触发相应函数function(…)。这样可以有效的防止，不停的刷新请求，造成网页的刷新抖动。

在函数内部，调用了我们自己的服务提供的userList方法。当请求成功时，绑定返回值到users中。users会动态的刷新内容。

3）data.json数据：

[{
    "name":"test1"
},{
    "name":"test2"
},{
    "name":"test3"
}]

4）完整代码：

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
        <div ng-controller="myAppCtrl">
            <label>username</label>
            <input type="text" ng-model="username" placeholder="输入"/>
            <pre ng-show="username">
                {{users}}
            </pre>
        </div>
        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);
            myAppModule.factory('myService',['$http',function($http){
                var doRequest = function(){
                    return $http({
                        method:'GET',
                        url:'data.json'
                    });
                }
                return {
                    userList:function(){
                        return doRequest();
                    }
                }
            }]);
            myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
                function($scope,$timeout,myService){
                    var timeout;
                    $scope.$watch('username',function(newUserName){
                        console.log("您输入了："+newUserName);
                        if(newUserName){
                            if(timeout){
                                $timeout.cancel(timeout);
                            }
                            timeout = $timeout(function(){
                                myService.userList().success(function(data){
                                    console.log(data);
                                    $scope.users = data;
                                });
                            },350);
                        }
                    });
                }
            ]);
        </script>
    </body>
</html>

全局API

angular.lowercase()转换字符串为小写

<!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="myApp" ng-controller="myCtrl">
        <p>{{ one }}</p>
        <p>{{ two }}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.one = "IFLYSSE";
            $scope.two = angular.lowercase($scope.one);
        });
    </script>
</body>

</html>

angular.uppercase()实现转换字符串为大写

全局API函数angular.isNumber()判断给定的对象是否为数字，如果是返回 true。

全局API函数angular.isString()判断给定的对象是否为字符串，如果是返回 true。

AngularJS 依赖注入

依赖注入介绍

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

AngularJS中的依赖注入非常的有用，它同时也是我们能够轻松对组件进行测试的关键所在。

AngularJS 提供很好的依赖注入机制，以下5个核心组件用来作为依赖注入：value、factory、service、provider、constant。

要实现注入，基本有三步：

①得到模块的依赖项

②查找依赖项所对应的对象

③执行时注入

创建value 对象

Value值是简单的JavaScript对象，使用一个值定义服务，这个值就是服务实例。

定义一个模块

var mainApp = angular.module("mainApp", []);

创建 value 对象 “defaultInput” 并传递数据

mainApp.value("defaultInput", 5);

将 “defaultInput” 注入到控制器

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

<!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="myApp" ng-controller="myCtrl">
        <p>{{ result }}</p>
    </div>
    <script>
        var mainApp = angular.module('myApp', []);
        
        mainApp.value("defaultInput", 5);

        mainApp.controller('myCtrl', function ($scope, defaultInput) {
            $scope.number = defaultInput;

            $scope.result = $scope.number;

        });
    </script>
</body>

</html>

factory工厂

工厂是用于返回函数的值。每当一个服务或控制器需要它会根据需求创造值。它通常使用一个工厂函数来计算并返回对应值。

定义一个模块

var mainApp = angular.module("mainApp", []);

创建 factory “MathService” 用于两数的乘积

mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
});

在 service 中注入 factory “MathService”

mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

<!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="mainApp" ng-controller="myCtrl">
        <p>{{ result }}</p>
    </div>
    <script>
        var mainApp = angular.module('mainApp', []);

        mainApp.factory('MathService', function () {
            var factory = {};

            factory.multiply = function (a, b) {
                return a * b
            }
            return factory;
        });

        mainApp.controller('myCtrl', function ($scope, MathService) {

            $scope.result =  MathService.multiply(2,4);

        });
    </script>
</body>

</html>

service服务

服务是一个单一的JavaScript，它包含了一组函数对象来执行某些任务。服务使用service()函数，然后注入到控制器的定义。

定义一个模块

var mainApp = angular.module('mainApp', []);

创建 factory “MathService” 用于两数的乘积

mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
});

在 service 中注入 factory “MathService”

mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

将"CalcService"注入到控制器

mainApp.controller('myCtrl', function ($scope, CalcService) {
 
$scope.result = CalcService.square(4);
      });

<!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="mainApp" ng-controller="myCtrl">
        <p>{{ result }}</p>
    </div>
    <script>
        var mainApp = angular.module('mainApp', []);

        mainApp.factory('MathService', function () {
            var factory = {};

            factory.multiply = function (a, b) {
                return a * b
            }
            return factory;
        });

        mainApp.service('CalcService', function (MathService) {
            this.square = function (a) {
                return MathService.multiply(a, a);
            }
        });

        mainApp.controller('myCtrl', function ($scope, CalcService) {

            $scope.result = CalcService.square(4);

        });
    </script>
</body>

</html>

provider提供者与constant常量

提供者所使用的AngularJS内部创建过程中配置阶段的服务，工厂等。下面提到的脚本，可以用来创建，我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及get()方法，用来返回值/服务/工厂。

定义一个模块

var mainApp = angular.module("mainApp", []);

用provider创建返回一个数的平方的服务

mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

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

constant(name,value)可以将一个已经存在的变量值注册为服务，并将其注入到应用的其他部分中。其中，name为注册的常量的名字，value为注册的常量的值或对象。

value（7.2节）和constant区别：

1.value不可以在config里注入，但是constant可以

2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要经

常使用的数据。

<!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="mainApp" ng-controller="myCtrl">
        <p>{{ result }}</p>
    </div>
    
    <script>
        var mainApp = angular.module('mainApp', []);

        mainApp.config(function ($provide, configParam) {
            $provide.provider('MathService', function () {
                this.$get = function () {
                    var factory = {};
                    factory.multiply = function (a) {
                        return a * configParam;
                    }
                    return factory;
                };
            });
        });

        mainApp.constant("configParam", 5);


        mainApp.controller('myCtrl', function ($scope, MathService) {

            $scope.result = MathService.multiply(5);

        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
      <title>依赖注入实例</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
   </head>   
   <body>
      <h3>依赖注入</h3>     
      <div ng-app = "mainApp" ng-controller = "CalcController">

        <p>输入一个数字: <input type = "number" ng-model = "number" />
         <button ng-click = "square()">X<sup>2</sup></button>=
         <input type="text" value="{{result}}" />
         </p>

      </div>      
      <script>
         var mainApp = angular.module("mainApp", []);        
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });			
         mainApp.value("defaultInput", 10);         
         mainApp.factory('MathService', function() {
            var factory = {};            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });         
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });         
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });			
      </script>     
   </body>
</html>

AngularJS 路由

AngularJS实现单页应用

（了解）angular.module函数

模块是应用程序中不同部分的容器。在深入AngularJS的模块之前，我们需要先了解一下Angular的一些基础知识。AngularJS是客户端技术，完全用JavaScript编写的，学习目的是让网页应用开发更快更容易。AngularJS简化应用开发的一个重要方法是，将一些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作，它们包括：

1）DOM操作

2）设置事件的监听

3）输入验证

在AngularJS简化开发的同时，它也为客户端带来了一些精巧的技术，它们包括：

1）数据、业务逻辑、视图的分离

2）数据和视图的自动绑定

3）通用服务

4）依赖注入

5）可扩展的HTML编译器(完全由JavaScript编写)

6）易于测试

同时，还可以用AngularJS来开发单页或者多页的应用，不过其主要还是用来开发单页的。 AngularJS支持浏览器的历史操作，向前，向后按钮，单页应用中的收藏操作。

模块定义了一个应用程序。大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法，而是使用模块来声明应用应该如何启动。

你可以通过 AngularJS 的 angular.module函数来创建模块，例如：

单页应用的介绍

单页应用，就是只有一张Web页面的应用。单页应用程序是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

特点

＊速度：更好的用户体验，让用户在web app感受native app的速度和流畅，

＊MVC：经典MVVM（即Model-View-ViewModel）开发模式，前后端各负其责。

＊Ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

＊路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

多页应用和单页应用模式的区别

单页模式打开方式：justep.shell.showpage();

多页模式打开方式：window.loacation.href = require.tourl();

单页应用的优缺点

单页Web程序的出现是富客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。

1、优点：

1). 良好的交互体验

用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。

2). 良好的前后端工作分离模式

单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。

3). 减轻服务器压力

服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

4). 共用一套后端程序代码

不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；

2、缺点：

1). SEO（全称是Search Engine Optimization，搜索引擎优化）难度较高

由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。

2). 前进、后退管理

由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。

3). 初次加载耗时多

为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。

你需要知道的：

AngularJS是一个 MVC 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。

如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了。

AngularJS 路由 routing，能够从页面的一个视图跳转到另外一个视图，对单页面应用来讲是至关重要的。当应用变得越来越复杂时，我们需要一个合理的方式来管理用户在使用过程中看到的界面。AngularJS的做法是将视图分解成布局和模板视图，并且根据用户当前访问的URL来展示对应的视图。

路由结构

路由结构模板：

<script>
    angular.module('app', [])
        .config('$routeProvider', function ($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'view/home.html',
                    controller: 'homeCtrl'
                })
                .when('/', {
                    templateUrl: 'view/home.html',
                    controller: 'homeCtrl'
                })
                .when('/', {
                    templateUrl: 'view/home.html',
                    controller: 'homeCtrl'
                })
                .ontherwise({
                    redirective: '/'
                })
        })
</script>

config函数是一个配置函数，再使用$routeProvider这样的一个服务。

when：代表当你访问这个“/”根目录的时候去访问 templateUrl中的那个模板。

controller可想已知，就是我们配套的controller，就是应用于根目录的这个模板时的controller。

ontherwise 就是当你路径访问错误时，如果找不到。最后跳到这个默认的页面。

一般在我们的index.html会有这么的一段代码：

<body ng-app='routingDemoApp'>
 
    <div ng-view></div>
 
</body>

<div ng-view></div>，

就是我们注入的某个模板（template）例如：

就相当于注入叫做abc.html的模板。ng-view这个指令优先级是1000的终极指令，就是说权限很高。

在注入这个abc.html的模板的时候。我们一般都用了路由设置，路由相当于一个遥控器。这个ng-view就是一部电视机。如果某个模板同当前的路由相关联：

  1 创建一个新的作用域；(用路由（遥控器）打开某个电视台)

  2 移除上一个视图，同时上一个作用域也会被清除；（换台，什么都没了）

  3 将新的作用域同当前模板关联在一起；（电视机播放新的电视台）

  4 如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；

  5 触发$viewContentLoaded事件；（判断页面是否渲染完成）

   6 如果提供了onload属性，调用该属性所指定的函数。

<!DOCTYPE html>
<html>
<head>
    	<meta charset="utf-8">
        <title>AngularJS 路由</title>
	    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h3>AngularJS 路由实例</h3>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/php">PHP</a></li>
            <li><a href="#/seo">SEO</a></li>
            <li><a href="#/h5">H5</a></li>
        </ul>
    
         
        <div ng-view></div>

        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'网站首页'})
                .when('/php',{template:'开发WEB最好的语言'})
                .when('/seo',{template:'搜索引擎优化'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
    </body>
</html>

$stateProvider

angular.module('app',[])
.config(function($stateProvider){
$stateProvider.state(stateName, stateCofig);
})

＊ $stateProvider.state

在$stateProvider.state(stateName, stateConfig)中，

stateName是string类型，stateConfig是object类型。

//statConfig可以为空对象

$stateProvider.state(“home”,{});

//state可以有子父级

$stateProvider.state(“home”,{});

$stateProvider.state(“home.child”,{})

//state可以是链式的

$stateProvider.state(“home”,{}).state(“about”,{}).state(“photos”,{});

stateConfig包含的字段：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data。

＊ $state.go

在$state.go(to, [,toParams],[,options])中，

形参to是string类型，必须，使用"^“或”."表示相对路径；

形参toParams可空，类型是对象；

形参options可空，类型是对象，字段包括：location为bool类型默认true,inherit为bool类型默认true, relative为对象默认 $s t a t e .$ current,notify为bool类型默认为true, reload为bool类型默认为false。

$state.go(‘photos.detail’)

$state.go(‘^’)到上一级,比如从photo.detail到photo

$state.go(‘^.list’)到相邻state,比如从photo.detail到photo.list

$state.go(‘^.detail.comment’)到孙子级state，比如从photo.detail到photo.detial.comment

路由配置对象

$routeProvider

config：函数是一个配置函数，再使用$routeProvider这样的一个服务。

when：代表当你访问这个“/”根目录的时候去访问 templateUrl中的那个模板。

controller：可想已知，就是我们配套的controller，就是应用于根目录的这个模板时的controller。

otherwise：就是当你路径访问错误时，如果找不到。最后跳到这个默认的页面。

，就是我们注入的某个模板（template）例如：

就相当于注入叫做abc.html的模板。ng-view这个指令优先级是1000的终极指令，就是说权限很高。

在注入这个abc.html的模板的时候。我们一般都用了路由设置，路由相当于一个遥控器。这个ng-view就是一部电视机。如果某个模板同当前的路由相关联：

1 创建一个新的作用域；(用路由（遥控器）打开某个电视台)

2 移除上一个视图，同时上一个作用域也会被清除；（换台，什么都没了）

3 将新的作用域同当前模板关联在一起；（电视机播放新的电视台）

4 如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；

5 触发$viewContentLoaded事件；（判断页面是否渲染完成）

6 如果提供了onload属性，调用该属性所指定的函数。

路由配置对象

AngularJS 路由也可以通过不同的模板来实现。$routeProvider.when() 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

controllerAs为controller指定别名。

redirectTo设定重定向的地址。

resolve，指定当前controller所依赖的其他模块。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>路由配置对象</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script type="text/javascript">
        angular.module('ngRouteExample', ['ngRoute'])
            .controller('HomeController', function ($scope) {
                $scope.$route = $route;
            })
            .controller('AboutController', function ($scope) {
                $scope.$route = $route;
            })
            .config(function ($routeProvider) {
                $routeProvider.
                when('/home', {
                    templateUrl: 'embedded.home.html',
                    controller: 'HomeController'
                }).
                when('/about', {
                    templateUrl: 'embedded.about.html',
                    controller: 'AboutController'
                });
            });
    </script>

</head>

<body ng-app="ngRouteExample" class="ng-scope">
    <script type="text/ng-template" id="embedded.home.html">
        <h1> 首页 </h1>
    </script>
    <script type="text/ng-template" id="embedded.about.html">
        <h1>关于我们 </h1>
    </script>
    <div>
        <div id="navigation">
            <a href="#/home">首页</a>
            <a href="#/about">关于我们</a>
        </div>

        <div ng-view="">
        </div>
    </div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PpLbLHam-1672105120199)(C:\Users\maker\AppData\Roaming\Typora\typora-user-images\image-20221226161945454.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ELHriv2-1672105120199)(C:\Users\maker\AppData\Roaming\Typora\typora-user-images\image-20221226161956015.png)]

eg.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="#/b">click b</a></li>
        </ul>

        <ng-view></ng-view>
    </div>
    <script type="text/javascript">
    angular.module("myApp",["ngRoute"])
    .controller("aController",function($scope,$route){
        $scope.hello = "hello,a!";
    })
    .controller("bController",function($scope){
        $scope.hello = "hello,b!";
    })
    .controller("myCtrl",function($scope,$location){

        $scope.$on("$viewContentLoaded",function(){
            console.log("ng-view content loaded!");
        });

        $scope.$on("$routeChangeStart",function 
(event,next,current){
            //event.preventDefault(); //cancel url change
            console.log("route change start!");
        });
    })
    .config(function($routeProvider, $locationProvider) {
          $routeProvider
           .when('/a', {
            templateUrl: 'a.html',
            controller: 'aController'
          })
        .when('/b', {
            templateUrl: 'b.html',
            controller: 'bController',
            resolve: {
                  // I will cause a 1 second delay
                  delay: function($q, $timeout) {
                    var delay = $q.defer();
                    $timeout(delay.resolve, 1000);
                    return delay.promise;
                  }
            }
        })
        .otherwise({
            redirectTo: '/a'
          });
    });
    </script>
</body>
</html>

 <a.html> 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
  <div ng-controller="aController" style="height:300px;width:100%;background-color:green;">
    {{hello}}
</div>
</body>
</html>



 <b.html> 
 <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
  <div ng-controller="bController" style="height:300px;width:100%;background-color:blue;">
    {{hello}}
</div>
</body>
</html>

g-PpLbLHam-1672105120199)]

[外链图片转存中…(img-0ELHriv2-1672105120199)]

eg.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="#/b">click b</a></li>
        </ul>

        <ng-view></ng-view>
    </div>
    <script type="text/javascript">
    angular.module("myApp",["ngRoute"])
    .controller("aController",function($scope,$route){
        $scope.hello = "hello,a!";
    })
    .controller("bController",function($scope){
        $scope.hello = "hello,b!";
    })
    .controller("myCtrl",function($scope,$location){

        $scope.$on("$viewContentLoaded",function(){
            console.log("ng-view content loaded!");
        });

        $scope.$on("$routeChangeStart",function 
(event,next,current){
            //event.preventDefault(); //cancel url change
            console.log("route change start!");
        });
    })
    .config(function($routeProvider, $locationProvider) {
          $routeProvider
           .when('/a', {
            templateUrl: 'a.html',
            controller: 'aController'
          })
        .when('/b', {
            templateUrl: 'b.html',
            controller: 'bController',
            resolve: {
                  // I will cause a 1 second delay
                  delay: function($q, $timeout) {
                    var delay = $q.defer();
                    $timeout(delay.resolve, 1000);
                    return delay.promise;
                  }
            }
        })
        .otherwise({
            redirectTo: '/a'
          });
    });
    </script>
</body>
</html>

 <a.html> 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
  <div ng-controller="aController" style="height:300px;width:100%;background-color:green;">
    {{hello}}
</div>
</body>
</html>



 <b.html> 
 <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
  <div ng-controller="bController" style="height:300px;width:100%;background-color:blue;">
    {{hello}}
</div>
</body>
</html>