6個強大的AngularJS擴展應用

AngularJS現在非常熱門，是Google推出的一款非常優秀的前端JS框架。AngularJS最核心的概念是MVC、模塊化、自動化雙向 數據綁定、語義化標簽、依賴注入等。目前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',
});


});</pre> 
  
官方地址：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 - 簡單的列表 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 應用的便攜，實現了延遲加載和多元化。
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);
  };
});</pre> 
  
官方主頁：http://angular-translate.github.io/

隨著AngularJS的不斷流行，會有更多的擴展應用，并大部分都是開源的項目，AngularJS真的非常方便，你不妨也可以試試。



本文鏈接：http://www.codeceo.com/article/6-angularjs-extension.html

本文作者：碼農網 – 小峰
                    

                        
 本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/85fe8a                        
                        
 angularjs