ng1

About

This tool can generate templates and seeds for your Angular 1 projects.

Install

npm install -g ng1

Debugging

You can add --verbose to your command to also log the gulp output.

Generators

At the moment, ng1 is shipped with 5 generators:

• component
• constant
• factory
• route
• service

Generators will create new files/folders in appropriate place. They will also handle imports.

You can run a generator in the following way:

ng1 <generator> --name <name (camelcase)>

If you opt to not install ng1 globally, you can run npm run ng1 instead (so for example npm run ng1 service --name YourService).

Routes

At the moment there are a number of ways to include routes in your project.

In config.js

$stateProvider.state('myState', {
    component: 'myComponent',
    url: '/my-route',
    name: 'myStateName'
});

You can choose to use either the template, templateUrl or component property. Be aware that you can only use 1 of these per route! The component property (introduced by the ng-component-routing package) specifies the name of a component that will be loaded with this state.

We advise to include states directly as much as possible, to keep the config file clean. States defined here are usually abstract states or states that need to reroute, or other special cases. In 99% of the time, you can use the method described below.

Directly in generated routes

const myComponent = {
    bindings: {},
    routeOpts: {
        name: 'myStateName',
        url: '/my-state-name',
        pageTitle: 'myStateName',
  },
  template,
  controller,
  controllerAs: 'vm'
};

This component would be generated by typing

ng1 route --name myStateName

When specifying a state directly like this, there is no need to include it in config.js. Pretty clean, right?

Resolving data

Normally, when you want data to be available in a state controller when the state loads, you would use resolves, like this:

$stateProvider.state('myState', {
    name: 'myState',
    resolve: {
        myData: ['MyService', MyService => MyService.myMethod()]
    }
});

In many cases we need to resolve the same method multiple times for multiple states. This can make our code pretty ugly. The syntax is also quite cumbersome. With the ng-component-routing module we use, we can simplify these processes.

This package introduces the Resolver service. This service exposes a method called add. This method allows you to do some powerful stuff.

In run.js, include the Resolve service and you can do the following:

Resolver.add('myData', ['MyService', MyService => MyService.myMethod()]);

Or, when adding multiple methods:

Resolver.add({
    myData: ['MyService', MyService => MyService.myMethod()],
    somethingElse: [AlsoAService, AlsoAService => AlsoAService.someMethod()]
});

This allows you to define states like this:

const myComponent = {
    bindings: {},
    routeOpts: {
        name: 'myStateName',
        url: '/my-state-name',
        pageTitle: 'myStateName',
        componentBindings: ['myData', 'somethingElse'],
        resolve: ['myData', 'somethingElse'],
  },
  template,
  controller,
  controllerAs: 'vm'
};

Or like this

$stateProvider.state('myState', {
    component: 'myComponent',
    resolve: ['myData', 'somethingElse']
});

Or even like this

$stateProvider.state('myState', {
    component: 'myComponent',
    resolve: {
        someRenamedProp: 'myData'
    }
});

The name you use in the resolver defines how you will get the data in your state controller. The data is available after the $onInit hook.

const controller = function() {
    this.$onInit = () => {
        //Your resolved data is available here
    };
};

So if you called your resolver myData, it will be available as this.myData in the controller.