Nanoscale Parts Manufacturing
Miss any of our Open RFC calls?Watch the recordings here! »

generator-at-angular

0.4.3 • Public • Published

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

Changelog

Contribution

Install

npm i generator-at-angular

DownloadsWeekly Downloads

23

Version

0.4.3

License

MIT

Last publish

Collaborators

  • avatar
  • avatar