Angularjs学习

web前端开发 angularjs 梅斯前端文档 梅斯前端培训

一、 Angularjs 是什么？

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

重点词：MVC 模块化 双向数据绑定 语义化标签 依赖注入

二、构建第一个Angularjs应用

• 手动构建
  这里不用多说，就是自己手动引入 Angularjs 的lib包,所有的资源和目录都由自己创建分配

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

• 模版构建
  模版构建指的是用人家搭建好的，相对规范和完善的 Angularjs 项目，并在上面继续开发
  这里一般会去 github 上找合适的，或者在官方 Demo 的基础上开发

• 命令行工具构建
  使用前端构建工具构建（这里得到的模版文件也来自 github 也可算是模版构建的一种)

命令行工具：（ grunt | gulp | webpack）+ Yeoman + bower

这样的构建目录合理情绪，并且对生产环境和开发环境的相关指令已经写的很完整了，不用重复写编译指令。同时也集成了开发中需要的测试工具（karma | jasmine）

三、模版和数据绑定

Angularjs 之所以一下子进入人们的眼球，主要就是他的 双向数据绑定 ,这样的操作和思路刷新了前端工程师以往使用 jQuery 对 DOM 反复操作的理解和认识，解放了双手，同时让 View 和 Model 实现了真正的解藕。

<input type="text" ng-model="name">
<h1>Hello , {{name}}</h1>

模版和数据双向绑定 Demo

从上面的例子反过来看的话，如果我们通过 ajax 从服务器端得到了一串 json 数据的化，我们是不是只需要构建合理的 model 那么数据就自动填充到页面上了，从而避免了我们手动去操作 DOM 渲染数据。

1. 思考如果一个 model name 为 nameOne 的指数据需要渲染到 name 为 nameTwo 的模型视图上怎么处理？

使用 $watch 监听 nameOne 的变化，从而去改变 nameTwo

// $watch(watchFn, watchCallBack, deepWatch)
// watchFn => 需要监听的modal，字符串形式
// watchCallBack => 当监听内容发生改变时候会触发执行的方法
// deepWatch => 如果为true，则见图对象下所有属性值
$watch('nameOne',function(newValue, oldValue, scope){
    nameTwo = newValue;
})

1. 思考Angularjs的双向数据绑定是如何实现的，$watch 的原理是不是和双向数据绑定的形式很像？

angularjs 的双向数据绑定就是使用和 $watch 一样的脏数据处理机制实现的。这样的处理固然是好，但是也有一定的性能缺陷。

四、指令

• 内部指令

当然这里还有很多 ng- 内部指令，详细的可以查看 API 文档

正常的DOM事件绑定的时候，我们是不推荐使用类似 Angularjs 的 0级DOM 事件绑定的形式。但是在使用 Angularjs 的时候不需要考虑这些，这并不影响我们的操作，同时 Angularjs 的指令已经很好的帮我们解决了各个浏览器之间的差异性

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

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

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

• 指令的声明方式（指令的类型）

E => Element => 如果过指令名称使用驼峰命名，则写到html中时候，全部采用小写，同时大写字母处用中横线［－］隔开

自定义指令 Demo

五、服务

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

• 如何创建一个服务

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

其实个人理解的服务相当于普通的 javascript 的方法集合封装

//例子一：使用对象的形式存储方法集合
(function(w){
    if(typeof w.msJs == "undefined"){
        w.msJs = {};
    }
    msJs = {
        a : function(a, b){
            console.log(a + b);
        }
    }
})(window);
//列子二：使用函数的形式存储方法集合
(function(w){
    w.msJs = function(){
        return {
            a: function(a, b){
                console.log(a + b);
            }
        }
    }
})(window);
//例子三：使用函数的原型链存储方法集合
(function(w){
    var fn = new Function();
    fn.prototype = {
        a: function(a, b){
            console.log(a + b);
        }
    }
    w.msJs = new fn();
})(window);

• 使用服务
  服务的天生使命就是被应用模块去使用（调用）

