Angualar

ng-repeat:遍历数组显示数据

$index,$first,$last,$middle,$odd,$even

初始化数据：
$scope.persons = [
{username: 'kobe', 'age': 39},
{username: 'kele', 'age': 55},
{username: 'nila', 'age': 44},
{username: 'baba', 'age': 33},
{username: 'laka', 'age': 88}
];

<li ng-repeat="person in persons"></li>

$index  是数组的下标索引
$first  拿到的是布尔值判断是否是第一个
$middle  拿到的是布尔值判断是否是中间一个
$odd	拿到的是布尔值判断是否是奇数
$even   拿到的是布尔值判断是否是偶数

指令：

  1. 边界指令ng-app

    Angular框架在使用的时候，除了要引入框架文件之外，还需要为框架指明一个边界，来告知框架在哪个范围生效

    注意：边界指令是使用NG框架必须使用的一个指令

  2. 呈现指令{{}}

    描述：NG框架{{}}嵌套双花括号来表示内容呈现功能

    在{{}}中可以书写NG语法规则下的变量，字符串甚至是表达式

    强调：呈现指令只能书写合乎NG语法1规则的内容

  3. 信息指令：ng-model

    描述：NG框架规定ng-model用来对input或者textarea这类用于收集用户信息的标签进行数据绑定

    ng-model所赋的值，来保存用户输入内容的NG变量

  4. 绑定指令ng-bind

    NG框架中提供了用于对非输入性的标签使用的类似于{{}}呈现指令的辅助指令

    即为ng-bind

    作用：能够将NG变量绑定到想要显示的标签之上，并且在ng框架加载失败的时候，也不会直接将语法错误暴露出来

    语法：

  5. 初始化指令：ng-init

    描述：NG框架中规定使用本指令来对边界内部的数据模型（NG变量们）进行初始化操作

    ng-init没有规定必须放置的位置，但是一般习惯放在body上，会在页面加载之后，自动对内部规定的数据模型进行初始化操作

    语法：

控制器：

  1. angular.module()方法

    描述：本方法是NG框架中提供用来生成页面数据模型的方法

    语法： var 模型名称 = angular.module('边界名称',[注入信息])

    说明：因为现在还没有涉及到注入内容，因此暂时空置即可

    例子：var mapApp = angular.module('app',[]);

  2. 声明控制器指令ng-controller

    描述：本指令用来在页面中声明哪一个元素为控制器，控制器就是用在操作数据和视图的部件

    语法：

    注意：只要声明一个标签拥有控制器，这个控制器在脚本中就必须写出！

  3. 实现控制器方法*.controller()

    描述：本方法是NG框架在script脚本中提供，用来生成页面控制器的方法

    语法：页面数据模型名称.controller('控制器名称',['scope',function($scope){...}]);

    例子：app.controller('mainController',['$scope',function($scope){...}]);

遍历指令ng-repeat

报错：ngRepeat:dupes表示数组中创建了重复名字的元素

解决方法：加track by $index表示允许有重复元素存在，如果不写重复元素内容会报错

补充：ng-repeat指令必须在controller中对NG变量赋值之后才会生效，单独的ng-repeat毫无用处

事件监听

描述：NG框架中通过对元素添加ng-事件名指令，来对元素添加事件监听，而事件监听的回调函数需要在controller

中，通过$scope来实现

语法：<E ng-事件名=‘回调函数名(NG变量)’>

$scope.回调函数名 = function(形参){
	//在函数中形参就是传入的NG变量的值
	
};

多控制器思想与模块化编程架构

  1. ng-controller与多控制思想

    描述：能够看到angular的操作，实际上脚本代码都是写在controller之中的

    而刚刚我们将所有的脚本都堆积到一个控制器之中的操作

    虽然理解上变得容易，但是实际开发过程中会造成灾难

    所以为了便于团队开发，为了便于维护NG提出了多控制器思想

    说明：

    1. 多控制器思想：

      类似于div的布局思想，是将控制器按照页面不同模块进行功能切分

      一个控制器只用来控制一个模块，多个控制器之间互不影响，独立工作

    2. 优势：

      分工明确，代码清晰，便于维护

      当系统出现问题，能立即定位到问题坐标

    3. 弊端：

      对于初学者而言，前期代码的架构会变得很繁琐，对初学者不是很友好

    强调：

    1. 每个控制器只要被声明就必须通过.controller实现

      即便控制器中没有代码，也必须写出。

    2. 每个控制器作用域可以认为是嵌套的，外层controller可以直接访问到内层controller内的NG变量

      而同级controller之间互不影响

    3. 对于程序，习惯上mainController作为用户默认加载页面的根控制器

      有且仅有唯一一个

路由router

描述：路由是angularjs中提出的，用于构建单页面应用的模块

其本质是从a标签点击跳转功能延展而来的

