手动构建 ”

自己手动引入相关的lib包,所有的资源和目录都由自己创建分配

+ css
+ js
  | - app.js
+ images
+ lib
  | - + angularjs
  | - + jquery
  ...
index.html

这样的构建很随意也很不规范，只能用于简单的学习。对于团队开发很不利

模版构建 ”

用人家搭建好的，相对规范和完善的项目，并在上面继续开发
一般会选 github 上合适的，或官方 Demo 

这样的构建相对规范，并且学习和生产都可使用同一套规范。

├── app
│   ├── images
│   ├── scripts
│   │   └── controllers
│   │   └── services
│   │   └── filters
│   │   └── dricetives
│   │   
│   ├── styles
│   ├── views
│   ├── app.js
│   └── index.html
│   
├── bower_components
│   ├── angular
│   ├── angular-animate
│   ├── angular-mocks
│   ├── angular-route
│   ├── angular-sanitize
│   ├── bootstrap
│   └── jquery
└── test
    └── spec
        └── controllers

命令行工具构建 ”

这里得到的模版文件也来自 github 可算是模版构建的一种

但是毕竟人家老司机找的模版就是好啊

这样的构建很规范，但是前期你需要学习构建工具盒命令，这就增加了而外的更多学习成本

指令 Directive

1. 内部指令

2. 自定义指令

（AngularJs 内部已经创建好的，可直接使用的指令）

我们会发现，Angularjs提供的指令并不能很好的满足我们的生产需求，这个时候我们就需要去自定义相关的指令

（我个人理解自定义质量其实相当于 jQuery 中的插件开发）

指令 － 内部指令

指令 － 自定义指令

1. 指令的写法

//自定义指令的基本格式
app.directive('指令名称', function() {
    return {
        restrict: 'E',// 指令类型
        transclude:true, 
        require:'^?abc',//这是重点，指令和指令之间的继承和通信就靠他了
        template: '<div>Hi there</div>',//指令模版
        replace: true, //  是否覆盖占位元素（针对E）
        compile:function(){},//指令编译过程执行
        link:function(){},//指令绑定数据过程执行
        controller:function(){},//指令自身的控制器
    };
});

指令 － 自定义指令

2. 指令的类型

元素指令如果时有大写，则写到html中时候，全部采用小写，同时大写字母处用中横线［－］隔开

服务 Service

服务就是把公共的一些行为或者常用的操作集合整体的打包整合在一起，方便后面不同的组件或者说模块去使用。
在服务调用的时候，我们需要了解一个词语

“依赖注入”

创建服务

使用服务

服务 - 创建服务

var app = angular.module('app',[]);
app.factory('服务名称',function(需要注入的内容){
    return function(){
        //TODO: 这里写相关的服务方法
        //最后在把方法return出去
        var a = function(a,b){
            console.log(a+b);
        }
        return a;
    }
});

其实个人理解的服务相当于普通的 javascript

的方法集合封装

服务 - 使用服务

var app = angular.module('app');
app.controller('控制器名称',function(需要注入的服务名称)){
    msJs.a(1,2);
}

msJs就是我们刚刚创建的服务

所以说，服务是提供给控制器使用的

app.directive('指令名称', function() {
    return {
        restrict: 'E',// 指令类型
        transclude:true, 
        require:'^?abc',//这是重点，指令和指令之间的继承和通信就靠他了
        template: '<div>Hi there</div>',//指令模版
        replace: true, //  是否覆盖占位元素（针对E）
        controller:function($scope, '服务名称'){
        	myJs.a(1,2);
        },//指令自身的控制器
    };
});

1. 控制器中调用

2. 自定义指令的控制器中调用

过滤器 - Filter

Desktop

Server

Browser

Render

过滤器顾名思义就是对输出的数据进行预处理加工的意思

类似等同于前端习惯使用的 "formater (格式化)"

过滤器 - Filter

内置过滤器

自定义过滤器

//HTML:
<input type="text" ng-model="name" name="test">
<span>{{name | reverse}}</span>

//JavaScript:
var app = angular.module("myApp", []);
app.filter("reverse", function() {
	return function(input,[arguments]) { //argumants 表示后面可以任意的跟很多个参数
		return input.slipt(" ").reverse().join("");
	}
});

currency：

格式化数字为货币格式。

lowercase：
格式化字符串为小写。

...

服务器交互（通信）

$http 服务

$resource 服务

等价与 jQuery Ajax 的XHR(XMLHttpRequest)请求

是$http的延伸，是用来专门处理 RESTful 规范的资源

Request

Response

GET/POST/PUT/DELETE

服务器交互（通信）

$http 服务

$http({
    url:'请求链接',
    method:‘GET/POST’,
    params:{
        //请求参数，会被转译为序列化字符串添加到URL后面
    },
    data:{
        //请求参数
    },
    timeout:3000 //请求超时时间
}).success(function(){}).error(function(){});
//这里请求成功和失败的处理流程和jQuery有些差异，是放在了配置项目之外

//GET请求：
$http.get().success().error();

//POST请求：
$http.post().success().error();

//JSONP请求
$http.jsonp();
...后面还有好几个类型的请求可自己补充

服务器交互（通信）

$resource 服务

var User = $resource('/api/php/users/:userId', {userId:'@id'});

//2. 调用资源
User.get({id:'123'}, successFn, errorFn);

User.get({id:'123'}, function(user){
    user.name = 'myName';
    user.$save();
    //这里等价于User.save({id:'123'},{name:'myName' 
    })
});

什么是 RESTful ？