generator-at-angular
Advanced tools
Yeoman angular application generator thet uses Webpack, SASS, UI router, Karma and Jasmine for testing, and auto generated docs.
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
├── /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
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
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.yo at-angular --d or yo at-angular --defaultyo at-angular --dreidevFAQs
Yeoman angular application generator thet uses Webpack, SASS, UI router, Karma and Jasmine for testing, and auto generated docs.
The npm package generator-at-angular receives a total of 44 weekly downloads. As such, generator-at-angular popularity was classified as not popular.
We found that generator-at-angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python has adopted a standardized lock file format to improve reproducibility, security, and tool interoperability across the packaging ecosystem.
Security News
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.