说明：

  1. router功能的实现需要依赖于angularJS的扩展库文件angular-router.min.js

  2. router功能的实现需要依赖ng-view指令

    ng-view指令作用是提供标注显示不同页面的容器的作用

  3. router功能的实现需要依赖于a标签的href属性

    href=‘#要加载的页面代号’

    此属性设置的目的，是在a标签点击的时候，通知路由要加载那个页面

  4. router路由的具体语法是通过app页面数据模型创造的

    通过config方法来构造一个路由

    在路由中通过.when()来判断加载哪一个页面

    在路由中通过.otherwise()来决定路由默认加载哪一个页面

    app模型.config(){['$routerProvider', function($routerProvider){

    ​ $routerProvider.when('/页面代号', {

    ​ templateUrl:'点击要加载的页面的url地址（以路由所在的位置为起点）',

    ​ controller:'对应页面的控制名称'

    })

    ....

    .otherwise({

    ​ redirectTo:'/默认加载页面的代号'

    });

    }]};

注意：

AngularJS_数据模型

$rootScope

概述：这是一个全局变量

可以达到页面与页面之间相互交流的效果

服务

描述：可以这么认为，服务service相当于app提供给用户使用的全局变量

而服务存在的目的其实可以认为是对各个controller功能的一个描述

说明：

  1. 在NG框架中，服务可以是一个名词，实在不能理解就替换成NG全局变量
  2. 在NG框架中，因为controller作用域问题，平级controller无法相互沟通，所以提出服务的概念，不同的controller可以通过注入服务的方式进行交互
  3. 在NG框架中，存在多种不同的服务，有系统服务，也允许自定义服务，在angular框架内存中存在多种全局变量，有系统自带的，也可以自己重新定义

系统服务$http

描述：NG框架内直接对app数据模型内置了一个用于处理网络功能的服务就是$http

可以认为系统提供的服务都是带有$前缀的

而为了区分服务，我们的自定义服务一般都不写$前缀

get请求：

$http({

​ method: 'GET',

​ url:''

}).success(function(data){

}).error(function(data){

});

post请求：

$http({

​ method: 'POST',

​ url:'',

​ headers:{

​ },

​ data:''

}).success(function(data){

}).error(function(err){

});

过滤服务$filter

描述：$filter服务在NG框架中对数据进行转换显示的一种小工具，使用本服务能够让页面中的显示内容呈现为不一样的结构

语法：{{任意内容 | 过滤器}}

补充：$filter虽然是系统服务，但是支持自定义内容

说明：

​ 在$filter服务中提供了四种过滤器

  1. ** | currency : '货币符号'

    用于将内容转换为货币格式

    tips：默认转换为美元格式，当然支持定制

    1. ** | filter ：子集数组

    用于从一个数组选项中筛选出符合要求的子集数组

    类似于输入提示功能

    1. ** | uppercase lowercase

    用于将内容格式进行大小写转换

    1. ** | orderBy：'表达式'

    用于根据表达式的值对显示的内容进行顺序排列

    一般会用于ng-repeat结构中，并且repeat结构不是简单数据结构

数组

  1. 创建数组

    使用数组直接量是创建数组最简单的方法，在方括号中将数组元素用逗号隔开即可

    1.创建没有元素的数组
var empty = [];
2.创建有三个值的数组
var arr = [1, 2, 3]; 
3.创建3个不同元素的数组
var mix = [1, true, "a"];
如果省略数组直接量中的某个值，省略的元素将被赋予undefined值。
var count = [1,3];
数组有三个元素，第二个元素为undefined调用
4.构造函数Array()是创建数组的另一种方法。
var a = new Array();  //调用时有一个数值参数，它指定长度：
var a = new Array(10);  //显式指定两个或多个数组元素或者数组的一个非数值元素：
var a = new Array(5, 4, 3, " test, test");

  2. 数组长度

    每个数组都有一个length属性，length属性值代表数组中元素个数

    [].length 长度为0，数组没有元素

    ['a','b','c'].length 长度为3，最大索引为2，length为3

  3. 数组元素的添加和删除

    • push()方法在数组末尾增加一个或多个元素

    var arr = []; //创建一个空数组

    arr.push("a"); //在数组末尾添加一个元素 arr = ["a"];

    • unshift()方法在数组首部添加一个元素，并且一次将其他元素一次移动到更高的索引处

    var arr = [1,2,3];

    arr.unshift(0); //此时数组的元素为 arr = [0,1,2,3];

    pop()方法从末尾删除一个元素，并返回被删除的元素值

    shift()方法从数组头部删除一个元素

  4. 数组遍历

    一般使用for循环来遍历数组

    var arr = [1,2,3];

    for(var i = 0;len = arr.length; i < len; ++){

    //循环体

    }

  5. 数组方法

    join()

    Array.join()方法将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串。如果不指定分隔符，默认使用逗号

    var a = [1,2,3];
a.join();    	//=>"1,2,3"
a.join(" ");    //=>"1 2 3"
a.join("");     //=>"123"

    Array.join()与String.split()方法的逆向操作，后者是将字符串分割成数组。

    reverse()

    Array.reverse()方法将数组中的元素颠倒顺序，返回逆向数组。

    例如：

    var a = [1,2,3];
