A slush generator for Best Practices with AngularJS Fullstack applications.
npm install slush-y> A slush generator for Best Practices with AngularJS Fullstack applications.
Inspired by MEAN
Inspired by slush-meanjs
Inspired by John Papa's angularjs-styleguide
##NEW
####Generators now support flags, in place of the prompts
Install slush-y globally:
``bash`
$ npm install -g slush-y
Remember to install gulp and slush globally as well, if you haven't already:
`bash`
$ npm install -g gulp slush
Create a new folder for your project:
`bash`
$ mkdir my-slush-y
Run the generator from within the new folder:
`bash`
$ cd my-slush-y && slush yRun the app
To run the app , first make sure mongoDB is running (`$ mongod`) then
`bash`
$ gulp dev
and navigate to http://localhost:9000`
To generate minified js & css files inside the dist/ folder, run, this will also boot up a server for you to view the minified version
`bash`
$ gulp dist
To run tests (TESTS Are Currently not all working)
`bash`
$ gulp test
##Issues
- The testing currently does not work
- The Oauth needs to be configured
- Possible Bug issues on the client side
| Feature | Command |
| Application Generator | slush y |
| CRUD Module sub-generator | slush y:crud {{module-name}} |
| AngularJS API sub-generator | slush y:api {{name}} |
| AngularJs Module sub-generator | slush y:module {{module-name}} |
| AngularJs Route sub-generator | slush y:route {{route-name}} |
| AngularJs Controller sub-generator | slush y:controller {{controller-name}} |
| AngularJs View sub-generator | slush y:view {{view-name}} |
| AngularJs Service sub-generator | slush y:service {{service-name}} |
| AngularJs Factory sub-generator | slush y:factory {{service-name}} |
| AngularJs Directive sub-generator | slush y:directive {{directive-name}} |
| AngularJs Filter sub-generator | slush y:filter {{filter-name}} |
| AngularJs Config sub-generator | slush y:config {{config-name}} |
Note: Generators are to be run from the root directory of your app.
The application generator will provide you with a rich and well structure starting template to build your next team project. The application is a Full Stack application with node & express server, and a modularly architected client.
In order To create your MEAN application, navigate to a new project folder, and then use slush y to generate your application:
`
$ slush y
The generator will ask you a few questions about your new application and will generate it for you. When the installation process is over, you will be able to use gulp to run your new MEAN application:
`
$ gulp
Now, the application generator does a great job scaffolding a whole application, but daily work requires us to repeat a lot of structured code. For this purpose we provided you with some sub-generators to help you speed up your development.
The CRUD module sub-generator will help you create a new CRUD module (CREATE, READ, UPDATE, DELETE).
To create a new CRUD module you will need to use slush y again:
`
$ slush y:crud
###--flags
`bash`
y:crud
y:crud
The --folders flag requires the input to be a comma separated list, with no spaces.
`bash`
y:crud
The --menus flag adds a link to the module in the navigation bar dynamically
The CRUD Module will generate a whole new module in your client side modules directory.
#### Client
* api
* {module-name}.api.service.js
* config
* {module-name}.routes.js
* controllers
* {module-name}.list.controller.js
* {module-name}.detail.controller.js
* {module-name}.create.controller.js
* views
* {module-name}.view.js
* {module-name}.detail.view.js
* {module-name}.edit.view.js
* {module-name}.create.view.js
This will also generator the full api for this module. the angular-service in the api directory is directly connected to the api created on the backend.
#### Server
* {module-name}.model.js - (Mongoose Model & Schema)
* {module-name}.controller.js - (Express request and response handler)
* {module-name}.route.js - (Express Restful Router)
* {module-name}.test.js - (mocha super test)
* {module-name}.socket.js - (Socket.io integration)
* {module-name}.seed.js - (MongoDB Seed)
The Module comes packed with everything you need to start developing.
Note: Don’t forget to use your module name as an argument when calling the CRUD module sub-generator.
Generates a new AngularJS module structure. For this purpose you can use the Angular module sub-generator. It will create the proper folder structure for you and the module initialization file. Creating a new AngularJS module is simple:
`
$ slush y:module
###--Flagsbash`
y:module
y:module
The --folders flag requires the input to be a comma separated list, with no spaces.
The sub-generator will ask for more information about your folder structure, and will create the empty new AngularJS module.
Instead of manually filling out the components ti this new module, we can use the provided sub-generators to fill in the missing gaps.
Note: Don’t forget to use your module name as an argument when calling the CRUD module sub-generator.
#AngularJS Sub-Generators
The Sub-Generators will read the current modules in modules directory, and ask will which which module to use.
Based upon your option, the generator will generate the proper files the proper directory within the chosen module.
##Global -- Flags for all sub-generators
Set the module for the sub-generator, and bypass the prompt.
`bash`
y:bash`
y:
To construct your module you will often need to create a new route. The AngularJS route sub-generator will help you create a view, controller and a proper route in your module routes.js file. If it can’t find the module routes file the sub-generator will create one for you. Creating a new AngularJS route will involve executing this command:
`
$ slush y:route
###--Flags
Specify whether you would like a complex or simple route.bash`
y:route bash`
y:route
The --menu flag allows you to dynamically add the route to the navigation barbash`
y:route
###Complex Route
The Complex option will provide you with the following
- conifg/
- {name}.route.js
- {name}.run.js --- (for dynamically adding to the menu)
- controllers/
- {name}.controller.js
- tests/
- {name}.controller.test.js
- styles/
- {name}.style.css
- views/
- {name}.view.html
###Simple Route
The Simple option will provide you with the following
- conifg/
- {name}.route.js
- {name}.run.js --- (for dynamically adding to the menu)
The Route sub-generator will ask for more information about your controller, view and routing URL, and will generate the appropriate files for you.
Connecting simple api's from the client to the server can be a tedious job.
However, thanks to the API sub-generator, you simply create a fully restful api interface on the server, and an API AngularJS Service that connects to it; within the module you specify. Creating a new AngularJS API will involve executing this command:
`
$ slush y:api
###--Flags
Here you can dynamically create the Mongo Schema from the command line.
`bash`
y:api bash`
y:api
You will notice there are two ways to create the Schema... However, both require that you separate the column name from the type with a ' : '
if you decide to use the --fields or the prompt each Schema Type must be comma separated.
NOTE: arguments must be passed as a comma separated list with no spaces.
Don’t forget! This time you pass the controller name as an argument.
The API Sub-Generator will generate the following
####Client
- api/
- {name}.api.service.js
####Server
- api/
- {name}.route.js
- {name}.controller.js
- {name}.modle.js
- {name}.seed.js
- {name}.socket.js
The AngularJS Controller sub-generator will create a new AngularJS controller in the specified module's controllers folder. To create a new AngularJS controller run slush y again by using this command:
`
$ slush y:controller
###--Flags
Dynamically create the functions that will be on scope from the command line
`bash`
y:controller bash`
y:controller
>Example of a dynamically added function;
`javascript
$scope.actionOne = actionOne;
//////////////////
/*
* actionOne description
* @return {[type]} description
*
*/
function actionOne() {}
`
Dynamically inject providers to the to the controller
`bash`
y:controller bash`
y:controller
>Example of dynamically injected providers
`javascript
angular
.module('moduleName')
.controller('SomeController', SomeController);
function SomeController($scope,$http,$q) {}
`
NOTE: arguments must be passed as a comma separated list with no spaces.
NOTE: if using a $ in one of the providers, it must be escaped.
The sub-generator will ask you for the module name under which you would like to create your new controller, and will create a new AngularJS controller file in that module controllers folder.
Don’t forget! This time you pass the controller name as an argument.
The AngularJS service sub-generator will create a new AngularJS service in the specified module's services folder. To create a new AngularJS service you will need to execute this command:
`
$ slush y:service
###--Flags
Dynamically create the functions that will exist on the service
`bash`
y:service bash`
y:service
>Example of a dynamically added function;
`javascript`
/*
* actionOne description
* @return {[type]} description
*
*/
this.actionOne = function() {}
Dynamically inject providers to the to the service.bash`
y:service bash`
y:service
>Example of dynamically injecting providers
`javascript`
angular
.module('moduleName')
.service('Storage', Storage);
/ @inject /
function Storage ($http, $q){}
NOTE: arguments must be passed as a comma separated list with no spaces.
NOTE: if using a $ in one of the providers, it must be escaped.
The sub-generator will ask you for the module name under which you would like to create your new service, and will create a new AngularJS service file in that module's services folder.
The AngularJS factory sub-generator will create a new AngularJS factory in the specified module's factory folder. To create a new AngularJS factory you will need to execute this command:
`
$ slush y:factory
###--Flags
Dynamically create the functions that will exist on the factory
`bash`
y:factory bash`
y:factory
>Example of a dynamically added function;
`javascript`
return {
actionOne:actionOne
}
/*
* actionOne description
* @return {[type]} description
*
*/
function actionOne() {}
Dynamically inject providers to the to the factory.bash`
y:factory bash`
y:factory
>Example of dynamically injected providers
`javascript`
angular
.module('moduleName')
.factory('Storage', Storage);
/ @inject /
function Storage ($http, $q){}
NOTE: arguments must be passed as a comma separated list with no spaces.
NOTE: if using a $ in one of the providers, it must be escaped.
The sub-generator will ask you for the module name under which you would like to create your new service, and will create a new AngularJS service file in that module's factory folder.
The AngularJS directive sub-generator will create a new AngularJS directive in the specified module's directives folder. Creating a new AngularJS directive should already look familiar:
`
$ slush y:directive
###--Flags
Specify whether you want a simple or complex directive.
`bash`
y:directive bash`
y:directive
Dynamically create the functions that will be on scope from the command linebash`
y:directive bash`
y:directive
>Example of a dynamically added function
`javascript
function link(scope, element, attrs) {
/**
* action description
* @return {[type]} description
*/
function action (){}
}
`
Dynamically inject providers to the to the directive.bash`
y:directive bash`
y:directive
>Example of dynamically injected providers
`javascript`
angular
.module('moduleName')
.directive('myAction', myAction);
/ @inject /
function myAction ($http, $q){}
NOTE: arguments must be passed as a comma separated list with no spaces.
NOTE: if using a $ in one of the providers, it must be escaped.
The sub-generator will ask you for the module name under which you would like to create your new directive, and will create a new AngularJS directive file in that module's directives folder.
####Complex Directive
The complex directive will provide you with the following
- {name}.directive.js
- {name}.styles.css
- {name}.view.js
- {name}.test.js
####Simple Directive
The complex directive will provide you with the following
- {name}.directive.js
The AngularJS filter sub-generator will create a new AngularJS filter in a specified module's filters folder. To create a new AngularJS filter you need to call slush y again:
`
$ slush y:filter
###--Flags
Dynamically create the functions within the filter.
`bash`
y:filter bash`
y:filter
>Example of a dynamically created function
`javascript`
function filter(input) {
return action( input )
/**
* action description
* @return {[type]} description
*/
function action (){}
}
Dynamically inject providers to the to the filter.bash`
y:filter bash`
y:filter
>Example of dynamically injected providers
`javascript`
angular
.module('moduleName')
.filter('myFilter', myFilter);
/ @inject /
function myFilter ($http, $q){}
The sub-generator will ask you for the module name under which you would like to create your new filter, and will create a new AngularJS filter file in that module filters folder.
The AngularJS config sub-generator will create a new AngularJS config section in a specified module's config folder. To create a new AngularJS config file just call slush y:
`
$ slush y:config
###--Flags
Dynamically inject providers to the to the configuration.
`bash`
y:config bash`
y:config
>Example of dynamically injected providersjavascript`
angular
.module('moduleName')
.config(Configuration);
/ @inject /
function Configuration ($http, $q){}
The sub-generator will ask you for the module name under which you would like to create your new config, and will create a new AngularJS config file in that module's config folder.
Once you have your controller file ready, you may want to add a view that makes use of this controller. The AngularJS view sub-generator will create a new AngularJS view in the specified module's views folder, and will allow you to add a route definition for it. To create a new AngularJS view you will need to execute this command:
`
$ slush y:view
The sub-generator will ask you for the module name under which you would like to create your new view, and some additional routing information. It will then create a new view file in that module's views folder.
####Coming Soon!!!
Your MEAN application comes pre-bundled with the Karma test runner and Jasmine testing framework. To test your AngularJS controllers you’ll need to create a test file, which Karma will later use to run the tests. For this purpose we provided you with the AngularJS test sub-generator. Creating a new AngularJS test is effortless, just execute this command:
`
$ slush y:test
This will create a test file for your controller, and if the sub-generator doesn’t find the specified controller file, it will create one for you.
Don’t forget! You're suppose to pass the controller name as an argument.
`
$ slush y:express-model
This will create a new empty model in the app/models folder and a test file in the app/tests folder.
Note: It is recommended you avoid naming your model in plural form and use a singular form instead. i.e article and not articles
Another recurring task is creating an empty Express controller. The Express controller sub-generator will help you with creating an Express controller in the app/controllers folder. To create a new controller just use slush y:
`
$ slush y:express-controller
This will create a new empty controller in the app/controllers folder.
To make HTTP requests to your controller methods you will need to use a routing file in the app/routes folder. The Express routes sub-generator will help you to add a new empty routes file. To create a new routes file execute this slush y command:
`
$ slush y:express-route
This will create a new empty route file in the app/routes folder.
Your MEAN application comes pre-bundled with the Mocha testing framework. To test your Express models you’ll need to create a new test file, which Mocha will use while running tests. For this purpose we provided you with the Express test sub-generator. Creating a new Express test is easy, just execute this command:
`
$ slush y:express-test
This will create a test file for your Express model, and if the sub-generator doesn’t find the specified model, it will create one for you.
Don’t forget! You're suppose to pass the model name as an argument.
Slush is a tool that uses Gulp for project scaffolding.
Slush does not contain anything "out of the box", except the ability to locate installed slush generators and to run them with liftoff.
To find out more about Slush, check out the documentation.
See the CONTRIBUTING Guidelines
The MIT License
Copyright (c) 2014, Joel Cox
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.