Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
92a0cfb
commit d745533
Showing
12 changed files
with
708 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,293 @@ | ||
|
||
# Silex - Yeoman Generator | ||
|
||
Maintainer: [Luciano Amodio](https://github.com/adamquadmon) | ||
|
||
Based on [generator-angular](https://github.com/yeoman/generator-angular/) | ||
Based on [Silex-Kitchen-Edition](https://github.com/lyrixx/Silex-Kitchen-Edition/) | ||
|
||
|
||
## Usage | ||
|
||
Install `generator-angular-silex`: | ||
``` | ||
npm install -g generator-angular-silex | ||
``` | ||
|
||
* For Development | ||
``` | ||
git clone https://github.com/AdamQuadmon/generator-angular-silex.git | ||
``` | ||
|
||
Make a new directory, and `cd` into it: | ||
``` | ||
mkdir my-new-project && cd $_ | ||
``` | ||
|
||
* For Developers | ||
``` | ||
npm install ./../generator-angular-silex | ||
``` | ||
|
||
Run `yo angular-silex:app`, optionally passing an app name: | ||
``` | ||
yo angular-silex:app [app-name] | ||
``` | ||
|
||
## Generators | ||
|
||
Available generators: | ||
|
||
* [angular-silex](#app) (aka [angular-silex:app](#app)) | ||
* [angular-silex:controller](#controller) | ||
* [angular-silex:directive](#directive) | ||
* [angular-silex:filter](#filter) | ||
* [angular-silex:route](#route) | ||
* [angular-silex:service](#service) | ||
* [angular-silex:view](#view) | ||
|
||
**Note: Generators are to be run from the root directory of your app.** | ||
|
||
### App | ||
Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator also optionally installs Twitter Bootstrap and additional AngularJS modules, such as angular-resource. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex | ||
``` | ||
|
||
### Route | ||
Generates a controller and view, and configures a route in `app/scripts/app.js` connecting them. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex:route myroute | ||
``` | ||
|
||
Produces `app/scripts/controllers/myroute.js`: | ||
```javascript | ||
angular.module('myMod').controller('MyrouteCtrl', function ($scope) { | ||
// ... | ||
}); | ||
``` | ||
|
||
Produces `app/views/myroute.html`: | ||
```html | ||
<p>This is the myroute view</p> | ||
``` | ||
|
||
### Controller | ||
Generates a controller in `app/scripts/controllers`. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex:controller user | ||
``` | ||
|
||
Produces `app/scripts/controllers/user.js`: | ||
```javascript | ||
angular.module('myMod').controller('UserCtrl', function ($scope) { | ||
// ... | ||
}); | ||
``` | ||
### Directive | ||
Generates a directive in `app/scripts/directives`. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex:directive myDirective | ||
``` | ||
|
||
Produces `app/scripts/directives/myDirective.js`: | ||
```javascript | ||
angular.module('myMod').directive('myDirective', function () { | ||
return { | ||
template: '<div></div>', | ||
restrict: 'E', | ||
link: function postLink(scope, element, attrs) { | ||
element.text('this is the myDirective directive'); | ||
} | ||
}; | ||
}); | ||
``` | ||
|
||
### Filter | ||
Generates a filter in `app/scripts/filters`. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex:filter myFilter | ||
``` | ||
|
||
Produces `app/scripts/filters/myFilter.js`: | ||
```javascript | ||
angular.module('myMod').filter('myFilter', function () { | ||
return function (input) { | ||
return 'myFilter filter:' + input; | ||
}; | ||
}); | ||
``` | ||
|
||
### View | ||
Generates an HTML view file in `app/views`. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex:view user | ||
``` | ||
|
||
Produces `app/views/user.html`: | ||
```html | ||
<p>This is the user view</p> | ||
``` | ||
|
||
### Service | ||
Generates an AngularJS service. | ||
|
||
Example: | ||
```bash | ||
yo angular-silex:service myService | ||
``` | ||
|
||
Produces `app/scripts/services/myService.js`: | ||
```javascript | ||
angular.module('myMod').factory('myService', function () { | ||
// ... | ||
}); | ||
``` | ||
|
||
#### Options | ||
There are options for each of the methods for registering services. For more on using these services, see the [module API AngularJS documentation](http://docs.angularjs.org/api/angular.Module). | ||
|
||
##### Factory | ||
Invoked with `--factory` | ||
|
||
This is the default method when creating a service. Running `yo angular:service myService --factory` is the same as running `yo angular:service myService` | ||
|
||
##### Service | ||
Invoked with `--service` | ||
|
||
##### Value | ||
Invoked with `--value` | ||
|
||
##### Constant | ||
Invoked with `--constant` | ||
|
||
## Options | ||
In general, these options can be applied to any generator, though they only affect generators that produce scripts. | ||
|
||
### CoffeeScript | ||
For generators that output scripts, the `--coffee` option will output CoffeeScript instead of JavaScript. | ||
|
||
For example: | ||
```bash | ||
yo angular-silex:controller user --coffee | ||
``` | ||
|
||
Produces `app/scripts/controller/user.coffee`: | ||
```coffeescript | ||
angular.module('myMod') | ||
.controller 'UserCtrl', ($scope) -> | ||
``` | ||
|
||
A project can mix CoffeScript and JavaScript files. | ||
|
||
### Minification Safe | ||
By default, generators produce unannotated code. Without annotations, AngularJS's DI system will break when minified. Typically, these annotations the make minification safe are added automatically at build-time, after application files are concatenated, but before they are minified. By providing the `--minsafe` option, the code generated will out-of-the-box be ready for minification. The trade-off is between amount of boilerplate, and build process complexity. | ||
|
||
#### Example | ||
```bash | ||
yo angular-silex:controller user --minsafe | ||
``` | ||
|
||
Produces `app/controller/user.js`: | ||
```javascript | ||
angular.module('myMod').controller('UserCtrl', ['$scope', function ($scope) { | ||
// ... | ||
}]); | ||
``` | ||
|
||
#### Background | ||
Unannotated: | ||
```javascript | ||
angular.module('myMod').controller('MyCtrl', function ($scope, $http, myService) { | ||
// ... | ||
}); | ||
``` | ||
|
||
Annotated: | ||
```javascript | ||
angular.module('myMod').controller('MyCtrl', | ||
['$scope', '$http', 'myService', function ($scope, $http, myService) { | ||
|
||
// ... | ||
}]); | ||
``` | ||
|
||
The annotations are important because minified code will rename variables, making it impossible for AngularJS to infer module names based solely on function parameters. | ||
|
||
The recommended build process uses `ngmin`, a tool that automatically adds these annotations. However, if you'd rather not use `ngmin`, you have to add these annotations manually yourself. | ||
|
||
## Bower Components | ||
|
||
The following packages are always installed by the [app](#app) generator: | ||
|
||
* angular | ||
* angular-mocks | ||
* angular-scenario | ||
|
||
|
||
The following additional modules are available as components on bower, and installable via `bower install`: | ||
|
||
* angular-cookies | ||
* angular-loader | ||
* angular-resource | ||
* angular-sanitize | ||
|
||
All of these can be updated with `bower update` as new versions of AngularJS are released. | ||
|
||
## Configuration | ||
Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately. | ||
|
||
### Output | ||
You can change the `app` directory by adding a `appPath` property to `bower.json`. For instance, if you wanted to easily integrate with Express.js, you could add the following: | ||
|
||
```json | ||
{ | ||
"name": "yo-test", | ||
"version": "0.0.0", | ||
... | ||
"appPath": "public" | ||
} | ||
|
||
``` | ||
This will cause Yeoman-generated client-side files to be placed in `public`. | ||
|
||
## Testing | ||
|
||
For tests to work properly, karma needs the `angular-mocks` bower package. | ||
This script is included in the bower.json in the `devDependencies` section, which will | ||
be available very soon, probably with the next minor release of bower. | ||
|
||
While bower `devDependencies` are not yet implemented, you can fix it by running: | ||
```bash | ||
bower install angular-mocks | ||
``` | ||
|
||
By running `grunt test` you should now be able to run your unit tests with karma. | ||
|
||
## Contribute | ||
|
||
See the [contributing docs](https://github.com/yeoman/yeoman/blob/master/contributing.md) | ||
|
||
When submitting an issue, please follow the [guidelines](https://github.com/yeoman/yeoman/blob/master/contributing.md#issue-submission). 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](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/). | ||
|
||
When submitting a bugfix, 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. | ||
|
||
## License | ||
|
||
[BSD license](http://opensource.org/licenses/bsd-license.php) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,3 +3,10 @@ dist | |
.tmp | ||
.sass-cache | ||
app/components | ||
|
||
.idea | ||
|
||
resources/cache/* | ||
resources/log/* | ||
vendor/ | ||
web/assets/* |
Oops, something went wrong.