6款強大的AngularJS擴展應(yīng)用

AngularJS現(xiàn)在非常熱門，是Google推出的一款非常優(yōu)秀的前端JS框架。AngularJS最核心的概念是MVC、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標簽、依賴注入等。目前AngularJS擴展還比較少，本文就向各位分享6個實用強大的AngularJS擴展應(yīng)用。

1、AngularJS 認證模塊 Satellizer

Satellizer是一個端到端的基于 token 的AngularJS認證模塊，Satellizer支持Google、Facebook、LinkedIn 和 Twitter 認證體系，并且也提供郵箱和密碼的登錄方式，另外Satellizer支持 OAuth 1.0 和 2.0 規(guī)范，所以你可以更加靈活地擴展認證方法。

下面是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 實時、多用戶應(yīng)用 GoAngular

GoAngular 可讓你輕松使用 AngularJS 和 GoInstant 構(gòu)建實時、多用戶的應(yīng)用程序。

下面是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 應(yīng)用的便攜，實現(xiàn)了延遲加載和多元化。

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的不斷流行，會有更多的擴展應(yīng)用，并大部分都是開源的項目，AngularJS真的非常方便，你不妨也可以試試。