Awesome Open Source
Awesome Open Source

generator-at-angular

npm version Build Status Coverage Status

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,553,085)Β 
Angular (12,644)Β 
Bootstrap (9,945)Β 
Webpack (9,742)Β 
Sass (6,080)Β 
Boilerplate (5,663)Β 
Documentation (4,496)Β 
Generator (3,810)Β 
Angular Material (869)Β 
Webpack2 (838)Β 
Modular (766)Β 
Es2015 (518)Β 
Documentation Tool (467)Β 
Yeoman Generator (414)Β 
Karma (407)Β 
Jasmine (391)Β 
Es2017 (135)Β 
Related Projects
Advertising πŸ“¦Β 9
All Projects
Application Programming Interfaces πŸ“¦Β 120
Applications πŸ“¦Β 181
Artificial Intelligence πŸ“¦Β 72
Blockchain πŸ“¦Β 70
Build Tools πŸ“¦Β 111
Cloud Computing πŸ“¦Β 79
Code Quality πŸ“¦Β 28
Collaboration πŸ“¦Β 30
Command Line Interface πŸ“¦Β 48
Community πŸ“¦Β 81
Companies πŸ“¦Β 60
Compilers πŸ“¦Β 60
Computer Science πŸ“¦Β 74
Configuration Management πŸ“¦Β 39
Content Management πŸ“¦Β 167
Control Flow πŸ“¦Β 197
Data Formats πŸ“¦Β 77
Data Processing πŸ“¦Β 266
Data Storage πŸ“¦Β 132
Economics πŸ“¦Β 60
Frameworks πŸ“¦Β 198
Games πŸ“¦Β 122
Graphics πŸ“¦Β 103
Hardware πŸ“¦Β 148
Integrated Development Environments πŸ“¦Β 47
Learning Resources πŸ“¦Β 147
Legal πŸ“¦Β 28
Libraries πŸ“¦Β 119
Lists Of Projects πŸ“¦Β 21
Machine Learning πŸ“¦Β 336
Mapping πŸ“¦Β 61
Marketing πŸ“¦Β 15
Mathematics πŸ“¦Β 55
Media πŸ“¦Β 228
Messaging πŸ“¦Β 97
Networking πŸ“¦Β 304
Operating Systems πŸ“¦Β 84
Operations πŸ“¦Β 120
Package Managers πŸ“¦Β 52
Programming Languages πŸ“¦Β 229
Runtime Environments πŸ“¦Β 96
Science πŸ“¦Β 42
Security πŸ“¦Β 375
Social Media πŸ“¦Β 26
Software Architecture πŸ“¦Β 70
Software Development πŸ“¦Β 68
Software Performance πŸ“¦Β 57
Software Quality πŸ“¦Β 127
Text Editors πŸ“¦Β 45
Text Processing πŸ“¦Β 131
User Interface πŸ“¦Β 310
User Interface Components πŸ“¦Β 465
Version Control πŸ“¦Β 29
Virtualization πŸ“¦Β 68
Web Browsers πŸ“¦Β 38
Web Servers πŸ“¦Β 25
Web User Interface πŸ“¦Β 194