6个强大的AngularJS扩展应用
2016-03-04 10:03
796 查看
本文链接:/article/1213639.html
本文作者:码农网 – 小峰
AngularJS现在非常热门,是Google推出的一款非常优秀的前端JS框架。AngularJS最核心的概念是MVC、模块化、自动化双向数据绑 定、语义化标签、依赖注入等。目前AngularJS扩展还比较少,本文就向各位分享6个实用强大的AngularJS扩展应用。
下面是Satellizer的使用代码示例:
官方地址:https://github.com/sahat/satellizer
AngularUI包含以下模块:
UI-Utils
UI-Modules
UI-Alias
UI-Bootstrap
NG-Grid
UI-Router
IDE Plugins
GSoC
官方主页:http://angular-ui.github.io/
下面是一个示例:
官方主页:http://mgcrea.github.io/angular-strap/
下面是config.js文件:
打开一个示例页面:
Table AJAX - 高级的列表 UI
Tree Browser - 简单的树形 UI
Loading Indicators - 简单的指令
Global configuration - 所有组件都是全局配置使用
Customizable - 所有组件都是支持高度自定义的
官方主页:https://github.com/Adaptv/adapt-strap
DEMO示例:
官方主页:http://angular-translate.github.io/
随着AngularJS的不断流行,会有更多的扩展应用,并大部分都是开源的项目,AngularJS真的非常方便,你不妨也可以试试。
本文链接:/article/1213639.html
本文作者:码农网 – 小峰
本文作者:码农网 – 小峰
AngularJS现在非常热门,是Google推出的一款非常优秀的前端JS框架。AngularJS最核心的概念是MVC、模块化、自动化双向数据绑 定、语义化标签、依赖注入等。目前AngularJS扩展还比较少,本文就向各位分享6个实用强大的AngularJS扩展应用。
1、AngularJS 认证模块 Satellizer
Satellizer是一个端到端的基于 token 的AngularJS认证模块,Satellizer支持Google、Facebook、LinkedIn 和 Twitter 认证体系,并且也提供邮箱和密码的登录方式,另外Satellizer支持 OAuth 1.0 和 2.0 规范,所以你可以更加灵活地扩展认证方法。下面是Satellizer的使用代码示例:
angular.module('MyApp', ['satellizer']) .config(function($authProvider) { $authProvider.facebook({ clientId: '624059410963642', }); $authProvider.google({ clientId: '631036554609-v5hm2amv4pvico3asfi97f54sc51ji4o.apps.googleusercontent.com' }); $authProvider.github({ clientId: '0ba2600b1dbdb756688b' }); $authProvider.linkedin({ clientId: '77cw786yignpzj' }); $authProvider.twitter({ url: '/auth/twitter' }); $authProvider.oauth2({ name: 'foursquare', url: '/auth/foursquare', redirectUri: window.location.origin, clientId: 'MTCEJ3NGW2PNNB31WOSBFDSAD4MTHYVAZ1UKIULXZ2CVFC2K', authorizationEndpoint: 'https://foursquare.com/oauth2/authenticate', }); });
官方地址:https://github.com/sahat/satellizer
2、AngularJS UI 扩展 AngularUI
AngularUI为AngularJS提供了很多UI增强效果,并且提供了IE、jQuery 兼容,以及一些常用 UI 组件。AngularUI包含以下模块:
UI-Utils
UI-Modules
UI-Alias
UI-Bootstrap
NG-Grid
UI-Router
IDE Plugins
GSoC
官方主页:http://angular-ui.github.io/
3、Bootstrap 集成 AngularJS 模块 AngularStrap
AngularStrap可以非常完美地将Bootstrap集成到AngularJS中,AngularStrap包含大部分支持AngularJS指令,所以并不需要依赖其他的样式和脚本。下面是一个示例:
angular.module(‘myApp’) .controller(‘DemoCtrl’, function($scope, $modal) { // Show a basic modal from a controller var myModal = $modal({title: ‘My Title’, content: ‘My Content’, show: true}); // Pre-fetch an external template populated with a custom scope var myOtherModal = $modal({scope: $scope, template: ‘modal/docs/modal.tpl.demo.html’, show: false}); // Show when some event occurs (use $promise property to ensure the template has been loaded) $scope.showModal = function() { myOtherModal.$promise.then(myOtherModal.show); }; })
官方主页:http://mgcrea.github.io/angular-strap/
4、AngularStrap 实时、多用户应用 GoAngular
GoAngular 可让你轻松使用 AngularJS 和 GoInstant 构建实时、多用户的应用程序。下面是config.js文件:
window.CONFIG = { connectUrl: 'https://goinstant.net/YOUR_ACCOUNT/YOUR_APP' };
打开一个示例页面:
$ open examples/index.html
5、AngularJS UI 组件 adapt-strap
adapt-strap 是 AngularJS UI 组件和实用工具,是基于 AngularJS 1.2+ 和 bootstrap 3 的。特性:
Table Lite - 简单的列表 UITable AJAX - 高级的列表 UI
Tree Browser - 简单的树形 UI
Loading Indicators - 简单的指令
Global configuration - 所有组件都是全局配置使用
Customizable - 所有组件都是支持高度自定义的
官方主页:https://github.com/Adaptv/adapt-strap
6、AngularJS 的国际化模块 angular-translate
angular-translate 是一个 AngularJS 的模块,用于简化 i18n 和 l10n 应用的便携,实现了延迟加载和多元化。DEMO示例:
var app = angular.module('at', ['pascalprecht.translate']); app.config(function ($translateProvider) { $translateProvider.translations('en', { TITLE: 'Hello', FOO: 'This is a paragraph.', BUTTON_LANG_EN: 'english', BUTTON_LANG_DE: 'german' }); $translateProvider.translations('de', { TITLE: 'Hallo', FOO: 'Dies ist ein Paragraph.', BUTTON_LANG_EN: 'englisch', BUTTON_LANG_DE: 'deutsch' }); $translateProvider.preferredLanguage('en'); }); app.controller('Ctrl', function ($scope, $translate) { $scope.changeLanguage = function (key) { $translate.use(key); }; });
官方主页:http://angular-translate.github.io/
随着AngularJS的不断流行,会有更多的扩展应用,并大部分都是开源的项目,AngularJS真的非常方便,你不妨也可以试试。
本文链接:/article/1213639.html
本文作者:码农网 – 小峰
相关文章推荐
- ExtJS vs AngularJS
- AngularJS中的Provider们:Service和Factory等的区别
- AngularJS中service,factory,provider的区别
- 深入学习AngularJS中数据的双向绑定机制
- 详解JavaScript的AngularJS框架中的作用域与数据绑定
- 实例剖析AngularJS框架中数据的双向绑定运用
- 关于 AngularJS 的数据绑定
- 【Angularjs文档翻译及实例】DOM事件
- AngularJS 常用模块书写建议
- AngularJS中的依赖注入
- 『AngularJS』$location 服务介绍(1)
- angularjs用FormData上传文件
- angularjs表达式中不能直接调用外部的js函数
- AngularJS中的控制器和作用域
- angularjs 和 trim方法冲突
- #学习笔记#(51)angular自定义标签director
- 走进AngularJs(八) ng的路由机制
- Angularjs Ng_repeat中实现复选框选中并显示不同的样式
- 走进AngularJs(中) 服务机制1
- ng-include用法分析以及多标签页面的简单实现方式