Yeoman generator for creating applications, using AngularJS - lets you quickly set up a project following best practices.
Install generator-beauty
:
npm install -g generator-beauty
Make a new directory, and cd
into it:
mkdir my-new-project && cd $_
Run yo beauty
, optionally passing an app name:
yo beauty [app-name]
Run grunt
for building, grunt serve
for preview, and grunt serve:dist
for a preview of the built app.
- MongoDB - Download and Install MongoDB - If you plan on scaffolding your project with mongoose, you'll need mongoDB to be installed and have the
mongod
process running.
Client
- Scripts:
JavaScript
,CoffeeScript
- Markup:
HTML
default - Stylesheets:
CSS
,Stylus
,Sass
,Less
, - Angular Routers:
ui-router
default
A grunt task looks for new files in your client/app
and client/components
folder and automatically injects them in the appropriate places based on an injection block.
-
less
files intoclient/app.less
-
scss
files intoclient/app.scss
-
stylus
files intoclient/app.styl
-
css
files intoclient/index.html
-
js
files intoclient/index.html
-
coffeescript
tempjs
files intoclient/index.html
Available generators:
- App
- beauty (aka beauty:app)
- Client Side
Sets up a new AngularJS, generating all the boilerplate you need to get started.
Example:
yo beauty
Generates a new route.
Example:
yo beauty:route myroute
[?] Where would you like to create this route? client/app/
[?] What will the url of your route be? /myroute
Produces:
client/app/myroute/myroute.js
client/app/myroute/myroute.controller.js
client/app/myroute/myroute.controller.spec.js
client/app/myroute/myroute.html
client/app/myroute/myroute.scss
Generates a controller.
Example:
yo beauty:controller user
[?] Where would you like to create this controller? client/app/
Produces:
client/app/user/user.controller.js
client/app/user/user.controller.spec.js
Generates a directive.
Example:
yo beauty:directive myDirective
[?] Where would you like to create this directive? client/app/
[?] Does this directive need an external html file? Yes
Produces:
client/app/myDirective/myDirective.directive.js
client/app/myDirective/myDirective.directive.spec.js
client/app/myDirective/myDirective.html
client/app/myDirective/myDirective.scss
Simple directive without an html file
Example:
yo beauty:directive simple
[?] Where would you like to create this directive? client/app/
[?] Does this directive need an external html file? No
Produces:
client/app/simple/simple.directive.js
client/app/simple/simple.directive.spec.js
Generates a filter.
Example:
yo beauty:filter myFilter
[?] Where would you like to create this filter? client/app/
Produces:
client/app/myFilter/myFilter.filter.js
client/app/myFilter/myFilter.filter.spec.js
Generates an AngularJS service.
Example:
yo beauty:service myService
[?] Where would you like to create this service? client/app/
Produces:
client/app/myService/myService.service.js
client/app/myService/myService.service.spec.js
You can also do yo angular:factory
and yo angular:provider
for other types of services.
Generates an AngularJS service decorator.
Example:
yo beauty:decorator serviceName
[?] Where would you like to create this decorator? client/app/
Produces
client/app/serviceName/serviceName.decorator.js
The following packages are always installed by the app generator:
- angular
- angular-cookies
- angular-mocks
- angular-resource
- angular-sanitize
- angular-scenario
- es5-shim
- font-awesome
- json3
- jquery
- lodash
These packages are installed optionally depending on your configuration:
- angular-route
- angular-ui-router
- angular-socket-io
- angular-bootstrap
- bootstrap
All of these can be updated with bower update
as new versions are released.
Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.
A .yo-rc
file is generated for helping you copy configuration across projects, and to allow you to keep track of your settings. You can change this as you see fit.
Running grunt test
will run the client and server unit tests with karma and mocha.
Use grunt test:server
to only run server tests.
Use grunt test:client
to only run client tests.
Protractor tests
To setup protractor e2e tests, you must first run
npm run update-webdriver
Use grunt test:e2e
to have protractor go through tests located in the e2e
folder.
Keeping your app secrets and other sensitive information in source control isn't a good idea. To have grunt launch your app with specific environment variables, add them to the git ignored environment config file: server/config/local.env.js
.
Overview
├── client
│ ├── app - All of our app specific components go in here
│ ├── assets - Custom assets: fonts, images, etc…
│ ├── components - Our reusable components, non-specific to to our app
│
├── e2e - Our protractor end to end tests
An example client component in client/app
main
├── main.js - Routes
├── main.controller.js - Controller for our main route
├── main.controller.spec.js - Test
├── main.html - View
└── main.less - Styles
See the contributing docs
When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
When submitting a PR, make sure that the commit messages match the AngularJS conventions.
When submitting a bugfix, try to write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
When submitting a new feature, add tests that cover the feature.
See the travis.yml
for configuration required to run tests.