AngularJS快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>
<body>
    <div ng-app>
        <h1>{{1+2}}</h1>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    /* 打印window.angular对象 */
    console.log(angular);
</script>
</html>

ng-controller

代表声明AngularJS的控制管理的区域，这个指令可以在页面上使用多个。视图层

ng-init

注意：angularJS插值表达式算术运算中不支持++和--，不支持js内置的函数例如Math.random()等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>

<body>
    <!-- ng-init声明一个变量 -->
     <!-- 注意ng-init不建议使用，AngularJS严格的MVC模式，不允许在HTML中声明变量 -->
    <div ng-app ng-init="name='张三'">
        <h1>{{1+2}}</h1>
        <h1>{{name}}</h1>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
   
</script>

</html>

MVC开发模式

M：model代表是模型数据，在前端项目里面的表现就是变量，一般称为模型变量
V：view代表视图，其实就是页面的HTML代码，更准确的说就是某个DOM区域，主要是负责做数据的展示和数据的收集
C：controller代表是一个控制器，就是协调工作，来协调视图和模型之间的关系

语法

要使用AngularJS提供的一个全局对象，angular.module("myApp",[]);

定义模型

第一个参数：代表AngularJS这个应用的名称，也叫做模块的名称，名称可以随意，但一般都存在含义，参数的命令一般使用小驼峰的方式进行命名
第二个参数：代表当前这个应用所依赖的模块，例如我们需要其他的模块进行开发cookie，如果是要依赖多个模块，写在数组里面。所有的AngularJS都要依赖一个必不可少的模块AngularJS的主模块，使用ng参数表示，由于这个ng模块是必不可少的，angularJS也会默认帮我们引入，我们可以不写，如果不写。这个数组即使是空的，也要保留
在页面上定义一个启动的入口，使用ng-app参数是我们定义的模块的名称

定义控制器

第一个参数：代表是控制器的名称，一般使用大驼峰的方式进行声明
在页面使用一个ng-controller指令申明该控制器管理的区域
需要在控制器里面给视图暴露数据。需要使用angularJS提供一种设计模式（依赖注入给控制器的第二个参数声明同一个$scope参数，并且该参数只能叫这个名称，因为AngularJS是通过严格的参数的名称来查询对应的注入对象
$scope对象，向页面上的视图里面暴露数据，一般这个数据被称为模型变量，到时候我们可以在试图里面直接使用该模型变量，在当前控制器里面使用的的模型变量，只能在当前的控制器区域范围使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mvc</title>
</head>

<body>
    <!-- ng-init声明一个变量 -->
    <div ng-app="myApp">
        <h1>Angular的第一个特性：MVC学习</h1>
        <div ng-controller="myCtrl">
            <h1>{{name}}</h1>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    /* 要使用AngularJS提供的一个全局对象，angular.module("myApp",[]);
        1. 第一个参数：代表AngularJS这个应用的名称，也叫做模块的名称，
        名称可以随意，但一般都存在含义，参数的命令一般使用小驼峰的方式进行命名
        2. 第二个参数：代表当前这个应用所依赖的模块，
        例如我们需要其他的模块进行开发cookie，如果是要依赖多个模块，写在数组里面。
        所有的AngularJS都要依赖一个必不可少的模块AngularJS的主模块，使用ng参数表示，
        由于这个ng模块是必不可少的，angularJS也会默认帮我们引入，
        我们可以不写，如果不写。这个数组即使是空的，也要保留
        3. 在页面上定义一个启动的入口，使用ng-app参数是我们定义的模块的名称
 */
  var app = angular.module('myApp', []);
  /* 
    1. 第一个参数：代表是控制器的名称，一般使用大驼峰的方式进行声明
    2. 在页面使用一个ng-controller指令申明该控制器管理的区域
    3. 需要在控制器里面 给视图暴露数据。需要使用angularJS提供一种设计模式
    （依赖注入给控制器的第二个参数声明同一个$scope参数，并且该参数只能叫这个名称，因为AngularJS是通过严格的参数的名称来查询对应的注入对象
    4. $scope对象，向页面上的视图里面暴露数据，一般这个数据被称为模型变量，
    到时候我们可以在试图里面直接使用该模型变量，在当前控制器里面使用的的模型变量，只能在当前的控制器区域范围使用
  */
   app.controller('myCtrl', function ($scope) {
        $scope.name = '张三';
    });
</script>

</html>

模型数据展示

ng-repeat：遍历数组与对象

遍历数组并展示数组下标：$index

注意：如果数组中有重复属性，需要加track by $index

  //$index获取下标
<li ng-repeat="user in users" >
       {{$index}}{{user}}
  </li>

遍历对象(key,value) in obj

 <!-- 对象遍历，包括属性名 -->
<li ng-repeat="(key,value) in user">
  {{key}}:{{value}}
</li>

 <!-- 只包含属性值 -->
<li ng-repeat="x in user">
                {{x}}
</li>

filter：过滤器

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

date时间过滤器

{{time | date：'yyyy-MM-dd'}}

limitTo截断过滤器

limitTo:count:start，第一个参数表示截取多少个，第二个参数表示从第几个字符开始

{{str | limitTo:10}}

orderBy排序过滤器

orderBy:排序字段：true（升/降序）

//按年龄升序排序
<li ng-repeat="x in users | orderBy:age:true">
                {{x}}
</li>

filter其他过滤器

会去当前记录的字段里面查找满足条件的字段，存在就显示。一般结合搜索来使用。

注意：如果filter后面只跟一个值，则angular会将对象中所有属性依次遍历来匹配。如果要指定匹配过滤指定的字段，则需要在filter后跟一个对象，对象中添加字段名和过滤条件

<!-- 过滤todo中completed字段，条件是keyword的值 -->
<li ng-repeat="todo in todoList | filter:{completed:keyword}" >
</li>

自定义过滤器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
  return function(text) {
    return text.split("").reverse().join("");
  }
});

页面交互

ng-model

数据双向绑定

ng-model将数据绑定到$scope模型中

数据双向绑定原理/angularJS性能问题

双向绑定原理（脏检测）

页面上存在AngularJS的应用，分析页面上的{{}}或者是指令分析完成后，则会在AngularJS内部维持一个$digest队列（先进先出），每个{{}}，或指令都会在队列中开辟一个空间，存入对应的fn回调函数。
当$scope模型变量中的某个值发生改变，则AngularJS会去遍历当前的$digeest队列，查看每个回调是否使用到当前模型变量中的值，如果使用到就更新为最新的。遍历完成后会再次遍历查看对比是否都已经更新。只要发生变化，都会去遍历，连续遍历10次还没有温度下来，则马上报错。

angularJS性能问题

如果$digest 队列的数量在2000个以内，一般是没有问题，如过太多，则会遍历出现性能问题。如果页面数据相互应用，不断变化，超过10次遍历都没有稳定下来，则会立马报错。

需要了解ng-model来收集 checkbox的值是什么?值是boolean 选择 true 否则为 false

需要了解ng-model 来收集radio的值是什么?值是对应的radio的value值

需要了解ng-model 来收集select的值是什么?值是对应的option的value值

验证用户输入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>
</html>

获取应用状态值

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

</body>
</html>

根据状态动态CSS

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

ng-valid: 验证通过
ng-invalid: 验证失败
ng-valid-[key]: 由$setValidity添加的所有验证通过的值
ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
ng-pristine: 控件为初始状态
ng-dirty: 控件输入值已变更
ng-touched: 控件已失去焦点
ng-untouched: 控件未失去焦点
ng-pending: 任何为满足$asyncValidators的情况

<style>
  input.ng-invalid {    
    background-color: lightblue;
	}
</style>
<body>
  <form ng-app="" name="myForm">    
		输入你的名字:    
	<input name="myAddress" ng-model="text" required>
  </form>

$watch监听模型变量的变化

$watch可以检测模型变量的变化，如果模型变量发生了改变，$watch定义的回调马上执行；

注意：$watch只能检测模型变量

