generator-webpack-angularjs

Creating an AngularJS + UI-Router app with Webpack

Usage no npm install needed!

<script type="module">
  import generatorWebpackAngularjs from 'https://cdn.skypack.dev/generator-webpack-angularjs';
</script>

README

generator-webpack-angularjs NPM version Build Status Dependency Status

Creating an AngularJS + UI-Router app with Webpack

Basic app includes

  • Bootstrap
  • Login page with authentication
  • Sample directive
  • Sample filter
  • Production webpack build config

Installation

First, install Yeoman and generator-webpack-angularjs using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-webpack-angularjs

Then generate your new project:

yo webpack-angularjs

If the app name does not match directory name app will be initialized in a new directory with the app name.

Usage

The main app generator creates a default AngularJS app with login and home page using webpack build

Example

yo webpack-angular --module mod

This will create:

.gitignore
.env
package.json
webpack.config.js
README.md
src/index.html
src/app.js
src/constants.js
src/filters/title-case.js
src/directives/<module>-table.js
src/directives/<module>-table.html
src/services/login.js
src/login/login.js
src/login/login.html
src/css/login.css
src/home/home.js
src/includes/navbar.html
src/home/home.html
src/css/home.css

Sub-generators

Service

Creates a new Angular service. Prompts for the service name. Picks app and module from .yo-rc.json

Example:

yo webpack-angularjs:service

This will create:

src/services/<service-name>.js

State

Creates a new ui-router state with corresponding template and controller

Example:

yo webpack-angularjs:state --state dashboard --parent home

This will create:

src/home/dashboard/dashboard.js
src/home/dashboard/dashboard.html

Getting To Know Yeoman

  • Yeoman has a heart of gold.
  • Yeoman is a person with feelings and opinions, but is very easy to work with.
  • Yeoman can be too opinionated at times but is easily convinced not to be.
  • Feel free to learn more about Yeoman.

License

Apache-2.0 © shyam