diff --git a/app/index.js b/app/index.js index 3f9e710cf..5af6821e0 100644 --- a/app/index.js +++ b/app/index.js @@ -122,6 +122,12 @@ var Generator = module.exports = function Generator(args, options) { args: ['about'] }); } + + if (this.env.options.uiRouter) { + this.invoke('angular:state', { + args: ['about'] + }); + } }); this.pkg = require('../package.json'); @@ -250,6 +256,10 @@ Generator.prototype.askForModules = function askForModules() { }, { value: 'routeModule', name: 'angular-route.js', + checked: false + }, { + value: 'uiRouterModule', + name: 'angular-ui-router.js', checked: true }, { value: 'sanitizeModule', @@ -271,6 +281,7 @@ Generator.prototype.askForModules = function askForModules() { this.messagesModule = hasMod('messagesModule'); this.resourceModule = hasMod('resourceModule'); this.routeModule = hasMod('routeModule'); + this.uiRouterModule = hasMod('uiRouterModule'); this.sanitizeModule = hasMod('sanitizeModule'); this.touchModule = hasMod('touchModule'); @@ -296,6 +307,11 @@ Generator.prototype.askForModules = function askForModules() { angMods.push("'ngResource'"); } + if (this.uiRouterModule) { + angMods.push("'ui.router'"); + this.env.options.uiRouter = true; + } + if (this.routeModule) { angMods.push("'ngRoute'"); this.env.options.ngRoute = true; @@ -319,6 +335,7 @@ Generator.prototype.askForModules = function askForModules() { Generator.prototype.readIndex = function readIndex() { this.ngRoute = this.env.options.ngRoute; + this.uiRouter = this.env.options.uiRouter; this.indexFile = this.engine(this.read('app/index.html'), this); }; @@ -349,6 +366,8 @@ Generator.prototype.createIndexHtml = function createIndexHtml() { Generator.prototype.packageFiles = function packageFiles() { this.coffee = this.env.options.coffee; this.typescript = this.env.options.typescript; + this.uiRouter = this.env.options.uiRouter; + this.template('root/_bower.json', 'bower.json'); this.template('root/_bowerrc', '.bowerrc'); this.template('root/_package.json', 'package.json'); diff --git a/main/index.js b/main/index.js index 1dcdba9e4..ec1677272 100644 --- a/main/index.js +++ b/main/index.js @@ -16,5 +16,6 @@ Generator.prototype.createAppFile = function createAppFile() { this.ngResource = this.env.options.ngResource; this.ngSanitize = this.env.options.ngSanitize; this.ngRoute = this.env.options.ngRoute; + this.uiRouter = this.env.options.uiRouter; this.appTemplate('app', 'scripts/app'); }; diff --git a/package.json b/package.json index fe13f702e..488b501a4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "generator-angular", "version": "0.15.1", - "description": "Yeoman generator for AngularJS", + "description": "Yeoman generator for AngularJS (with support for Angular-UI router)", "keywords": [ "yeoman-generator", "scaffold", @@ -25,6 +25,7 @@ "main", "provider", "route", + "state", "service", "templates", "value", diff --git a/readme.md b/readme.md index 0268ae512..247de8350 100644 --- a/readme.md +++ b/readme.md @@ -46,6 +46,7 @@ Available generators: * [angular:directive](#directive) * [angular:filter](#filter) * [angular:route](#route) +* [angular:state](#state) * [angular:service](#service) * [angular:provider](#service) * [angular:factory](#service) @@ -92,6 +93,36 @@ yo angular:route myRoute --uri=my/route Produces controller and view as above and adds a route to `app/scripts/app.js` with URI `my/route` +### State +Generates a controller and view, and configures a state in `app/scripts/app.js` connecting them. + +Example: +```bash +yo angular:state mystate +``` + +Produces `app/scripts/controllers/mystate.js`: +```javascript +angular.module('myMod').controller('MystateCtrl', function ($scope) { + // ... +}); +``` + +Produces `app/views/mystate.html`: +```html +

This is the mystate view

+``` + +**Explicitly provide state URI** + +Example: +```bash +yo angular:state myState --uri=my/state/uri +``` + +Produces controller and view as above and adds a state to `app/scripts/app.js` +with URI `my/state/uri` + ### Controller Generates a controller in `app/scripts/controllers`. diff --git a/state/USAGE b/state/USAGE new file mode 100644 index 000000000..91f8ffb69 --- /dev/null +++ b/state/USAGE @@ -0,0 +1,11 @@ +Description: + Creates a new AngularJS State + +Example: + yo angular:state thing [--coffee] [--uri=path_to/thing] + + This will create: + app/scripts/controllers/thing.js + app/views/thing.html + And add routing to: + app.js diff --git a/state/index.js b/state/index.js new file mode 100644 index 000000000..c1adf74a6 --- /dev/null +++ b/state/index.js @@ -0,0 +1,81 @@ +'use strict'; +var path = require('path'); +var chalk = require('chalk'); +var util = require('util'); +var ScriptBase = require('../script-base.js'); +var angularUtils = require('../util.js'); + + +var Generator = module.exports = function Generator() { + ScriptBase.apply(this, arguments); + this.option('uri', { + desc: 'Allow a custom uri for routing', + type: String, + required: false + }); + + var coffee = this.env.options.coffee; + var typescript = this.env.options.typescript; + var bower = require(path.join(process.cwd(), 'bower.json')); + var match = require('fs').readFileSync(path.join( + this.env.options.appPath, + 'scripts/app.' + (coffee ? 'coffee' : typescript ? 'ts': 'js') + ), 'utf-8').match(/\.state/); + + if ( + bower.dependencies['ui.router'] || + bower.devDependencies['ui.router'] || + match !== null + ) { + this.foundState = true; + } + + this.hookFor('angular:controller'); + this.hookFor('angular:view'); +}; + +util.inherits(Generator, ScriptBase); + +Generator.prototype.rewriteAppJs = function () { + var coffee = this.env.options.coffee; + + if (!this.foundState) { + this.on('end', function () { + this.log(chalk.yellow( + '\nangular-ui-router is not installed. Skipping adding the state to ' + + 'scripts/app.' + (coffee ? 'coffee' : 'js') + )); + }); + return; + } + + this.uri = this.name; + if (this.options.uri) { + this.uri = this.options.uri; + } + + var typescript = this.env.options.typescript; + var config = { + file: path.join( + this.env.options.appPath, + 'scripts/app.' + (coffee ? 'coffee' : typescript ? 'ts': 'js') + ), + needle: '.otherwise', + splicable: [ + " url: '/" + this.uri + "',", + " templateUrl: 'views/" + this.name.toLowerCase() + ".html'" + (coffee ? "" : "," ), + " controller: '" + this.classedName + "Ctrl'" + (coffee ? "" : ","), + " controllerAs: '" + this.cameledName + "'" + ] + }; + + if (coffee) { + config.splicable.unshift(".state '" + this.uri + "',"); + } + else { + config.splicable.unshift(".state('" + this.uri + "', {"); + config.splicable.push("})"); + } + + angularUtils.rewriteFile(config); +}; diff --git a/templates/common/app/index.html b/templates/common/app/index.html index 1d69c2a65..310a80c54 100644 --- a/templates/common/app/index.html +++ b/templates/common/app/index.html @@ -41,7 +41,13 @@ <% } %> @@ -50,11 +56,13 @@
- <% if (ngRoute) { - %>
<% - } else { - %>
<% - } %> + <% if (ngRoute) { %> +
+ <% } else if (uiRouter) { %> +
+ <% } else { %> +
+ <% } %>
diff --git a/templates/common/root/_bower.json b/templates/common/root/_bower.json index 498d2434b..0a3cd9359 100644 --- a/templates/common/root/_bower.json +++ b/templates/common/root/_bower.json @@ -11,7 +11,8 @@ "angular-messages": "^<%= ngVer %>"<% } %><% if (resourceModule) { %>, "angular-resource": "^<%= ngVer %>"<% } %><% if (routeModule) { %>, "angular-route": "^<%= ngVer %>"<% } %><% if (sanitizeModule) { %>, - "angular-sanitize": "^<%= ngVer %>"<% } %><% if (touchModule) { %>, + "angular-ui-router": "^<%= ngVer %>"<% } %><% if (uiRouter) { %>, + "angular-sanitize": "^0.3.1"<% } %><% if (touchModule) { %>, "angular-touch": "^<%= ngVer %>"<% } %> }, "devDependencies": { diff --git a/templates/javascript/app.js b/templates/javascript/app.js index fdf19b617..45a236d87 100644 --- a/templates/javascript/app.js +++ b/templates/javascript/app.js @@ -9,15 +9,28 @@ * Main module of the application. */ angular - .module('<%= scriptAppName %>', [<%= angularModules %>])<% if (ngRoute) { %> - .config(function ($routeProvider) { - $routeProvider - .when('/', { + .module('<%= scriptAppName %>', [<%= angularModules %>]) + <% if (ngRoute) { %> + .config(function ($routeProvider) { + $routeProvider + .when('/', { + templateUrl: 'views/main.html', + controller: 'MainCtrl', + controllerAs: 'main' + }) + .otherwise({ + redirectTo: '/' + }); + }) + <% } else if (uiRouter) { %> + .config(function ($urlRouterProvider, $stateProvider) { + $stateProvider + .state('main', { templateUrl: 'views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) - .otherwise({ - redirectTo: '/' - }); - })<% } %>; + + $urlRouterProvider.otherwise('/'); + }) + <% } %>;