Skip to content

Navigation Menu

Sign in
Sign up
This repository was archived by the owner on Apr 5, 2021. It is now read-only.
Ahmed Tarek edited this page Jan 27, 2017 · 17 revisions

generator-at-angular

npm version 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.
  • Karma + Jasmine Testing
  • 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

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /