ng-classy, 轻松使用 Angular 1和 ES6+

分享于 

7分钟阅读

GitHub

  繁體 雙語
Use Angular 1 and ES6+ with ease.
  • 源代码名称:ng-classy
  • 源代码网址:http://www.github.com/eaze/ng-classy
  • ng-classy源代码文档
  • ng-classy源代码下载
  • Git URL:
    git://www.github.com/eaze/ng-classy.git
    Git Clone代码到本地:
    git clone http://www.github.com/eaze/ng-classy
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/eaze/ng-classy
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    经典
    
    npm install ng-classy --save-dev
    
    
    
    

    对 Angular 1 ES6问题的偏执处理。

    ( API文档位于底部)

    插件开发

    • npm install
    • npm test
    • npm run test-watch

    命令行目

    使用ES6类和ES6+修饰符。 Ditch Angular 1模块。

    为什么因为下面是最好的Angular 1 + ES6 Pattern,但它有很多样板文件:?

    //These all `export default` angular modulesimportdirectiveOneModulefrom'../directive-one';importdirectiveTwoModulefrom'../directive-two';importserviceOneModulefrom'../service-one';//Define angular dependencies. This is pure boilerplate.exportdefaultangular.module('myComponent', [
     directiveOneModule.name,
     directiveTwoModule.name,
     serviceOneModule.name,
    ])
     // Make a state that maps to our component in a decoupled manner,// so our component is reusable outside the state.// Much boilerplate.. config(($stateProvider) => {
     $stateProvider.state('myComponentState', {
     url:'url/:param',
     template:'<my-component param="$stateParams.param">',
     controller: ($stateParams, $scope) =>$scope.$stateParams= $stateParams
     })
     })
     // Declare a component.// Much boilerplate.. directive('myComponent', () => {
     return {
     restrict:'E',
     scope: {},
     template:'my template with a {{vm.param}} binding.' bindToController: {
     param:'=' }
     controllerAs:'vm',
     controller: MyComponent
     };
     });// Finally, we can actually implement our component.classMyComponent {
    }

    我们来解决这个问题。

    • 我们不关心 Angular MODULE 依赖关系。 ES6处理我们的依赖关系。
    • 让我们把导入的所有东西放到一个全局 Angular MODULE 上。 只有通过ES6显式加载的内容才会被 Angular 加载。
    • 最后,我们几乎总是希望具有某些参数的状态映射到具有属性绑定的组件。 所以我们把它制作成。
    // Importing these causes them to implicitly be defined as dependencies on our angular module.import {serviceOne} from'../service-one';import {serviceTwo} from'../service-two';import {directiveOne} from'../directive-one';import {Component, State} from'ng-classy';
    @Component({
     // selector: 'custom-selectors-work-too', bind: {
     param:'=' },
     template:'my template with a {{vm.param}} binding.'})
    @State('myComponentState', {
     url:'url/:param'})exportclassMyComponent {
     // Creates a <my-component> element directive, using the class as a// controller and `controllerAs: 'vm'`// Additionally creates a state whose template is// '<my-component param="$stateParams.param"></my-component>'.}

    再见,样板文件你好,轻松。

    API和用法

    你需要理解ES6导入和 ES6 decorator来理解这一点。

    要在你的应用程序中使用 ng,请执行以下操作:

    importclassyfrom'ng-classy';import {MyComponent} from'./path/to/myComponent';// Assuming `ng-app="myApp"` exists somewhere...angular.module('myApp', [
     classy.app.name]);

    对于测试,只需导入你的应用程序代码 angular.mock.module(classy.app.name) 检查测试/索引。spec。js。

    对于你的应用程序,只要使用以下API就可以在任何地方使用 classy:

    importclassyfrom'ng-classy';/* * # classy.app * The angular module instance that your whole app shares. * Use it for things like angular config, constants, etc: `classy.app.config(() => {})`*/classy.app;/* * # @classy.Service() * Registers 'MyService' as an injectable service on your app.*/@classy.Service()classMyService {
    }/* * # @classy.Component(options) * Registers `<my-component>` as an element directive. * Pass in options that map to a directive definition object. * Has a shortcut field, `bind`, that maps to `bindToController`. * `options` defaults to the following in this case: * { * restrict: 'E', * scope: {}, * bindToController: options.bind || {}, * controllerAs: 'vm', * controller: MyComponent * }*/@classy.Component({
     bind: {
     color:'=' },
     template:'some template with a binding to color {{vm.color}}' })classMyComponent {
    }/* * # @classy.State(name, options) * Must be called after `@classy.Component()` on a class. * Registers a new state with the the given name and state options. * The template will default to instantiating the given component with the url parameters as attributes. * See the example at the beginning of the README.*/@classy.Component({
     bind: {
     someParam:'=' },
     template:'we have a parameter, {{vm.someParam}}' }
    })
    @classy.State('myState', {
     url:'url/:someParam'})classSomeComponent {
    }

    模板

    如果要将模板与组件中的其他文件分离,请使用browserify转换或者 web pack html-loader 模块。

    importtemplatefrom'./template.html';
    @Component({
     bind: {
     param:'=' },
     template: template
    })classMyComponent {
    }

    USE  angular  es6  
    相关文章