6个强大的AngularJS扩展应用

jopen 10年前

AngularJS现在非常热门，是Google推出的一款非常优秀的前端JS框架。AngularJS最核心的概念是MVC、模块化、自动化双向 数据绑定、语义化标签、依赖注入等。目前AngularJS扩展还比较少，本文就向各位分享6个实用强大的AngularJS扩展应用。

6个强大的AngularJS扩展应用

1、AngularJS 认证模块 Satellizer

Satellizer是一个端到端的基于 token 的AngularJS认证模块，Satellizer支持Google、非死book、LinkedIn 和 推ter 认证体系，并且也提供邮箱和密码的登录方式，另外Satellizer支持 OAuth 1.0 和 2.0 规范，所以你可以更加灵活地扩展认证方法。

下面是Satellizer的使用代码示例：

angular.module('MyApp', ['satellizer'])    .config(function($authProvider) {        $authProvider.非死book({        clientId: '624059410963642',      });        $authProvider.google({        clientId: '631036554609-v5hm2amv4pvico3asfi97f54sc51ji4o.apps.googleusercontent.com'      });        $authProvider.github({        clientId: '0ba2600b1dbdb756688b'      });        $authProvider.linkedin({        clientId: '77cw786yignpzj'      });        $authProvider.推ter({        url: '/auth/推ter'      });        $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 组件。

6个强大的AngularJS扩展应用

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指令，所以并不需要依赖其他的样式和脚本。

6个强大的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 构建实时、多用户的应用程序。

6个强大的AngularJS扩展应用

下面是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 - 简单的列表 UI
  • Table 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 应用的便携，实现了延迟加载和多元化。

6个强大的AngularJS扩展应用

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真的非常方便，你不妨也可以试试。

本文链接：http://www.codeceo.com/article/6-angularjs-extension.html
本文作者：码农网 – 小峰