AngularJS 1.3.0 学习指南

Anonymity | | 访问(101)

  AngularJS 1.3.0 视频教程http://www.imooc.com/learn/156

  经验分享平台 http://ngnice.com/

  AngularJS 2.0.0视频教程:https://my.oschina.net/mumu/blog/834254

  官方社区 https://angular.cn/

  http://www.runoob.com/angularjs/angularjs-tutorial.html

  http://www.runoob.com/angularjs2/angularjs2-tutorial.html

  一、快速上手

  1.1、感受AngularJS的4大核心特性

  AngularJS所有版本下载地址 https://code.angularjs.org/

  AngularJS 1.3.0版本放弃 IE8及以下版本的兼容,四大特性(MVC)(模块化)(指令系统)(双向数据绑定)

  1.2、自己手动搭建开发、调试、测试环境

  代码编辑工具(Sublime,WebStorm),断点调试工具(chrome插件Batarang),版本管理工具(git),代码合并和混淆工具(Note.js [npm][grunt]),依赖管理工具(Bower),单元测试工具(karma,Jasmine),集成测试工具(Protractor),轻量级Server(http-server)

  二、基本概念和用法

  2.1 MVC

  为什么需要MVC:代码规模越来越大,切分职责是大势所趋;为了复用,很多逻辑是一模一样的;为了后期维护方便,修改一块功能不影响其他功能;MVC只是手段,目标就是为了模块化和复用。

  Controller使用过程中的注意事项:

  (1)不要试图去复制Controller,一个控制器一般只负责一小块视图

  (2)不要在Controller中操作DOM,这不是控制器的职责(效率低)

  (3)不要在Controller里做数据格式化,ng有很好用的表单控件

  (4)不要在Controller里面做数据过滤操作,ng有$filter服务

  (5)一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行

  $scope介绍

  (1)$scope是一个POJO(Plain Old JavaScript Object)

  (2)$scope提供了一些工具方法$watch()/$apply()

  (3)$scope是表达式的执行环境(或者叫作用域)

  (4)$scope是一个树型结构,与DOM标签平行

  (5)子$scope对象会继承父$scope上的属性和方法

  (6)每一个Angular应用只有一个根$scope对象(一般位于ng-app上)

  (7)$scope可以传播事件,类似DOM事件,可以向上也可以向下

  (8)$scope不仅是MVC基础,也是实现双向数据绑定的基础

  (9)可以用angular.element($0).scope()进行调试

  2.2 模块化与依赖注入

  2.3 双向数据库绑定

  2.4 指令

  2.5 Service

  Service都是单例的

  Service由$injector负责实例化

  Service在整个应用的生命周期中存在,可以用来共享数据

  在需要使用的地方利用依赖注入机制注入Service

  自定义的Service需要写在内置的Service后面

  内置Service的命名以$符号开头,自定义Service应该避免

  2.6 Provider

  2.7 表单

  2.8 综合实例BookStore

  三、核心原理解析

  3.1 Parser

  3.2 双向数据库绑定

  3.3 依赖注入

  四、ng控件开发

  4.1 用AngularJS改写jQuery控件

  4.2 angularjs-ui

  4.3 移动控件库ionic

  五、TDD和前端自动化测试

  5.1 TDD

  5.2 详解Jasmine与Protractor