Angular

Angular.js

http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html
在线编辑器
- http://codepen.io
- http://jsfiddle.io
- www.awesomes.cn
解放对DOM的操作，更倾向于web应用程序开发，通过表达式绑定数据
不提倡对DOM的操作，但是保留了对DOM操作的方式，不用在引jqvar $ = angular.element

一、SPA:单页面应用程序

单页面应用程序原理

页面通过 a 连接，让锚点发生变化达到无刷新页面的效果
首次请求空页面，通过 a 连接填充内容
hashchange事件监听锚点发生变化

window.logcation中拿到hash

网页中解析整体url

// 1.字符串操作
// 2.正则匹配
// 3.通过a的herf处理
var a = document.createElement('a');
a.herf = window.location;

switch判断锚点，异步发送请求拿到页面并渲染空白部分
Ctrl+k+u:大小写转换

单页面应用程序优势

响应效果好，提升用户体验
重用资源

如何做引擎友好

二、AngularJS 的核心特性

MVC
- 将应用程序划分成为了三个大的部件：Model/View/Controller
模块化
- 方便我们以模块化的方式组织我们的代码结构
自动化双向数据绑定
- 绝大多数人认为最亮眼的地方，着实是方便了许多，最大程度减少了我们代码中的DOM操作
指令系统
- 解决HTML原生在功能上的不足，提供可扩展的基础

模型：处理数据和业务
控制器：组织调度响应的处理模型
视图：以友好的方式向用户展示数据

1.相关链接

AngularJS 1.x 官方网站
- https://angularjs.org/
AngularJS 2.x 官方网站
- https://angular.io/
Google Material Design for Angular
- https://material.angularjs.org
Angular UI（Angular最大的第三方社区）
- http://angular-ui.github.io/
AngularJS中文社区
- http://www.angularjs.cn/
AngularJS中文社区提供的文档（不用FQ）
- http://docs.angularjs.cn/api
- http://www.apjs.net/

2.安装 Angular

下载 Angular.js 的包
- https://github.com/angular/angular.js/releases
使用 CDN 上的 Angular.js
- http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js
使用 Bower 安装
```
bower install angular
```
使用 NPM 安装
```
npm install angular
```
每种方式安装包，本质都是将angular的JS文件下载到当前文件夹中

三、Angular.js

在异步操作时候需要调用$apply()函数同步到界面

1.Angular.js原理

2.依赖注入原理

3.第三方UI插件

堆栈
栈溢出

2.directive:指令部分 (最重要的部分)

可以在同一个页面创建多个ng-app节点(不推荐)；
默认只只执行第一个，手动引导后面的【angular.bootstrap()】

就是将重复的代码封装起来
ng-clock:在加载时防止 AngularJS 代码未加载完而出现的问题。
transclude:true; 转置、但是定义按钮还存在
replace:true; 将ng-button按钮替换掉
templateUrl; 发起ajax请求，从外部拿url
scope:{title:'@',type:'@'} 绑定数据
- @指的是当前属性在执行时会去取指令作用到的DOM元素上取
restrict:'';
link:funciton($scope,element,attributes){}
ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name建立绑定关系

(1)组件式指令Demo

myModule.directive('hello', function() {
  return {
    restrict: 'E',
    template: '<h1>Hello world</h1>',
    replace: true
  };
});

(2)功能型指令Demo

myApp.directive("ngHover", function() {
  return function(scope, element, attrs) {
    element.bind("mouseenter", function() {
      element.css("background", "yellow");
    });
    element.bind("mouseleave", function() {
      element.css("background", "none");
    });
  }
});

(3)自定义指令的类型

E：Element（元素）
A：Attribute（属性）
C：Class（类名）
M：Comment（注释）

2.控制器(Controller)

(1)三种主要职责

为应用中的模型设置初始状态
通过$scope对象把数据模型或函数行为暴露给视图
- $scope(上下文模型)【View <> $scope(作用域) <>Controller 】
监视模型的变化，做出相应的动作

