angular-es6, 在ES6的1.x 中使用特性的实验

一个在 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 install 和 bower install 下载所需的依赖项。

然后 gulp watch 开始攻击 ！

许可证

MIT