a-tokyo / generator-at-angular

🏗Yeoman Generator for angular that uses Webpack as a module bundler, SASS as CSS preprocessor, UI router as default angular route, Karma with Jasmine for testing and Auto-generated Docs.

generator-at-angular

Yeoman generator for AngularJS + Webpack with ES6 and SASS.wiki

• Babel 6 with ES2017 features.
• Latest Webpack with Tree Shaking feature enabled.
• SASS as CSS preprocessor.
• Angular UI router as default router.
• Karma and Jasmine for testing.
• All necessary webpack loaders already included (Sass, Images, Fonts, ngAnnotate, ngTemplateCache, etc.)
• Proxy configured to make cross origin requests with a simple prefix.
• Automatic Application Documentation

Directory Layout

├── /config/                                         #Configurations
│   └── /webpack/                                    #Webpack config files
│   │   ├── /environments/                           #Webpack env configs
│   │   │   ├── /development.js                      #Development env config
│   │   │   └── /production.js                       #Production env config
│   │   └── global.js                                #Global webpack config
├── /dist/                                           #The built application directory to be deployed
├── /docs/                                           #Application Documentation (Auto Generated)
│   ├── /docs-assets/                                #Application Documentation assets
│   │   └──/docs.js                                  #Application Documentation in JSON format (Auto Generated and editable)
│   └── /docs.html                                   #Application Documentation HTML (Auto Generated)
├── /node_modules/                                   #3rd-party libraries and utilities
├── /src/                                            #Source folder
│   ├── /app/                                        #Application code
│   │   ├── /components/                             #Shared UI components
│   │   │   └── /component/                          #Shared component. Place component's styles, components, directives, templates here
│   │   │   │   ├── /components/                     #Nested components. Place nested components here.
│   │   │   │   ├── /directives/                     #Component related directives.
│   │   │   │   ├── /services/                       #Component services.
│   │   │   │   ├── /component.component-spec.js     #Component unit tests JS                 
│   │   │   │   ├── /component.component.js          #Component definition JS                 
│   │   │   │   ├── /component.component.html        #Component template          
│   │   │   │   ├── /component.module.js             #Component module                 
│   │   │   │   └── /component.component.scss        #Component styles             
│   │   ├── /core/                                   #Shared angular services/directives
│   │   │   ├── /directives/                         #Shared directives
│   │   │   │   └── /directive/                      #Shared directive. Place directive's templates and controller here.
│   │   │   │   │   ├── /directive.directive-spec.js #Directive unit tests
│   │   │   │   │   ├── /directive.directive.js      #Directive definition, link and controller
│   │   │   │   │   ├── /directive.html              #Directive template (optional)
│   │   │   │   │   └── /directive.scss              #Directive styles (optional)
│   │   │   ├── /services/                           #Shared services
│   │   │   │   └── /service/                        #Shared directive. Place directive's templates and controller here.
│   │   │   │   │   ├── /service.factory-spec.js     #Service unit tests
│   │   │   │   │   └── /service.factory.js          #Service definition
│   │   │   └── /core.module.js                      #Import of all core components should be here
│   │   ├── /pages/                                  #All pages-dependent content should place here
│   │   │   ├── /page/                               #page
│   │   │   │   ├── /page.controller-spec.js         #page Controller unit tests
│   │   │   │   ├── /page.controller.js              #page Controller
│   │   │   │   ├── /page.html                       #page template
│   │   │   │   ├── /page.module.js                  #page module
│   │   │   │   ├── /page.route.js                   #page routes
│   │   │   │   └── /page.scss                       #page styles
│   │   │   └── /.../                                #Other pages...
│   │   ├── /index.bootstrap.js                      #Entry point. Import internal and external modules and bootstrap (RUN) angular application
│   │   ├── /index.components.js                     #Custom components definition
│   │   ├── /index.config.js                         #Function that will be triggered in Angular's "config" phase
│   │   ├── /index.module.js                         #Main application's module
│   │   ├── /index.routes.js                         #Describe only "otherwise" and async routes here
│   │   ├── /index.run.js                            #Function that will be triggered in Angular's "run" phase
│   │   ├── /index.vendor.js                         #Import all vendors and 3rd party plugins here
│   ├── /assets/                                     #Static content
│   │   ├── /data/                                   #Data (e.g: JSON files)
│   │   ├── /fonts/                                  #Fonts
│   │   ├── /images/                                 #Images
│   │   ├── /js/                                     #Extra libs folder
│   │   └── /styles/                                 #Styles folder
│   │       ├── /css/                                #CSS, place external css files here
│   │       └── /sass/                               #SASS
│   │           ├── /fonts.scss                      #Fonts SASS file, define your fonts here.
│   │           ├── /index.scss                      #Index SASS entry file, bundles all SASS files.
│   │           └── /main.scss                       #Main SASS file, define your global styling here.
│   ├── favicon.ico                                  #Application icon to be displayed in bookmarks
│   └── tpl-index.ejs                                #Template for html-webpack-plugin that will be transpiled into index.html in /dist
├── .babelrc                                         #Babel config with presets and plugins
├── .editorconfig                                    #Editor config to help developers define and maintain consistent coding styles.
├── .eslintrc.json                                   #eslint config with parse options, rules, etc.
├── .gitignore                                       #List of files to ignore by git
├── .yo-rc.json                                      #Defines the root of the project, allows your user to run commands in subdirectories.
├── karma.conf.js                                    #Karma configuration file for testing
├── package.json                                     #The list of project dependencies and NPM scripts
├── README.md                                        #README file
├── test-context.js                                  #Test context, '*-spec.js' files
└── webpack.config.js                                #Bundling and optimization settings for Webpack

