Famous/famous-angular — pull request #134 by thaiat (2014-07-10 19:03:17+00:00)
Title: Add browserify version of famous-angular

A small addition to build a browserfy version of famous-angular.

The file `dist/famous-angular-browserify.js` is generated during the `build` gulp task from `services/famous-angular-browserify.js`.

There is a small maintenance overhead as i add to create a copy of the top file `services/famous.js` called `services/famous-angular.js` removing the `requirejs` stuff.

Now to use it:
* create a new project
* npm init
* bower init
* create a .bowserrc file with content `{"directory":"src/client/scripts/vendors"}`
* npm install --save-dev gulp gulp-browserify gulp-rename browserify browserify-shim
* bower install --save angular angular-mocks thaiat/famous-angular#master
Add the following config to package.json
```javascript
"dependencies": {
"famous": "http://code.famo.us/famous/common/famous-0.2.2.tar.gz"
},
"browser": {
"angular": "./src/client/scripts/vendors/angular/angular.js",
"angular-mocks": "./src/client/scripts/vendors/angular-mocks/angular-mocks.js",
"famous-angular": "./src/client/scripts/vendors/famous-angular/dist/famous-angular-browserify.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"angular": {
"exports": "angular"
},
"angular-mocks": {
"depends": [
"angular"
]
},
"famous": {
"exports": "famous"
},
"famous-angular": {
"depends": [
"angular",
"famous"
]
}
}
```
* run npm install (to install the new dependency of famous : "http://code.famo.us/famous/common/famous-0.2.2.tar.gz")
* create a gulp file to bundle your main.js
```javascript
var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');

gulp.task('bundle', function() {

gulp.src('./src/client/scripts/main.js')
.pipe(browserify())
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./src/client/scripts'));
});
```

* add the following main.js in src/client/scripts
```javascript
require('angular');
require('famous-angular');

var app = angular.module('app', ['famous.angular']);
app.controller('hello', function($scope) {
$scope.message = 'Hello World';
});
```

* add an index.html
```html

Famous

{{message}}

Hello Famous

```

And you should see a red famous surface when you load index.html in the browser