//在这里我们假设之前写的服务名称为 msJs
var app = angular.module('app');
app.controller('控制器名称',function(需要注入的服务名称)){
    msJs.a(1,2);
}
//在调用这个控制器后，控制台会直接打印（1 + 2）的和出来
//如果是刚刚我们写的普通javascript的方法呢（如何调用）
1. 页面需要引用该js代码
2. 直接使用
//例子
msJs.a(1,2);

• 什么是 依赖注入

现在的前端开发中，大量的后端思想慢慢被引入了进来，依赖注入 就是其中之一。

依赖注入指的是，在系统中如果你需要调用一个方法则直接去使用他就行，二这个被注入的对象，就是你去使用的依赖，这个注入就是你将他拿到你身边等待去使用的状态。
对于依赖注入的这个对象（服务），是一个单列的形式，你不需要实列化就可以直接操作（调用）他。

六、过滤器

过滤器顾名思义就是对输出的数据进行预处理加工的意思，类似等同于前端习惯使用的 formater (格式化)；

• 业务场景
  后台传递给前端的数据可能是原始数据，这样的数据用户并看不懂，所以需要数据的预处理工作。

举个🌰子

//后台穿给我们的json数据中，时间格式都使用了时间戳的格式
如：1478317615579
//这个时候就需要过滤器预处理了
<span> {{createTime | date:yyyy-mm-dd}}</span>

过滤器 Demo

七、路由控制

• 什么是路由
  不同的url指向不同的资源（视图），这就是路由。
  URL 的变化会触发浏览器页面的跳转，而路由则是取代了浏览器跳转的这种行为，改为自己去管理。

• angularjs 内置的路由

//html:这是视图的填充位置，用 ng-view 标示
//ng-view是唯一的
<div ng-view></div>
//javascript:
var app = angular.module('app',['ngRoute'])
app.config(function($routeProvider){
    //路由表配置
    $routeProvider
        .when('/',{template:'首页'})
        .when('/list',{template:'list页面'})
        .when('/list/detail',{template:'详情页面'})
        //如果输入的不符合路由表内指定的，则默认匹配'/' 页
        .otherwise({redirectTo:'/'});
});

页面路由流程图

问题：
1. 浏览器什么时候会跳转什么时候不跳转？
2. 如何修改 URL 后保持浏览器不跳转？

修改URL浏览器不跳转 Demo

• angularjs外置路由

这里要说的是 UI-Route

var app = angular.module("app",[]); 
app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/");
    $stateProvider
        .state("index", {
            url: "/index",
            templateUrl: "./tpl/index.html"
        })
        .state("list", {
            url:"/list",
            templateUrl: "./tpl/list.html"
        })
        .state("list.detail", {
            url:"/detail",
            templateUrl: "./tpl/detail.html"
        })
        .state("user/:id", {
            url:"/user",
            templateUrl:"./tpl/user.html"
        })
});

其实无论内置的 route 还是外置的 ui-route 或者其他，他们的原理和方法都一样的只是谁比谁更适合你的业务场景，谁比谁更强大而已。

页面路由流程图

最终，UI-Route可以实现网状路由的布局

八、Angularjs与服务器的交互

• $http 服务

这是一个等价与 jQuery Ajax 的XHR(XMLHttpRequest)请求

$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();
...后面还有好几个类型的请求可自己补充

问题：
1. web开发中常见的http协议的请求类型一共有多少种,是哪几种？
2. 请求的成功和失败的状态码常见的有几种，分别表示什么意思？

$http应用Demo

• $resource 服务

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

//1. 创建资源
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' 
    })
});

九、其他

• Angularjs 动画
• Angularjs 文件上传
• Angularjs 本地图片上传预览

十、学习路线指导

3/8/7/6/5/4/9/2

PS: 不实战的技术练不出好本领

angularjs 🌰 ：

• angularjs 豆瓣音乐播放器
• angularjs bootstrap管理后台

相关资料：

• 本次分享PPT地址

• 《用AngularJs开发下一代Web应用》作者大漠穷秋博客

• AngularJs中文站点