Getting Started

Prerequisites: Node, Yeoman and Webpack.

• To install Node, visit nodeJS

• To install Yeoman and Webpack: npm install -g yo webpack

Next, install this generator:

npm i -g generator-at-angular

Creating a project:

mkdir MyAwesomeApp && cd $_
yo at-angular

Running a generator:

yo at-angular                                                # Generates an angular appplication
yo at-angular:page my-page                                   # Generates a page (partial)
yo at-angular:service my-service                             # Generates a service
yo at-angular:service my-component/my-service                # Generates a service in a component
yo at-angular:directive my-directive                         # Generates a shared directive
yo at-angular:directive my-component/my-directive            # Generates a directive in a component
yo at-angular:component my-component                         # Generates a component
yo at-angular:component my-component/my-nested-component     # Generates a nested component
yo at-angular:component my-component/my-nested-component/... # Generates a multiple nested component
yo at-angular:remove                                         # Runs the at removal tool to remove a generated item

Running the project:

npm start or npm run dev - To start development server on localhost:8080.

npm run build - To make production-ready build run after few moments you will see build id dist folder.

npm test - To run all tests once, should be used for the CI.

npm run tests - To run tests in watch mode.

npm run docs - To open the auto-generated docs in your default browser.

Out of the box optional supports:

• Angular Material: UI Component framework provides a set of reusable UI components based on Google’s Material Design. https://material.angularjs.org/latest/getting-started
• Boostrap Sass: bootstrap-sass is a Sass-powered version of Bootstrap (Once Boostrap 4 is stable it'll be used instead of 3)

Extra Features

• Automatic Application Documentation
  • Documentation can be view in docs/docs.html which is a simple angular application to view the docs in a neat way.
  • The Documentation itself is stored in docs/docs-assets/docs.js in JSON that can be edited and customized.

Generator options

• To create an angular application quickly using the defaults run
  yo at-angular --d or yo at-angular --default
• To create an angular application quickly using the DREIDEV structure and defaults run
  yo at-angular --dreidev

Tips

• To keep the SASS/SCSS clean and modular use BEM Syntax
• To keep the git repository's branch model modular and scalable use git flow
• For more information about versions, features and migration check the wiki
• For help, questions, feature requests and bug reports, submit an issue

Frequently faced problems

While bulding, error css-loader module not found:

In your package.json replace "extract-text-webpack-plugin": "^2.0.0-beta.4", with "extract-text-webpack-plugin": "2.0.0-beta.5",

---

Changelog

Contribution

generator-at-angular's Issues

Any issues building projects?

no problem running via npm start, however filled with red on postcss when trying to run "npm run build"

any ideas what is causing it?

how to define a selector in generated component?

let someComponent = {
selector: 'fuzer',
templateUrl: componentTpl,
controller: SomeController,
bindings: {}
};

trying to show it with < fuzer ></ fuzer > all to no effect. What am I missing?