帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
An experiment in using ES6 features with AngularJS 1.x

  • 源代碼名稱:angular-es6
  • 源代碼網址:http://www.github.com/michaelbromley/angular-es6
  • angular-es6源代碼文檔
  • angular-es6源代碼下載
  • Git URL:
    git://www.github.com/michaelbromley/angular-es6.git
  • Git Clone代碼到本地:
    git clone http://www.github.com/michaelbromley/angular-es6
  • Subversion代碼到本地:
    $ svn co --depth empty http://www.github.com/michaelbromley/angular-es6
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Angular ES6

    一個在 AngularJS 1.x 應用程序中使用ES6類的示例方法。

    查看文章中的ES6類 explore 1.x 以獲得完整的解釋。

    更新:2015年10月: 這裡 repo 中的材料已經被其他人進一步開發。 如果你想在 Angular 樣式中編寫 Angular 1.x 應用程序,請查看與這裡 repo 不同的 ng-forward項目插件,該項目正處於積極開發階段。

    這裡有工作演示

    register.js

    下面的類定義樣式通過在項目中包含文件 register.js 插件來啟用,它公開全局函數。

    API如下所示:

    classMyAngularComponent {
     //.. .}register(appName)
    . controller('MyController', MyAngularComponent)
    . service('myService', MyAngularComponent)
    . provider('myOtherService', MyAngularComponent)
    . factory('myFactory', MyAngularComponent)
    . directive('myDirective', MyAngularComponent);

    示例組件類

    電子郵件服務

    classUserService {
     /*@ngInject*/constructor($http) {
     this.$http= $http;
     }
     getFullName() {
     returnthis.$http.get('api/user/details');
     }
    }register('app').service('userService', UserService);

    控制器

    classMyController {
     /*@ngInject*/constructor(userService) {
     userService.getFullName()
    . then(result=>this.userName=result.fullName);
     }
    }register('app').controller('MyController', MyController);

    工廠

    classThingFactory {
     /*@ngInject*/constructor($timeout) {
     this.$timeout= $timeout;
     }
     newThing() {
     console.log('Getting a new Thing...');
     returnthis.$timeout(() =>newThing(), 1000);
     }
    }register('app').factory('thingFactory', ThingFactory);

    指令

    classMyDirective {
     /*@ngInject*/constructor($interval) {
     this.template='<div>I'm a directive!</div>';
     this.restrict='E';
     this.scope= {}
     // etc. for the usual config options// allows us to use the injected dependencies// elsewhere in the directive (e.g. compile or link function)this.$interval= $interval;
     }
     // optional compile functioncompile(tElement) {
     tElement.css('position', 'absolute');
     }
     // optional link functionlink(scope, element) {
     this.$interval(() =>this.move(element), 1000);
     }
     move(element) {
     element.css('left', (Math.random() *500) +'px');
     element.css('top', (Math.random() *500) +'px');
     }
    }register('app').directive('myDirective', MyDirective);

    提供程序

    classThingServiceProvider {
     constructor() {
     this.apiPath='default/api';
     }
     setApiPath(value) {
     this.apiPath= value;
     }
     /*@ngInject*/$get($http) {
     return {
     getThings: () =>$http.get(this.apiPath)
     };
     }
    }register('app').provider('thingService', ThingServiceProvider);

    插件生成

    克隆這裡 repo,然後 npm installbower install 下載所需的依賴項。

    然後 gulp watch 開始攻擊 !

    許可證

    MIT




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语