初学者---AngularJS1 基础详解

时间 2019-11-13

标签初学者 angularjs1 angularjs 基础详解栏目 AngularJS 繁體版

原文原文链接

 
  AngularJS 简介 
 

 
  特色： 
 

   AngularJS 是一个 
  JavaScript 框架。它可经过 <script> 标签添加到 HTML 页面。 
 

   AngularJS 经过 
  指令 扩展了 HTML，且经过 表达式 绑定数据到 HTML。 
 

   在使用前须要导入文件： 
 

 
  做用 ： 
 

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 能够克隆和重复 HTML 元素。
AngularJS 能够隐藏和显示 HTML 元素。
AngularJS 能够在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

 
  01-1-【AngularJS表达式】 
 

    一、AngularJS使用 
  {{}}绑定表达式。用于将表达式的内容输出到页面中。 
 

   表达式中能够是文字、运算符、变量等，也能够在表达式中 
  进行运算输出结果。 
 

 
   eg: <p>{{ 5+5+"Angular" }}</p>
 
若是Angular.js文件放在页面下方，在页面刷新的瞬间会看到{{}}表达式的原样，因此能够 使用ng-bind指令替表明达式。javascript

 
   eg: 上式可改写为：<p ng-bind="5+5+'Angular'"></p>

 
  01-2-【AngularJS的经常使用指令】 
 

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

    一、 
  ng-app: 声明AngularJS所管辖的区域。 通常写在body或者html标签上，原则上一个页面只能有一个。 
 

 
   eg: <body ng-app=""></body>

   二、 
  ng-model: 指令把元素值（好比输入域的值）绑定到应用程序的变量中。 
 

eg: <input type="text" ng-model="name" />

   三、 
   ng-bind: 把应用程序变量中的值，输出到页面HTML视图中。能够与表达式{{}}互相替换。 
 

   eg: <div ng-bind="name"></div> 
 

   四、 
   ng-init: 初始化AngularJS应用程序中的变量值； 
 

   eg: <body ng-app="" ng-init="name='jredu'"> 
 

   应用程序初始化时， name变量就附有初值。 
 

 
- AngularJS中的MVC与做用域 
 

 
  一、【MVC三层架构】 
 

 
   Model(模型层)：应用程序中用于处理数据的部分。 (包括将数据保存或者修改到数据库、变量、文件中)。  
 

   在AngularJS中,Model特指的是：应用程序中的各类数据。 
 

 
   View(视图层)：用户能够看到的用户显示数据的页面。 
 

 
   Controller(控制器)：控制器是连接View与Model的桥梁。 负责从View读取数据，接受用户的操 做输入； 并将数据发送给Model层。 Model层对数据处理完毕以后，将结果返回给Controller，Controller再将结果返回给View层显示。 
 

   示意图： 
 

     ↗view → (数据) → Controller → (数据) →↘
 ↗                                           ↘
