Home - a-tokyo/generator-at-angular GitHub Wiki
generator-at-angular
Development Branch:
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