a.reverse();   // => [3,2,1]

    sort()

    Array.sort()将数组中的元素排序并返回排序后的数组。当不带参数调用sort()时，数组元素以字母表顺序排序。

    var arr = ["banana", "cherry", "apple"];
a.sort(); // a = ["apple", "banana", "cherry"]

    如果数组中包含undefined元素，它们会被排到数组的尾部。

    concat()

    Array.concat()创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数。如果这些参数中的任何一个自身是数组，则连接的是数组的元素，而非数组本身。

    var a = [1, 2, 3];
a.concat(4,5) // => [1,2,3,4,5]
a.concat([4,5], [6,7]); // => [1,2,3,4,5,6,7]

    slice()

    Array.sliece方法返回指定数组的一个片段或者子数组。它的两个参数分别制定了片段的开始和结束位置。返回的数组包含第一个参数指定的位置和所有到但不包含第二个参数指定位置之间的所有数组元素。如果只指定一个参数，返回的数组将包含从开始位置到数组结尾的所有元素。

    var a = [1,2,3,4,5];
a.slice(0, 3); // => [1,2,3]
a.sliece(3); // => [4,5]

    splice()

    Array.splice()在数组中插入或删除元素的通用方法。第一个参数制定了插入或者删除的起始位置，第二个参数制定了应该从数组中删除的元素个数，如果省略第二个参数，从起始位置到结尾的所有元素都将被删除。返回一个由删除元素组成的数组。 例如：

    var _arr = [1, 2, 3, 4, 5, 6, 7, 8];
_arr.splice(4);
console.log(_arr); // 返回[5, 6, 7, 8];
var _arr = [1, 2, 3, 4];  // _arr.splice(1, 2);   
console.log(_arr);  //返回[1,4]

    splice()的前两个参数指定了需要删除数组元素。后面的任意个数的参数指定了需要插入到数组中的元素，从第一个参数指定的位置开始插入。

    var a = [1, 2, 3, 4, 5];
a.splice(2, 0 , 'a', 'b'); // 返回[],a = [1, 2, 'a', 'b', 3, 4, 5];
a.splice(2, 2, [1,2], 3);  // 返回['a','b'],a = [1,2,[1,2],3,3,4,5];

    注意：

    1. 区别于concat(),splice()会插入数组本身而非数组的元素。

    2. push()和pop():

      push()在数组尾部添加一个或多个元素，并返回数组新的长度。

      pop()删除数组的最后一个元素，减小数组长度并返回它删除的值。

    3. unshift()和shift()
      unshift()在数组的头部添加一个或多个元素，并将已存在的元素移到更高索引的位置来获得足够的空间，最后返回数组新长度。

      shift()删除数组的第一个元素并将其返回，然后把所有随后的元素下移一个位置来填补头部的空缺。

字符串

length返回字符串长度

indexOf()方法返回字符串中指定文本首次出现的索引

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");  //17

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");  //51

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);   //17

search() 方法

搜索特定值的字符串，并返回匹配的位置:

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");    //17

slice()方法

提取字符串的某个部分并在新字符串中返回被提取的部分。该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);     //Banana

substring()方法

substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);   //Banana

substr() 方法

substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的长度。

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);    //Banana

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

var str = "Apple, Banana, Mango";
var res = str.substr(7);     //Banana, Mango

如果首个参数为负，则从字符串的结尾计算位置。

var str = "Apple, Banana, Mango";
var res = str.substr(-5);   //Mango

replace() 方法

用另一个值替换在字符串中指定的值：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

replace() 方法不会改变调用它的字符串。它返回的是新字符串。

toUpperCase() 把字符串转换为大写

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

toLowerCase() 把字符串转换为小写

var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1

concat() 方法

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

String.trim()

trim() 方法删除字符串两端的空白符

var str = "       Hello World!        ";
alert(str.trim());

charAt() 方法

charAt() 方法返回字符串中指定下标（位置）的字符串：

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

数字方法

toString() 以字符串返回数值。

所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toExponential() 方法

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

toFixed() 方法

toFixed() 返回字符串值，它包含了指定位数小数的数字：

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

toFixed(2) 非常适合处理金钱。

toPrecision() 方法

toPrecision() 返回字符串值，它包含了指定长度的数字：

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

valueOf() 以数值返回数值：

var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

AngularJS_字符串_02

Number() 方法

Number() 可用于把 JavaScript 变量转换为数值：

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

Number() 还可以把日期转换为数字：

Number(new Date("2019-04-15"));    // 返回 1506729600000

parseInt() 方法

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

parseFloat() 方法parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

MAX_VALUE 返回 JavaScript 中可能的最大数字。

var x = Number.MAX_VALUE;

MIN_VALUE 返回 JavaScript 中可能的最小数字。

var x = Number.MIN_VALUE;