1.0.7 • Published 8 years ago

generator-circularo v1.0.7

Weekly downloads
-
License
-
Repository
-
Last release
8 years ago

#generator-circularo

Yeoman Generator for Circularo Angular Projects

This generator follows the Angular Best Practice Guidelines for Project Structure.

Features

  • Provides a directory structure geared towards large Angular projects.
    • Each controller, service, filter, and directive are placed in their own file.
    • Allows cration of module-driven director structure
  • Require.js support
  • Integrates Bower for package management
  • Includes Yeoman subgenerators for directives, services, partials, filters, controllers, views and modules.

Directory Layout

All subgenerators (with exception of module generator) prompt the user to specify module where to save the new files. The generator will create a handful of files in the root and app folder of your project including index.html and app.js.

In this example, the user has chosen to group the app into an admin folder, a search folder, and a service folder.

/app ............................ main app-wide styles
  app.js ....................... angular module definition
  includes.js .................. angular module initialization
  rconfig.js ................... angular route setup
  main.js ...................... angular bootstrap injection
  app.config.js ................ main application configuration
  /components .................. modules folder
    /admin ..................... example admin module folder
      /controllers ............. admin module controllers
	  /views ................... admin module views
      /directives .............. admin module directives
      /services ................ admin module services
    module.js .................. admin module route setup
  /filters ..................... filters folder
  /service ..................... angular services folder
index.html ..................... main HTML file
404.html ....................... 404 HTML file
Gruntfile.js ................... Grunt build file
/styles	........................ skins and stylings
  /css ......................... css files
  /fonts ....................... font files
  /img.......................... application image resources
/build ......................... distributable version of app
/test .......................... test folder
  test-main.js.................. karma module initialization
  /karma........................ karma unit tests
  /selenium..................... selenium integration tests
bower.json...................... bower package declaration
package.json.................... npm package declaration
bower_component................. 3rd party libraries managed by bower
node_modules ................... npm managed libraries used by grunt

Getting Started

Prerequisites: Node, Grunt, Yeoman, and Bower. Once Node is installed, do:

npm install -g grunt-cli yo bower

Next, install this generator:

npm install -g generator-circularo

To create a project:

mkdir MyNewAwesomeApp
cd MyNewAwesomeApp
yo circularo

Grunt Tasks

Now that the project is created, you have 3 simple Grunt commands available:

grunt start   #This will run a development server
karma start   #Run local unit tests
grunt build   #Places a fully optimized (minified, concatenated, and more) in /build

Yeoman Subgenerators

There are a set of subgenerators to initialize empty Angular components. Each of these generators will:

  • Create one or more skeleton files (javascript, html, spec etc) for the component type.
  • Update module.js, includes.js or app.js and add the necessary tags.
  • For partials and routes, update the app.js, adding the necessary route call if a route was entered in the generator prompts.

Running a generator:

yo circularo:module my-module
yo circularo:partial my-partial
yo circularo:directive my-directive (TBD)
yo circularo:service my-service (TBD)
yo circularo:filter my-filter (TBD)
yo circularo:controller my-controller (TBD)
yo circularo:view my-view (TBD)
yo circularo:route my-route (TBD)

The name optional paramater passed (i.e. 'my-directive') will be used as the file name.

Submodules

Submodules allow you to more explicitly separate parts of your application. Use the yo circularo:module my-module command and specify a new subdirectory to place the module into. Once you've created a submodule, running other subgenerators will now prompt you to select the module in which to place the new component.