帮酷LOGO
  • 显示原文与译文双语对照的内容
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  |  如果智培  |  酷兔英语