git://www.github.com/michaelbromley/angular-es6.git
git clone http://www.github.com/michaelbromley/angular-es6
$ svn co --depth empty http://www.github.com/michaelbromley/angular-es6
Checked out revision 1.
$ cd repo
$ svn up trunk
一个在 AngularJS 1.x 应用程序中使用ES6类的示例方法。
查看文章中的ES6类 explore 1.x 以获得完整的解释。
更新:2015年10月: 这里 repo 中的材料已经被其他人进一步开发。 如果你想在 Angular 样式中编写 Angular 1.x 应用程序,请查看与这里 repo 不同的 ng-forward项目插件,该项目正处于积极开发阶段。
下面的类定义样式通过在项目中包含文件 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 install
和 bower install
下载所需的依赖项。
然后 gulp watch
开始攻击 !
MIT