用户                                     Model(处理数据)
 ↖                                          ↙
   ↖ view ← (结果) ← Controller ← (结果) ← ↙

 
  二、建立一个AngularJS的模块。即ng-app=""所须要绑定的部分。  
 

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

   须要接受两个参数： 
 

   ① 
   模块名称，即ng-app双引号中须要绑定的名字。<body ng-app="myApp"> 
 

   ② 
  数组。 表示须要注入的模块名称，不须要注入其余模块可用空数组代替。 
 

   >>> AngularJS将经常使用的功能封装到angular.js，建立主模块时直接可使用，无需注入。 
 

   >>> 而一些应用较少的功能，须要导入对应的JS文件，而且在[]中注入进这个模块，才可以使用。 
 

   这就是AngularJS中的【模块化开发】与【依赖注入】！ 
 

 
   在AngularJS的模块上，建立一个控制器，须要传递两个参数： 
 

   ① 
  控制器名称，即ng-controller须要绑定的名称。 
 

   <div ng-controller="myCtrl"> 
 

   ② 
   控制器的构造函数，构造函数能够传入多个参数。  
 

   >>> 若是要在函数中使用系统的内置对象，则必须经过函数的参数传入，不然不能使用。 
 

   >>> AngularJS中的内置对象，都用$开头，例如$scope,$rootScope 
 

 
  三、AngularJS的做用域 
 

   ① 
   $scope： 局部做用域，声明在$scope上的属性和方法。只能在当前Controller使用；（局部使用） 
 

   ② 
   $rootScope： 根做用域。声明在$rootScope上的属性和方法，能够在整个ng-app所包含的范围使用。（全局使用） 
 

   >>> 若是没有使用$scope声明变量，而是直接使用ng-model在HTML标签中绑定的数据的做用域为： 
 

   1.若是ng-model写在某个Controller中，则这个变量会默认绑定到当前Controller的$scope上； 
 

   2.若是ng-model没有写在任何一个Controller，则这个变量会默认绑定到$rootScope上； 
 

 
  >>> AngularJS中的父子做用域！ 
 

   一、AngularJS中，子做用 
  域只能访问父做用域中的变量，而不能修改父做用域的变量； 
 

   二、为了解决上述问题，能够将父做用域中的变量声明为引用数据类型，例如对象等。 这样能够在子做用域中，直接修改对象的属性，而不须要修改对象自己保存的地址。 
 

   举例以下： 
 

 
  ng-app: 声明AngularJS所管辖的区域 
 

 
  建立一个AngularJS的模块。即ng-app=""所须要绑定的部分。  
 

 
  在AngularJS的模块上，建立一个控制器，设置控制器的名称以及控制器的构造函数。 
 

 
  运行页面显示结果为： 
 

 
  自动捕捉显示。 
 

 
  建立一个控制器用来对比，做用域的区别 
 

 
  全局输入与变量绑定，输入内容后效果以下： 
 

 
  03-AngularJS中的过滤器 
 

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

   >>> 系统内置的过滤器 
 

   举例应用： 
 

 
  一、uppercase，lowercase 大小写转换 
 

   {{ "lower cap string" | uppercase }} // 结果：LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} // 结果：tank is good 
 

 
  二、date 格式化 
 

   {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25 
 

 
  三、number 格式化（保留小数） 
 

   {{149016.1945000 | number:2}} 
 

 
  四、currency货币格式化 
 

   {{ 250 | currency }} // 结果：$250.00 {{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00 
 

 
  五、filter查找 
 

   输入过滤器能够经过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。 
 

 
  filter 过滤器从数组中选择一个子集 
 

   // 查找name为iphone的行 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }} 
 

 
  六、limitTo 截取 
 

   {{"1234567890" | limitTo :6}} // 从前面开始截取6位 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位 
 

 
  七、orderBy 排序 
 

   // 根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | 
   orderBy:'id':true }} // 根据id升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }} 
 

 
  自定义一： 
 

 
  >>>自定义过滤器，同时须要传递过滤参数。 
 

   * 调用过滤器示例：<p>{{12345678912 | hideTel:5}}</p> 
 

   * 传入的参数5，将被过滤函数的num形参所接受 
 

