The simple starter Yeoman generator for angualr 1.x with ES6.
What is ng6s?
A simple starter for angular 1.x with es6. This is a simple yomen generator for those who are looking for using ES6 with angular 1.x
- Web Component approach.
- Package management with npm NPM
- The best practice in directory/file organization for Angular
- For both small and large scale applications
- ES6 to ES5 conversion using browserify with babel
- A ready-to-go build system for working with ES6
- Tasks for generating additional boilerplate Angular components
- A full testing system in place
Besides using ES6 with angular 1.x we want to a way to ensure easy transition to Angular2. So everything in ng6 will look like.
client --app/ ----app.js * entry file for app ----app.html * template for app ----components/ * where most of components live ------components.js * entry file for components ------home/ * home component --------home.js * home entry file --------home.component.js * directive for home --------home.controller.js * controller for home --------home.css * styles for home --------home.html * template for home --------home.spec.js * specs for home ----common/ * where common things in our app live
All test are written in ES6 too because why not! We use Babelify to take care of all the logistics of getting those files run in browsers just like our client files. Our setup is:
To run test just
npm test or
karma start. Read more about testing below
What do you need to run this:
- NodeJS Once you have those, you should install these global npm packages:
npm i -g karma
npm i -g karma-cli
To install generator-ng6s from npm, run:
npm install -g generator-ng6s
How to use it?
To initiate the generator go to the folder we you want your project and run the following command.
We will have following commands.
this will start the production server
npm run production
this will start the live reloading dev server
build your code for production it will generate only two file app.min.js and index.html
It will start your karma tests.
Following a good practice allows us to guarantee certain things. We can take advantage of these guarantees and use a task to automate things. Because the components we make will almost always have the same structure, we can generate this boilerplate for you. Boilerplate includes:
- Component folder
- Component entry file which will
importall of its dependencies
- Component component file, or directive file will will also
- Component template
- Component controller
- Component css
- Component spec with passing tests already written
You can create all this by hand, but it gets old fast! To generate a component, we must use the
yo ng6:component component-name
component-name is the name of the component you want to create. Be sure to be unique, or it will override an existing component.
The component will be created by default on the root of
You can pass in a path relative to
app/components/ and your component will be made there.
yo ng6:component signup will create a
signup component at
yo ng6:component footer and if you give path as
../common will create a
footer component at
Yeoman travels light. He didn't pack any generators when he moved in. You can think of a generator like a plug-in. You get to choose what type of application you wish to create, such as a Backbone application or even a Chrome extension.
To install generator-ng6 from npm, run:
npm install -g generator-ng6
Finally, initiate the generator: