scalpovich / generator-angular-pro

AngularJS project generator for scalable, enterprise-grade web and mobile applications

generator-angular-pro

Web/mobile Angular project generator for scalable, enterprise-grade applications.

Includes modern (and stable) tools and workflow, best practices, base template and an exhaustive documentation. Get started quickly even with beginner teams, in any work environment (proxy included).

Built on experience with large web projects, with architecture choices aiming for a clean, no-brainer development experience.

See generated project example here.

Getting started

1. Install required tools:

npm install -g yo gulp bower generator-angular-pro

2. Create your application:

yo angular-pro

Project structure

gulp/                   individual gulp tasks
sources/                project source code
|- data/                other project data, will be copied as-is
|- fonts/               project fonts
|- images/              project images
|- libraries/           Bower dependencies
|- main/                app components
|  |- main.config.ts    app configuration code
|  |- main.constants.ts app configuration constants
|  |- main.module.ts    app module definition
|  |- main.routes.ts    app routes
|  |- main.run.ts       app entry point
|  |- main.wrappers.ts  AngularJS module wrappers for external libraries
|  |- main.scss         style entry point
|  |- helpers/          helper services
|  |- screens/          application screens
|  |- shell/            application shell
|  |- ui-components/    shared UI components
|  |- web-services/     web services
|  +- ...               additional components
|- translations/        translations files
+- index.html           html entry point
e2e/                    end-to-end tests
dist/                   compiled version (www/ for mobile projects)
typings/                TypeScript definitions
reports/                test and coverage reports + generated documentation
platforms/              Cordova platform-specific projects (for mobile projects)
plugins/                Cordova plugins (for mobile projects)
resources/              icon and splash screen resources (for mobile projects)
gulpfile.config.js      gulp tasks configuration

Coding guides

• JavaScript
• TypeScript
• CSS
• HTML
• Unit tests
• End-to-end tests

Additional documentation

• Cordova (for mobile projects)
• Build environments
• i18n
• Proxy configuration
• Updating dependencies

Features

• TypeScript, Sass, pure HTML
• Gettext for translations
• TSLint
• Unit tests (Jasmine)
• End-to-end tests (Protractor)
• Development server with API proxy and live reload (BrowserSync)
• Automatic CSS browser support with autoprefixer
• Automatic Angular modules annotation (ngAnnotate)
• Production code and assets optimization:
  • Bundling with useref
  • Minification of JavaScript, CSS and HTML
  • Images optimization (imagemin)
  • Asset revisionning (rev)
• i18n workflow (https://angular-gettext.rocketeer.be)
• Multiple build environments management
• Task automation with gulp

Libraries

• AngularJS
• Angular-gettext
• AngularUI Router
• Lodash
• ngCordova (for mobile projects)
• UI based on Bootstrap...
  • UI Bootsrap
  • Bootstrap
  • Font Awesome
• ... or Ionic
  • Ionic

License

MIT