.filter("hideTel",function(){
 return function(text,num){
num = num>0&&num<11?num:3;//设置默认替换长度
text = text+"";
var newText = text.substring(0,11-num)
+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})

   运行显示结果为 
 

 
  自定义二： 
 

   自定义过滤器，实现根据 
  姓名筛选数据的功能。 
 

* >>> 调用示例：
* 请输入姓名： <input type="text" ng-model="name" />
* <tr ng-repeat="item in classes | filterByName:name ">
*/
.filter("filterByName",function(){
return function(item,search){
if(!search) return item;
var arr = []
for(var i=0; i<item.length; i++){
var index = item[i].name.indexOf(search);
if(index>-1){
arr.push(item[i]);
}
}
return arr;
}
})

   运行效果： 
  filter查找默认全匹配，不能单项查找！ 
 

 
  04-1-AngularJS中的服务Service 
 

 
   AngularJS 服务(Service) 
 

   AngularJS 中你能够建立本身的服务，或使用内建服务。 
 

 
   什么是服务？ 
 

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

   AngularJS 内建了30 多个服务。 
 

 
  为何使用服务? 
 

   在不少服务中，好比 $location 服务，它可使用 DOM 中存在的对象，相似 window.location 对象，但 window.location 对象在 AngularJS 应用中有必定的局限性。 
 

   AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 
  $location 服务比使用 window.location 对象更好。 
 

 
  【服务Service】 
 

   * 一、内置服务： 
 

   * >>> 要用服务，必需要把服务名经过controller的构造函数的参数注入进来！！！ 
 

   * >>> 系统内置的服务，统一使用 
  $开头， 服务中的属性和方法统一使用$$开头！！！ 自定义服务时，需注意与系统服务的写法区分开； 
 

*

   * $location： 返回当前页面的URL地址信息，是一个对象； 
 

   * $http： 向服务器发送请求，相似于JQuery中的Ajax； 
 

   * $timeout： 至关于 setTimeout(); 
 

   * $interval： 至关于setInterval(); 
 

 
  自定义服务（至关于声明一个函数） 
 

   * 第一个参数是服务名： 
 

   * 第二个参数是自定义服务的构造函数。 咱们自定义的服务，本质是一个对象。 
 

   * 对象的属性 ，能够在构造函数中，使用this.属性 表示； 
 

   * 对象的方法 ，能够在构造函数中，使用this.方法 表示； 
 

   举例以下：自定义服务：将十进制数转化为16进制 
 

.service("hexafy",function(){
this.gongneng = "将十进制数转化为16进制";
this.func = function(num){
return num.toString(16);
}
})

   也可使用过滤器实现一样功能 
 

.filter("filter1",function(){
return function(num){
return num.toString(16);
}
})

 
  在过滤器中调用服务！！ 
 

   也必须在声明过滤器的外层构造函数中，注入服务名称！！！ 
 

.filter("filter2",function(hexafy,$location){
return function(num){
return hexafy.func(num);
}
})

 
  04-2-AngularJS中的服务Factory 
 

   【自定义服务Factory】 
 

   factory服务在使用上与service服务没有太大差距。 
 

   惟一的不一样点，是声明服务时，factory服务是在函数中先声明好一个 
  对象，而后使用return将对象返回。 
 

   而service服务，则是直接在函数中使用this将属性和方法添加到对象上面。 
 

eg:

.factory("hexafy",function(){
var obj = {
gongneng : "将十进制数转化为16进制",
func : function(num){
return num.toString(16);
}
}
return obj;
})

   //我的理解，obj对象在这里相似与加工工厂，将属性或者方法进行绑定添加。 
 

 
  04-3-AngularJS中的服务Provider 
 

   【 
  自定义服务provider】 
 

   一、 在AngularJS中，service服务、factory服务都是基于provider服务实现的； 
 

   二、 在定义provider时，可使用this.$get 方法，接受一个函数，函数里面采用与factory彻底相同的写法！！ 
 

   .provider("hexafy",function(){ 
 

this.$get = function(){
var obj = {
gongneng : "333"
}
return obj;
}
}

   // 有没有感受到provoder的写法更像是一个综合杂糅的写法。 
 

   三、在三种服务中，provider服务是惟一一个能够写进config配置阶段的服务。 
 

   因此说，若是服务须要在配置阶段，也就是在声明controller以前执行的话，则可使用provider。 不然通常使用service或者factory. 
 

   .config() 表示配置阶段 ，在声明controller以前执行。 能够用于声明一些在controller中须要使用的全局变量、方法、服务等。 
 

   .config(function($provide){ 
 

   // 在配置阶段声明provider服务，须要在config中注入 
  系统对象$provide 
 

$provide.provider("hexafy",function(){
this.$get = function(){
var obj = {
gongneng : "444"
}
return obj;
}
});
})
05-AngularJS中的$http.html
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
写法以下：
$http({
method: 'GET', /*请求的方法*/
url: 'h51701.json' /*请求的地址*/
}).then(function(obj){
/*请求成功的回调函数*/
alert("请求成功！");
$scope.data = obj.data;
},function(){
/*请求失败的回调函数*/
alert("请求失败！");
});

   看了有木有感受很眼熟啊，对，这货和Ajax的写法初前面部分很像，那咱们顺便来回顾下Ajax的写法吧： 
 

   JQuey Ajax写法 
 

$provide.provider("hexafy",function(){
this.$get = function(){
var obj = {
gongneng : "444"
}
return obj;
}
});
})
05-AngularJS中的$http.html
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
写法以下：
$http({
method: 'GET', /*请求的方法*/
url: 'h51701.json' /*请求的地址*/
}).then(function(obj){
/*请求成功的回调函数*/
alert("请求成功！");
$scope.data = obj.data;
},function(){
/*请求失败的回调函数*/
alert("请求失败！");
});

   固然$http还有本身的简写方式，以下所示： 
 

   能够直接简写为get或者post方式： 
 

$http.get('/someUrl').then(successCallback, errorCallback);
$http.post('/someUrl', data).then(successCallback, errorCallback);
eg:
$http.get("json.php").then(function(){alert("请求成功")},function(){alert("请求失败")});

 
  06-AngularJS中的Select和表格 
 

   AngularJS 可使用 
  数组或对象建立一个下拉列表选项。 
 

   在 AngularJS 中咱们可使用 
  ng-option 指令来建立一个下拉列表，列表项经过对象和数组循环输出， 
 

 
  1、使用数组做为数据源 
 

   一、item表示数组中的每一项！ 
 

   二、循环出的option中，value的值，默认为item，即为数组中的每一项。 
 

   三、option显示出的内容(<option></option>标签中的文字)是由 
  item.site for决定的！ 
 

   即： 
 

   <select ng-model="site" ng-options=" 
  item.site for item in sites"></select> 
 

