Angular ES6 Starter (Generators, SCSS, i18n, Tests, Webpack, Bootstrap )

Features

ES 6 (JavaScript 2015)
app structure base on new component syntax
generators for scaffolding components and directives for consistent file structures and fast bootstrapping
Webpack ang Gulp
Browser Sync
NPM based (without bower)
PostCSS tasks (removing unused css classes, autoprefixing, font magician)
internationalization (i18n) with directive for changing language
API access with Ng-Resource
unit tests with Karma, Mocha, Chai, and PhantomJS (for CI)
SCSS and Bootstrap
ESLint
deployment bash scripts for CI
Gitlab CI configuration files
editors config files

Demo: http://ng-starter.escript.ninja

File Structure

Here's how it looks:

client
⋅⋅app/
⋅⋅⋅⋅app.js * app entry file
⋅⋅⋅⋅app.html * app template
....assets/ * global styles, images and vendor scripts
⋅⋅⋅⋅common/ * functionality pertinent to several components propagate into this directory
....directives/ * where directives live
⋅⋅⋅⋅components/ * where components live
⋅⋅⋅⋅⋅⋅components.js * components entry file
⋅⋅⋅⋅⋅⋅home/ * home component
⋅⋅⋅⋅⋅⋅⋅⋅home.js * home entry file (routes, configurations, and declarations occur here)
⋅⋅⋅⋅⋅⋅⋅⋅home.component.js * home "directive"
⋅⋅⋅⋅⋅⋅⋅⋅home.controller.js * home controller
........home.service.js * home service
⋅⋅⋅⋅⋅⋅⋅⋅home.scss * home styles
⋅⋅⋅⋅⋅⋅⋅⋅home.html * home template
⋅⋅⋅⋅⋅⋅⋅⋅home.spec.js * home specs (for entry, component, and controller)

Getting Started

Dependencies

Tools needed to run this app:

node and npm

If you want to generate new component or directive, its is recommended to install gulp globally by: npm install -g gulp

However, you can still use local version of gulp like this:

node_modules/.bin/gulp component --name myComp

Running the App

Basic npm scripts to handle the app:

npm start // Starting app in development mode
npm run build // Building production packages
npm run test // Test application
npm run deploy // Deploying production build to remote server via rsync

Generating Components and Directives

Starter can scaffolds a new Angular component or directive The component boilerplate task generates this:

⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.controller.js
........componentName.service.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.html
⋅⋅⋅⋅⋅⋅⋅⋅componentName.scss // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅componentName.spec.js // contains passing demonstration tests

The directive boilerplate task generates this:

⋅⋅⋅⋅⋅⋅directiveName/
⋅⋅⋅⋅⋅⋅⋅⋅directiveName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅directiveName.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅directiveName.directive.js
........directiveName.service.js
⋅⋅⋅⋅⋅⋅⋅⋅directiveName.html
⋅⋅⋅⋅⋅⋅⋅⋅directiveName.scss // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅directiveName.spec.js // contains passing demonstration tests

To generate a component, run gulp component --name componentName. To generate a directive, run gulp directive --name componentName.

The parameter following the --name flag is the name of the component/directive to be created. Ensure that it is unique or it will overwrite the preexisting identically-named component/directive.

The component will be created, by default, inside client/app/components. To change this, apply the --parent flag, followed by a path relative to client/app/components/.

For example, running gulp component --name signup --parent auth will create a signup component at client/app/components/auth/signup.

Because the argument to --name applies to the folder name and the actual component name, make sure to camelcase the component/directive names.

Disclaimer

This starter is upgraded and modified version of NG6 Angular Starter by AngularClass Licence: Apache 2.0

krzysztofsaja/ng-starter