zoukankan      html  css  js  c++  java
  • 6个强大的AngularJS扩展应用

    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 - 简单的列表 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);
      };
    });

    官方主页:http://angular-translate.github.io/

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

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

  • 相关阅读:
    Java 8 Lambda 表达式
    OSGi 系列(十二)之 Http Service
    OSGi 系列(十三)之 Configuration Admin Service
    OSGi 系列(十四)之 Event Admin Service
    OSGi 系列(十六)之 JDBC Service
    OSGi 系列(十)之 Blueprint
    OSGi 系列(七)之服务的监听、跟踪、声明等
    OSGi 系列(六)之服务的使用
    OSGi 系列(三)之 bundle 事件监听
    OSGi 系列(三)之 bundle 详解
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6494809.html
Copyright © 2011-2022 走看看