eg:

   $scope.names = ["Google", "Runoob", "Taobao"]; 
 

 
  2、以对象做为数据源 
 

   一、 (key,value) 第一项表示对象的键，第二项表示对象的值； 
 

   二、 option的value，永远都是对象的值！ 
 

   三、 option显示出的内容(<option></option>标签中的文字)是由 
  ...for 决定的！也就是说 for前面是什么，option标签中就是什么。 
 

   即： 
 

<option value=" value "> key/value(取决于for前面的内容) </option>
eg:
<p>选择的网站是:</p>
<select ng-model="selectedSite" ng-options="key for (key, value) in sites">
</select>ie
<h1>你选择的值是: {{selectedSite}}</h1>
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});

   运行效果以下： 
 

   接下来要讲的也是重点，咱们使用什么来建立下拉列表呢？ 
 

   【ng-options 和 ng-repeat】 
 

   一、ng-options使用时，是将指令添加在select上； 
 

   ng-repeat使用时，是将指令添加在option上； 
 

   二、 ng-options使用时，必须同步给select标签绑定 
  ng-model； 
 

   ng-repeat使用时，不必定须要绑定ng-model 
 

   ！！！ 三、 ng-options使用时，咱们只须要关心for前面的部分，即option标签中显示的文字；而option的value会自动分配，不禁咱们决定。 (使用数组做为数据源时，value就是数组的每一项；使用对象做为数据源是，value永远都是对象的值) 
 

   ng-repeat使用，除了要指定option标签中显示的文字，还须要手动指定value中的内容，若是没有指定则默认没有value； 
 

 
  ng-repeat 指令是经过数组来循环 HTML 代码来建立下拉列表，但 ng-options 指令更适合建立下拉列表，它有如下优点： 
 

   使用 
  ng-options 的选项的一个对象， ng-repeat 是一个字符串。 
 

   如下举例区分： 
 

   1、ng-repeat: 
 