(2)表达式(Express) 【单向绑定数据】

类似于模板引擎的语法
作用：使用表达式把数据绑定到 HTML。
语法：表达式写在双大括号内：{{ expression }}
比较：表达式作用类似ng-bind指令；建议更过使用指令
- AngularJS 表达式可以写在 HTML 中。
- AngularJS 表达式不支持条件判断，循环及异常。
- AngularJS 表达式支持过滤器。

(3)定义控制器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>控制器定义</title>
</head>
<body ng-app>
  <div ng-controller="FooController">
    <input type="button" value="clicked me!" ng-click="say()">
  </div>
</body>
</html>

传统方式(全局函数方式)【不再用】

function FooController($scope) {
  $scope.say = function(){
    console.log('hello angular');
  };
}

常用方式（挂载在某个模块下）

Angular中最常见的一种使用方式，通过模块中定义的controller方法定义控制器

angular.module('MyModule', [])
  .controller('FooController', function($scope) {
    $scope.say = function(){
      console.log('hello angular');
    };
  });

定义类型的方式（构造函数）

对于喜欢通过定义构造函数的方式编写面向对象代码的同学可以使用构造函数的形式定义一个控制器

function FooController() {
  this.message = 'hello angular';
}

FooController.prototype.say = function() {
  console.log(this.message);
};

angular.module('MyModule', [])
  .controller('FooController', FooController);

注意事项

在以上的使用方式中，如果需要为控制器函数注入类似$scope之类的参数，必须确保参数名为一个特定值
也就是说Angular会根据参数名称自动注入对应的对象（与参数个数，出现顺序无关），所以参数名一定不能写错
但是，我们对于写完的JS代码经常会在上线之前对代码进行压缩
压缩的过程中如果启用混淆压缩的话，就会造成参数名变化
一旦变化了参数名，NG就无法为其注入对应的对象了
所以，最安全的写法就是不要依赖参数名（依赖不会变化的东西）：

angular.module('MyModule', [])
  .controller('FooController', ['$scope', function(whatever) {
    whatever.say = function(){
      console.log('hello angular');
    };
  }]);

解决方式就是将创建控制器的第二个参数改为一个数组，数组的最后一个成员就是以前的控制器函数，前面的成员就是控制器函数需要注入的对象列表，按照顺序对应

如何根据参数名传入特定对象？

扩展小知识：实现原理

function getFnParams(fn) {
  if (typeof fn == 'function') {
    var mathes = /.+\((.+)\)/.exec(Function.prototype.toString.call(fn));
    if (mathes[1]) {
      var args = mathes[1].replace(/\s/g, '').split(',');
      return args;
    }
  }
}

function foo(id, name, a1ge) {}

console.log(getFnParams(foo));

3.angular的过滤器(fliter)

引中文的语言包

currency:金钱过滤器
- 需要过滤的数据
- 过滤器的类型
- 之后都是参数
date:时间过滤器
- {{'时间'|date}}
limitTo:
filter:模糊匹配属性的值

4.angular的路由机制(ngRoute)

路由机制 ==> 单页面应用程序

单页面应用程序(single page APP)
- 实现无数新的视图切换，首先可以只用ajax页面渲染，但是导致后退按钮失效
- 解决方法：1.使用hash，监听hashchange事件来进行视图切换，
- 2.用H5的history API，通过pushState()记录操作历史。监听popstate事件来进行视图切换(pjax);

Angular.js前台路由：定义路由规则(routeProvider),然后通过不同的URL，告诉(ng-app),加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)
后台路由:通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).

四、WEB API

Application Programming Interface:应用程序编程接口

我们编程需要调用的方法
console.log()
I/O
document.getElementById()

web api 应用程序编程接口的另一种形式，所有的接口都是通过web方式暴露的，主要提供一些数据
天气预报
导航
坐标转城市名
IP转城市名
聚合数据
百度开发者中心

五、CDN的优势

分页插件

锚点：1.通过给要去的标签加id 2.通过要去的标签加a表现添加name属性

ionicframework