barbagrigia / angular-starter

Шаблон для быстрого старта проекта на Angular

angular-starter

Generator to fast start project with angular, webpack, postcss+sugarss, babel, eslint

Installation

First, install Yeoman and generator-as using npm (You must use Node.js v4+).

npm install -g generator-as yo

Then generate your new project:

yo as project-name

Modern stack

This boilerplate use this technologies:

• Node.js v4+ (You must use v4+)
• Webpack
• PostCSS
• Angular
• Babel
• Eslint

PostCSS

PostCSS is great tool to work with CSS.
There are indert-base SugarSS syntax in this boilerplate.
It is used precss and postcss-cssnext to process CSS.
It is used to lint CSS by stylelint.

Styleguide generator

It is generated styleguide for components from README.md files. See /styleguide page in your application.

Yeoman generator

Automate routine with yeoman generator. Just use these commands:

Create project:

yo as [PROJECT]

Add component:

yo as:component [--no-styles] [COMPONENT]

Add directive:

yo as:directive [DIRECTIVE]

Add filter:

yo as:filter [FILTER]

Add page:

yo as:page [--url URL] [STATE]

Add service:

yo as:service [SERVICE]

Separate modules for configs

Important part of the boilerplate all configs are splitted to modules. So they can update automatically by running npm update. For extending webpack config used special wpk-manager syntax.

Best practices

Use components

Avoid using jade mixins, use angular components instead. Angular components more flexible and reusable.

Use local reset

Use local css reset by all: initial in css. It helps share code between projects.

Recommended tools

easy ➞ hard to learn
🌕🌖🌗🌘🌑

• EditorConfig 🌕
• Eslint integration for your editor 🌗
• Stylelint integration for your editor 🌗
• Babel 🌗
• Local css reset by all: initial 🌘

License

MIT © Maxim Samoilov