<select ng-model="selectedSite">
<option ng-repeat="key in sites" value="{{key.url}}">{{key.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
运行显示结果为：
2、 ng-options
<p>选择网站:</p>
<select ng-model="selectedSite" ng-options="key.site for key in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>

   运行效果以下： 
 

 
  07-AngularJS中的DOM与事件 
 

DOM

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

 
  ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 
 

 
  ng-disabled="true/false"; 
 

   传入true表示禁用，传入false表示可用 
 

 
  ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。 
 

 
  ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。 
 

   若是 
  mySwitch 为true, 按钮将不可用:  
 

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

   ng-show 是否显示 
 

   传入true表示显示，传入false表示隐藏； 
 

 
  ng-hide 是否隐藏 
 

 
  ng-if: 是否移除元素。  
 

   当传入true显示，传入false时移除。 
 

   效果与ng-show相同，可是ng-show和ng-hide只是隐藏元素，而ng-if是将元素从DOM中直接移除！！ 
 

 
  ng-bind-html : 至关于innerHTML 
 

   而ng-bind 至关于 innerText 
 

   注意，要使用ng-bind-html，必须导入angular-sanitize.js文件进行安全验证。同时须要在声明模块的时候，在数组中注入安全验证模块'ngSanitize' 
 

 
  ng-checked 设置复选框或单选框的选中状态。 
 

   传入true设置当前复选框被选中。 
 

 
  ng-class: 用于设置给元素添加class类。 
 

   可选值有如下几种状况： 
 

   ① 能够是字符串。表示直接给元素添加对应的class。 多个class之间，用空格分隔 
 

   ② 能够是对象。 对象的键表示class名字，对象的值为true或false，当值为true时表示添加对应的class 
 

   ③ 能够是数组。数组中的值能够是字符串或对象，判断规则同上。 
 

   ng-switch 根据变量的值，选择不一样的ng-switch-when来显示。当没有合适的选项时，显示ng-switch-default 
 

eg:<div ng-class="'div div2'">这是一个div</div>
<label>
<input type="checkbox" ng-model="myClass" />给div添加样式？
</label>
<div ng-class="{'div':myClass,'div1':!myClass}">这是一个div</div>
<div ng-class="[{'div':myClass,'div1':!myClass},'div3']">这是一个div</div>

 
  事件  
 

   AngularJS 中的事件： 
 

   AngularJS中的事件只能触发绑定在AngularJS做用域上面的属性和方法。 
 

   <button ng-click="func()">点我弹个窗</button> 
 

   <button ng-mouseover="">点我弹个窗</button> 
 

   <button ng-mouseout="">点我弹个窗</button> 
 

   <input type="text" ng-keydown="keyDown()"> 
 

   <input type="text" ng-foucus=""> <!--得到焦点--> 
 

   <input type="text" ng-blur=""><!--丢失焦点--> 
 

   <input type="text" ng-change=""><!--内容被改变--> 
 

 
  08-AngularJS中的表单和输入验证 
 

 
  [AngularJS的表单验证] 
 

   一、表单中，经常使用的验证操做： 
 

 
  $dirty 表单有填写记录 
 

 
   $valid 字段内容合法的 
 

 
   $invalid 字段内容是非法的 
 

 
   $pristine 表单没有填写记录 
 

 
   $error 表单验证不经过的错误信息 
 

   二、 验证时，必须给form和inpt，设置name属性。 
 

   给form和input设置了name后，会自动将表单信息绑定到$scope做用域中。 因此，能够直接使用formName.inputName.$验证操做 获得验证结果。 
 

   例如： 
 

   formName.inputName.$dirty = "true"; 表示表单被填写过！ 
 

   formName.inputName.$invalid = "true"; 表示表单输入内容不合法！ 
 

   formName.inputName.$error.required = "true"; 表示设置了必填，可是没有输入 
 

   注意： 
 

 
  $error支持的验证： 
 

 
   required/minlength/maxlength/partten/eamil/number/date/url等。。。 
 

   三、 为了不AngularJS的验证与HTML5的表单验证冲突！！ 好比说 type="email" required等,H5也会进行验证，那么能够 
  给form添加“novalidate”属性，禁用HTML5的验证功能  
 

 
  09-AngularJS中的动画 
 

   在AngularJS中使用动画：AngularJS 提供了动画效果，能够配合 CSS 使用。 
 

   一、导入 
  angular-animate.js 
 

   二、 若是页面中没有自定义app模块，则能够直接绑定系统模块 
  ng-app="ngAnimate" 
 

   <body ng-app="ngAnimate"> 
 

   若是页面中有自定义的app模块，则能够在自定义模块的数组中，注入ngAnimate。 
 

   angular.module("app",["ngAnimate"]) 
 

   三、 当使用ng-show、ng-hide显示或者隐藏元素的时候， 系统会自动添加或者移除.ng-hide这个class类； 
 

   四、 当使用ng-if/ng-switch/ng-repeat等其余指令，须要分别设置显示后和隐藏后的两种class样式： 
 

   显示后的class： .ng-enter-active,.ng-leave{} 
 

   隐藏后的class： .ng-enter,.ng-leave-active{} 
 

 
  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 (若是元素将显示
09-AngularJS中的路由

在AngularJS中使用路由：

1. 导入路由文件：angular-route.js

2. 在主模块中注入"ngRoute"。 rg:angular.module("app",["ngRoute"])

3. 将超连接改写为路由格式。 --> "#/标记"

<a href="#/">首页</a> 首页直接使用 #/ 表示

<a href="#/page1">page1</a> 其余页面"#/标记" 表示

4. 在config配置阶段，注入$routeProvider，进行路由配置：

5. 在页面的合适位置，添加ng-view，用于承载路由打开的页面：

<div ng-view></div> 或 <ng-view></ng-view>

【路由对象中接受的可选参数：】

① template：自定义HTML模板，会直接将这段HTML记载到ng-view中；

② templateUrl：导入外部的HTML模板文件。为了不冲突，外部的HTML应该是一个代码片断，即只保留body之内的部分。

③ controller：在当前HTML模板上，执行的controller函数。会生出新的做用域$scope. 能够接受字符串(声明好的controller名字),也能够直接接受函数。

>>> 注意：使用ng-view打开的页面，controller中的做用域是属于当前页面做用域的子做用域！！依然符合Angular中父子做用域"能读不能写"的要求！

>>> 因此：若是须要在ng-view中修改当前做用域的变量，必须把这个变量声明为对象的属性！！

④ redirectTo：重定向。通常用于.otherwise()中，用于重定向回首页！

AngularJS容许用户自定义指令！！

例如： <div ng-view></div> 或 <ng-view></ng-view>

1. 使用.directive()声明一个自定义指令；

2. 定义指令时，指令名必须使用驼峰命名法；而调用指令时，用"-"连接

.directive("jiangHao") --> <jiang-hao><jiang-hao>

.directive("jianghao") --> <jianghao><jianghao>

3. 定义指令时，对象中使用的属性：

① template: 调用指令时，生成的模板

② restrict: 用于声明指令容许的调用方式：

E->容许标签名代表 A->容许属性调用 C->容许类名调用 M->容许注释调用

默认值为：EA

若是须要注释调用，必须再添加一个属性：replace:true,并且注释调用前必须添加"directive:" eg: