Skip to content
This repository has been archived by the owner on Apr 5, 2021. It is now read-only.
Ahmed Tarek edited this page Mar 7, 2017 · 17 revisions

generator-at-angular

npm version travis build Coverage Status

Development Branch:

travis build 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
Clone this wiki locally