Skip to content
This repository has been archived by the owner on Apr 5, 2021. It is now read-only.

Getting Started

Ahmed Tarek edited this page Feb 10, 2017 · 4 revisions

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