回调函数的参数：第一个参数，代表是最新的值，第二个参数代表是破旧的值，没有变化之前的值，并且该函数会在定义过后默认被调用一次，如果后续用户在视图修改了模型变量。则也会触发回调函数执行。

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <p>
                <input type="text" ng-model="contentText">
            </p>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    angular
        .module('myApp', [])
        .controller('myCtrl', function ($scope) {
            $scope.contentText='';
            $scope.$watch('contentText',(newValue,oldValue)=>{
                console.log(newValue,oldValue);
            })
        });
</script>

$wach监视一个复合数据类型：在angularJS中通过$watch监视一个复合数据类型，则需要给$watch设置第三个参数为true代表检测复合数据类型的变化

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <p>
                <input type="number" ng-model="user.age">
            </p>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<script>
    angular
        .module('myApp', [])
        .controller('myCtrl', function ($scope) {
            $scope.user={
                name:'张三',
                age:18
            };
            $scope.$watch('user',(newValue,oldValue)=>{
                console.log(newValue,oldValue);
            },true)
        });
</script>

ng-bind：数据单向绑定

ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

ng-click：绑定单击事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mvc</title>
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <form action="" method="post" enctype="multipart/form-data">
                <p>
                    用户名：<input type="text" ng-model="name">
                </p>
                <p>
                    密 码：<input type="password" ng-model="password">
                </p>
                <p>
                    <input type="button" value="提交" ng-click="submit()">
                </p>
            </form>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    angular
    .module('myApp', [])
    .controller('myCtrl', function ($scope) {
        /* 初始化数据 */
       $scope.name='';
       $scope.password='';
        /* 单击事件 */
       $scope.submit = function () {
            alert('用户名：' + $scope.name + '密码：' + $scope.password);
        }
    });
</script>

</html>

ng-options：创建选择框

Angular可以使用数组或对象创建一个下拉列表选项

ng-init 设置默认选中值
ng-model 选中的值
ng-options 遍历的数组或对象

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <form action="" name="myForm" method="post" enctype="multipart/form-data">
                <!-- ng-init = 默认选择的值 -->
               <select ng-init="choseName=names[0]" ng-model="choseName" ng-options="name for name in names">
               </select>
               <p>
                   {{choseName}}
               </p>
            </form>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    angular
        .module('myApp', [])
        .controller('myCtrl', function ($scope) {
            /* 初始化数据 */
            $scope.names = ['张三','李四','王五'];
        });
</script>

ng-repeat：展示表格

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <div style="margin-bottom: 10px;">
                <input type="text" ng-model="search" placeholder="请输入关键字" >
                </input>
            </div>
          <table>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>操作</th>
            </tr>
            <tr ng-repeat="user in users | orderBy:'age' | filter:search ">
                <td>{{$index+1}}</td>
               <td>{{user.name}}</td>
               <td ng-if="$even" style="background-color: antiquewhite;">{{user.age}}</td>
               <td ng-if="$odd" style="background-color: aquamarine;">{{user.age}}</td>
               <td>{{user.sex}}</td>
               <td>{{user.address | uppercase}}</td>
               <td><button style="background-color: red;color: white;border: solid 1px #0000;" ng-click="del(user)">删除</button>
                   <button style="background-color: skyblue;color: white;border: solid 1px #0000;" ng-click="del(user)">修改</button>
            </td>
            </tr>
          </table>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    angular
        .module('myApp', [])
        .controller('myCtrl', function ($scope) {
            /* 初始化数据 */
            $scope.users = [
                {
                    name: '张三',
                    age: 21,
                    sex: '男',
                    address: 'beijing'
                }, {
                    name: '李四',
                    age: 19,
                    sex: '女',
                    address: 'shanghai'
                }, {
                    name: '王五',
                    age: 20,
                    sex: '男',
                    address: 'guangzhou'
                }
            ];
        });
</script>

HTML DOM元素绑定指令

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled：禁用

ng-show：指令隐藏或显示一个 HTML 元素。

