6个强大的AngularJS扩展应用

向右看齐 2022-08-12 08:58 193阅读 0赞

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

![logo-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][https_github.com_sahat_satellizer]

## 2、AngularJS UI 扩展 AngularUI ##

AngularUI为AngularJS提供了很多UI增强效果，并且提供了IE、jQuery 兼容，以及一些常用 UI 组件。

![angularui][]

AngularUI包含以下模块：

*  UI-Utils
 *  UI-Modules
 *  UI-Alias
 *  UI-Bootstrap
 *  NG-Grid
 *  UI-Router
 *  IDE Plugins
 *  GSoC

官方主页：[http://angular-ui.github.io/][http_angular-ui.github.io]

## 3、Bootstrap 集成 AngularJS 模块 AngularStrap ##

AngularStrap可以非常完美地将Bootstrap集成到AngularJS中，AngularStrap包含大部分支持AngularJS指令，所以并不需要依赖其他的样式和脚本。

![angularstrap][]

下面是一个示例：

> 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/][http_mgcrea.github.io_angular-strap]

## 4、AngularStrap 实时、多用户应用 GoAngular ##

GoAngular 可让你轻松使用 AngularJS 和 GoInstant 构建实时、多用户的应用程序。

![goangular][]

下面是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][https_github.com_Adaptv_adapt-strap]

## 6、AngularJS 的国际化模块 angular-translate ##

angular-translate 是一个 AngularJS 的模块，用于简化 i18n 和 l10n 应用的便携，实现了延迟加载和多元化。

![angular-translate][]

DEMO示例：

官方主页：[http://angular-translate.github.io/][http_angular-translate.github.io]

随着AngularJS的不断流行，会有更多的扩展应用，并大部分都是开源的项目，AngularJS真的非常方便，你不妨也可以试试。

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

[logo-angularjs]: http://www.codeceo.com/wp-content/uploads/2014/09/logo-angularjs.jpg
[https_github.com_sahat_satellizer]: https://github.com/sahat/satellizer
[angularui]: http://www.codeceo.com/wp-content/uploads/2014/09/angularui.png
[http_angular-ui.github.io]: http://angular-ui.github.io/
[angularstrap]: http://www.codeceo.com/wp-content/uploads/2014/09/angularstrap.png
[http_mgcrea.github.io_angular-strap]: http://mgcrea.github.io/angular-strap/
[goangular]: http://www.codeceo.com/wp-content/uploads/2014/09/goangular.png
[https_github.com_Adaptv_adapt-strap]: https://github.com/Adaptv/adapt-strap
[angular-translate]: http://www.codeceo.com/wp-content/uploads/2014/09/angular-translate.png
[http_angular-translate.github.io]: http://angular-translate.github.io/
[http_www.codeceo.com_article_6-angularjs-extension.html]: http://www.codeceo.com/article/6-angularjs-extension.html
[Link 1]: http://www.codeceo.com/