Skip to content

Latest commit

 

History

History
101 lines (86 loc) · 4.27 KB

README.md

File metadata and controls

101 lines (86 loc) · 4.27 KB
Raw

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