ng-click：单击事件。

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <p>
                <!-- mySwitch为true时，按钮不可用，mySwitch为false时，按钮可用 -->
                <button ng-disabled="mySwitch" ng-click="changeState()">我是按钮</button>
            </p>
            <p>
                <!-- mySwitch为true时，组件不可见，mySwitch为false时，组件可见 -->
                <span ng-show="mySwitch">show show show</span>
            <p>
                <input type="checkbox" ng-model="mySwitch">选我看效果
            </p>
            <p>
                <h1 ng-hide="state">{{'state为false，我才会出来'}}</h1>
            </p>
            <p>
                {{mySwitch}}
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
<script>
    angular
        .module('myApp', [])
        .controller('myCtrl', function ($scope) {
            /* 初始化数据 */
            $scope.mySwitch = false;
            $scope.state = true;
            $scope.changeState = function () {
                $scope.state = !$scope.state;
            }
        });
</script>

ng-class：动态样式

当我们使用ng-class为某个元素，设置class的时候，如果模型变量式一个对象，该对象的某个属性的值是true，则同名的CSS属性会被当成class赋值给当前元素。

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
           <div><button ng-class="{'btn':state}" ng-click="changeBtn()">按钮</button></div>
           <div><button ng-class="{'btn':!state}">按钮</button></div>
        </div>
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<script>
    angular
        .module('myApp', [])
        .controller('myCtrl', function ($scope) {
            $scope.state = false;
            $scope.changeBtn = function () {
                $scope.state = !$scope.state;
            };
           
        });
</script>
<style>
    .btn{
    background-color: red;
}
</style>

ng-submit：表单提交事件

用在form表单中，用户提交表单时触发

<form ng-submit="doneEdit(todo)">
		<input id="{{todo.id}}" class="edit" ng-model="todo.title">
</form>

Scope和rootScope作用域

$scope ：只能作用在当前controller控制器中，不能与其他controller共享模型数据
$rootScope：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>姓氏为 {{lastname}} 家族成员:</h1>
        <ul>
            <li ng-repeat="x in names">{{x}} {{lastname}}</li>
        </ul>
    </div>
    <div ng-controller="myCtrl_1">
        <div>scope中的值是{{lastname}}</div>
        <div>rootscope中的值是{{$root.lastname}}</div>
    </div>
</div>

Service服务

AngularJS 中你可以创建自己的服务，或使用内建服务。在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。

$location 服务

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

获取URL

var app = angular.module('myApp', []);
app.controller('customersCtrl', 
	function($scope, $location) {    
    $scope.myUrl = $location.absUrl();
	});

操作锚点值（hash值）

锚点值：即地址栏#后面的值，锚点值存在意义是地址栏发生变化不会发送网络请求，停留了在本页。实现本页面的跳转，例如页面内容很多，可以通过标签id在页面定义一个位置，使用<a>标签改变锚点定位到标签id位置

var app = angular.module('myApp', []);
app.controller('customersCtrl', 
               function($scope, $location) {
                 //获取锚点值
                $location.hash();
                 //设置锚点值
        				$location.hash('/completed');
                 
               });

如何去监控锚点值的变化？

//监听锚点
$scope.location=$location;
$scope.$watch('location.hash()', function (newVal) {
  switch (newVal) {
    case '/active':
      $scope.keyword = false;
      break;
    case '/completed':
      $scope.keyword = true;
      break;
    default:
      $scope.keyword = undefined;
      break;
  }
});

$http 服务

服务向服务器发送请求，应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', 
	function($scope, $http) {    
    $http.get("welcome.htm").then(function (response) {        
      $scope.myWelcome = response.data;    
    });
  });

$timeout 服务

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {   
  $scope.myHeader = "Hello World!";    
  $timeout(function () {        
	$scope.myHeader = "How are you today?";    
  }, 2000);
	});

$interval 服务

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {    
  $scope.theTime = new 
	Date().toLocaleTimeString();    
  $interval(function () {        
	$scope.theTime = new Date().toLocaleTimeString();    
  }, 
	1000);
});

