Monday, October 6, 2014
Bootstrapping AngularJS with Yeoman
AngularJS is awesome.
If you are here, you already know that. If not, watch these videos.
Yeoman is awesome.
If you are here, you might not know that already. It is similar to middleman but is Node driven instead of ruby. For a kickstart, watch the screencast by Addi Osmani.
Yeoman also provides support for easy scaffolding, auto-compilation of CoffeeScript and Compass, live preview servers and more. Yup, I was just listing some of the features from their site.
Combine these together and you have an excellent solution to bootstrapping your AngularJS applications.
Install Yeoman with the following command:
$ curl -L get.yeoman.io | bashOnce this is done, you can confirm the install and version:
$ yeoman --versionyeoman v0.9.1The generators that Yeoman provides for AngularJS can be found on GitHub. To view the available generators, type $ yeoman init --help. Here are the Angular related generators
Usage: yeoman init angular:controller NAME [options]Options: -h, --help # Print generator's options and usage # Default: falseDescription: Creates a new Angular controllerExample: yeoman init angular:controller Thing This will create: app/scripts/controllers/thing-ctrl.jsUsage: yeoman init angular:filter NAME [options]Options: -h, --help # Print generator's options and usage # Default: falseDescription: Creates a new AngularJS filterExample: yeoman init angular:filter thing This will create: app/scripts/filters/thing.jsUsage: yeoman init angular:route NAME [options]Options: -h, --help # Print generator's options and usage # Default: false --angular:controller # Angular:controller to be invoked # Default: --angular:view # Angular:view to be invoked # Default: Description: Creates a new AngularJS routeExample: yeoman init angular:route thing This will create: app/scripts/controllers/thing.js app/views/thing.html And add routing to: app.jsUsage: yeoman init angular:service NAME [type] [options]Options: -h, --help # Print generator's options and usage # Default: falseDescription: Creates a new AngularJS service. Docs: http://docs.angularjs.org/guide/dev_guide.services.creating_servicesExample: yeoman init angular:service thing This will create: app/scripts/services/thing.jsUsage: yeoman init angular:view NAME [options]Options: -h, --help # Print generator's options and usage # Default: falseDescription: Creates a new AngularJS viewExample: yeoman init angular:view Thing This will create: app/scripts/views/thing.htmlUsage: yeoman init angular:directive NAME [options]Options: -h, --help # Print generator's options and usage # Default: falseDescription: Creates a new Angular directiveExample: yeoman init angular:directive thing This will create: app/scripts/directives/thing.jsUsage: yeoman init angular:app [options]Options: -h, --help # Print generator's options and usage # Default: false Description: Create a base Angular applicationExample: yeoman init angular:app This will create: app/.htaccess app/404.html app/favicon.ico app/robots.txt app/scripts/vendor/angular.js app/scripts/vendor/angular.min.js app/styles/main.css app/views/main.html Gruntfile.js package.json test/lib/angular-mocks.js app/scripts/thing.js app/index.htmlUsage: yeoman init angular:all [options]Options: -h, --help # Print generator's options and usage # Default: false --angular:app # Angular:app to be invoked # Default: --angular:controller # Angular:controller to be invoked # Default: --testacular:app # Testacular:app to be invoked # Default: Description: Creates a complete starter Angular application with a main controller, view and testsExample: yeoman init angular This will create: app/.htaccess app/404.html app/favicon.ico app/robots.txt app/scripts/vendor/angular.js app/scripts/vendor/angular.min.js app/styles/main.css app/views/main.html Gruntfile.js package.json test/lib/angular-mocks.js app/scripts/thing.js app/index.html app/scripts/controllers/main.js test/spec/controllers/main.js testacular.conf.jsThe first thing that must be done is create a base folder for the application.
$ mkdir my_app$ cd my_app/Now run the angular:all generator:
$ yeoman init angular:allFinally, start up your server by running
$ yeoman serverNow when you make code changes, it will update live to the app.
Enhance the documentation listed above.Show how to use the yo CLI toolUse yeoman to create CoffeeScript instead of JavaScript
No comments: