拥抱AngularJS
2015-07-18 06:04
585 查看
文中一些地方AngularJS简称ng
是一款优秀的前端JS框架,核心特性:MVVM(Model-View-ViewModel)、模块化、双向数据绑定、依赖注入。
官网:https://angularjs.org/
中文网:http://www.apjs.net/
AngularJS权威教程
https://code.angularjs.org/
angular.js ng 核心
angular-route.js ng 路由(参考地址)
angular-animate.js ng 动画(参考地址)
angular-cookies.js ng Cookie(参考地址)
angular-sanitize.js ng 安全模块(应对XSS)
angular-messages.js ng 表单验证(参考地址)
angular-resource.js ng restful数据交互(然并卵,只是封装了一层$http,可以用来请求本地json文件)
angular-mocks.js ng 单元测试工具类(参考地址)
angular-loader.js ng http请求loading效果(参考地址)
angular-scenario.js ng 单元测试用
angular-touch.js ng gestoures(针对移动端,基于jQuery Mobile的touch事件。不过貌似不太好用)
angular-aria.js ng 富互联网应用(Accessible Rich Internet Applications,貌似没啥用)
angular-meesage-format.js ng 编译相关(谨慎使用,该文件只有当闭合编译器的高级选项标识时才会编译)
路由控制:
应用场景:封装通用插件
参考资料:
Halower-博客园
angular-ui-bootstrap
三种构建方式:
factory、service、provider
区分:
factory需要创建一个对象,并return这个对象。比较常用且容易理解。
service接收一个构造函数,不需要创建一个对象并return。跟factory的方式区别不大,源码里只是加了层封装。
provider是创建service最底层的方法,需要在自带的$get()方法里做逻辑。跟上面两个的区别在于:可以通过config()方法配置创建service。
provider应用场景:
当我们需要在应用开始前对service进行配置的时候,eg:我们需要配置services在不同的部署环境里(开发、测试、生产),使用不同的后端接口处理时。
当我们打算发布开源时。
参考资料:AngularJS中factory,service,provider的区别
参考资料:AngularJS filter详解
AngularJS表单基础
何时应该使用Directive、Controller、Service?
AngularJS+RequireJS
AngularJS与RequireJS集成
玩转AngularJS的promise
AngularJS中的一些坑
AngularJS开发一些经验总结
理解AngularJS的依赖注入
仅记得做Java项目时,spring框架有一套依赖注入的模式。前端框架中引入依赖注入的思想,不得不佩服ng作者的脑洞。
后端出生的FE,难以抗拒地喜欢上了这个JS框架,虽然它被很多人质疑(学习成本高,太臃肿etc)。
相信会有更多的FE engineer爱上它。
PS:
文中若有不妥之处,请留言or私信告知,不甚感激。
简介:
ng诞生于2009年,由Misko Hevery等创建,后被Google收购,为克服HTML在构建应用上的不足而设计。是一款优秀的前端JS框架,核心特性:MVVM(Model-View-ViewModel)、模块化、双向数据绑定、依赖注入。
官网:https://angularjs.org/
中文网:http://www.apjs.net/
入门:
参考地址书籍:
用AngularJS开发下一代Web应用AngularJS权威教程
源码:
GitHubhttps://code.angularjs.org/
API:
AngularJS API介绍:
模块介绍:(v1.4.0)angular.js ng 核心
angular-route.js ng 路由(参考地址)
angular-animate.js ng 动画(参考地址)
angular-cookies.js ng Cookie(参考地址)
angular-sanitize.js ng 安全模块(应对XSS)
angular-messages.js ng 表单验证(参考地址)
angular-resource.js ng restful数据交互(然并卵,只是封装了一层$http,可以用来请求本地json文件)
angular-mocks.js ng 单元测试工具类(参考地址)
angular-loader.js ng http请求loading效果(参考地址)
angular-scenario.js ng 单元测试用
angular-touch.js ng gestoures(针对移动端,基于jQuery Mobile的touch事件。不过貌似不太好用)
angular-aria.js ng 富互联网应用(Accessible Rich Internet Applications,貌似没啥用)
angular-meesage-format.js ng 编译相关(谨慎使用,该文件只有当闭合编译器的高级选项标识时才会编译)
控制器(controller):
简单理解为-通过依赖注入的方式,把service、依赖关系以及其他对象串联到一起,然后通过$scope把它们关联到view上。var app = angular.module('app', []); app.controller('indexCtrl', ['$scope', 'demoService', function($scope, demoService) { $scope.name = demoService.getName(); }])
路由控制:
var app = angular.module('app', ['ngRoute']); app.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/list', { templateUrl: 'module/order/list.html', controller: 'listCtrl' }) .when('/detail/:orderid', { templateUrl: 'module/order/detail.html', controller: 'detailCtrl' }) .otherwise({redirectTo: '/dashboard'}); }])
指令(directive):
简单理解为-在特定DOM上运行的函数,指令可以扩展这个DOM的功能。应用场景:封装通用插件
var app = angular.module('app', []); app.directive('tree', function($location) { return { restrict: 'EA', replace: true, scope: { treeNodes: '=' }, templateUrl: './script/directive/template/treeTmpl.html', link: function($scope, $element, $attrs) { $scope.directTo = function(url) { if(!!url) { $location.path(url); } } } } })
参考资料:
Halower-博客园
angular-ui-bootstrap
服务(service):
简单理解为-单例对象三种构建方式:
factory、service、provider
区分:
factory需要创建一个对象,并return这个对象。比较常用且容易理解。
var app = angular.module('app', []); app.factory('demoService', function() { var service = { getName: function() { var myName = 'Tom'; return myName; } }; return service; })
service接收一个构造函数,不需要创建一个对象并return。跟factory的方式区别不大,源码里只是加了层封装。
var app = angular.module('app', []); app.service('demoService', function() { this.getName: function() { var myName = 'Tom'; return myName; } })
provider是创建service最底层的方法,需要在自带的$get()方法里做逻辑。跟上面两个的区别在于:可以通过config()方法配置创建service。
var app = angular.module('app', []); app.provider('demoService', function() { this.$get = function() { var service = { getName: function() { var myName = 'Tom'; return myName; } } return service; } })
provider应用场景:
当我们需要在应用开始前对service进行配置的时候,eg:我们需要配置services在不同的部署环境里(开发、测试、生产),使用不同的后端接口处理时。
当我们打算发布开源时。
参考资料:AngularJS中factory,service,provider的区别
过滤器(filter):
用于处理数据的格式化(format),eg:日期格式化、数字精度处理、字符串截取、对象排序等。var app = angular.module('app', []); app.filter('sortFilter', function() { return function(type) { if(type.toUpperCase() == 'ASC') { return 'DESC'; } else { return 'ASC'; } } })
参考资料:AngularJS filter详解
其他资料:
Angular学习笔记AngularJS表单基础
何时应该使用Directive、Controller、Service?
AngularJS+RequireJS
AngularJS与RequireJS集成
玩转AngularJS的promise
实战总结:
AngularJS实战总结AngularJS中的一些坑
AngularJS开发一些经验总结
深入:
AngularJS数据双向绑定揭秘理解AngularJS的依赖注入
总结:
初识ng时,被它的依赖注入所迷惑,又被它的双向数据绑定深深吸引,颠覆了以往用jQuery做项目时的思想。仅记得做Java项目时,spring框架有一套依赖注入的模式。前端框架中引入依赖注入的思想,不得不佩服ng作者的脑洞。
后端出生的FE,难以抗拒地喜欢上了这个JS框架,虽然它被很多人质疑(学习成本高,太臃肿etc)。
相信会有更多的FE engineer爱上它。
PS:
文中若有不妥之处,请留言or私信告知,不甚感激。相关文章推荐
- AngularJS性能优化心得,自己踩过的抗,及一些别人的经验(转哦)
- StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维模式?
- AngularJs记录学习01
- AngularJs中$cookies的用法
- 学习 AngularJs 终于有点进步了。
- angular实例模态【modal】
- 初次学习AngularJS
- angular学习注意事项
- html中调用angularjs函数需要加上()
- Notepad 关于angularJS的自动填充不靠谱
- Angular 监听路由变化事件
- angularjs应用骨架(4)
- AngularJs中文社区学习资料
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现(三)
- AngularJS学习(三)
- angular启动过程分析
- AngularJS--begining
- 【AngularJS】【02】AngularJS应用骨架