自定义服务

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mvc</title>
  </head>

  <body>
    <div ng-app="myApp">
      <div ng-controller="myCtrl">
        <form action="" name="myForm" method="post" enctype="multipart/form-data">
          <p>
            用户名：<input type="text" name="username" ng-model="name" required>
          </p>
          <!-- 调用自定义服务 -->
          <p>
            {{userServer(name)}}
          </p>
        </form>
      </div>
    </div>
  </body>
  <!-- 引入angular -->
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
  <!-- 在我们引入angular之后，会在window全局上创建一个angular对象 -->
  <script>
    angular
      .module('myApp', [])
      /* 自定义服务 */
      .service('myService', function () {
        this.nameServer = '张三';
        this.userServer = function (name) {
          return name.split('').reverse().join('');
        }
      })
      .controller('myCtrl', function ($scope,myService) {
        /* 初始化数据 */
        $scope.name = myService.nameServer;
        $scope.userServer = function (name) {
          return myService.userServer(name);
        }
      });
  </script>

</html>

依赖注入

当我们在AngularJS里面需要某个对象的时候，我们只需要在方法或函数的参数列表进行声明一下，AngularJS这个框架就会自动帮我们生成该对象（这个时候AngularJS这个框架一般被称为IOC容器，这个容器里面会存在很多的服务，例如$scope模型，$httpajax服务器，$location URL地址服务），然后把该对象作为参数传递。一般来说可以被注入的参数被称为服务。例如常见是$scope对象。

以下5个核心组件来作为依赖注入：

value
factory
service
provider
constant

MVC服务分层

在上述的代码中代码都写到了一块不易管理和复用，利用MVC思想分层，可以将controller和service，module抽取出来。在需要的地方通过依赖注入来使用。

示例

//moudel层
(function (angular) {
	angular
	.module('todomvc', ['dataService','todoCtrl']);
	// Your starting point. Enjoy the ride!
})(angular);

(function (angular,uuid) {
    /* 
        自定义存储服务
    
    */
    angular.module('dataService', [])
        .service('DataService', function () {
        });
})(angular,uuid);

(function (angular) {
    angular
    .module('todoCtrl',[])
    .controller('todoController', function ($scope, $timeout,$location,DataService) {
    });
})(angular);

路由

就是将用户的请求交给对应的应用程序来处理。 AngularJS去地址栏里面URL的hash值来寻找处理对应的应用程序

angluar-route

使用步骤

先依赖模块ngRoute：AngularJS内部的服务，模块命名都是通过小驼峰的命名
注入一个路由服务器$routeProvider
配置路由规则

1. when：匹配的路径
2. tempalte：展示的内容标签
3. templateUrl：可以引入html页面，也可以引入当前页面标签内容

配置路由出口：ng-view
指定controller控制器
路由参数：

1. 在定义路径是通过冒号来指定参数key，如果参数是可选的还需要加问号，例如 /user/:name?
2. 通过注入服务$routeParams来获取参数

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <h1>学习angularJS路由</h1>
            <div ng-view></div>
            <script type="text/ng-template" id="temp1">
                <h1 >关于我们</h1>
            </script>
        </div>    
    </div>
</body>
<!-- 引入angular -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- 引入路由 -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular-route/1.8.3/angular-route.js"></script>
<script>
    angular
    //使用路由模块：1：先依赖模块 2.注入一个路由器服务
        .module('myApp', ['ng','ngRoute'])
        .config(['$routeProvider',function($routeProvider){
             //3.在路由服务里面定义好对应的路由表
           $routeProvider.
           when('/',{
               template:'<div>首页</div>'
           }).when('/about',{
            //引入当前页面标签内容
               templateUrl:'temp1'
           }).when('/page404',{
            //引入一个页面
            templateUrl:'./404.html',
            controller:'myCtrl'
           })
           //获取路径参数
           .when('/user/:name?',{
            templateUrl:'/user.html',
            controller:'myCtrl'
           })
           .otherwise({
               redirectTo:'/page404'
           })
        }])
        .controller('myCtrl', function ($scope,$routeParams) {
            $scope.msg='page not found'
            $scope.name=$routeParams.name
        });
</script>