Best Practices for Building Angular.js Apps

Browserify? Require.js? Doesn’t Angular.js have modules?

What modules are in JavaScript

.noConflict()

using .noConflict()

Sample App

Initial Angular app with all code in one file

Splitting into separate files

src/module.js
src/github/github.svc.js
src/github/github.ctrl.js
src/module.js
src/services/github.svc.js
src/controllers/github.ctrl.js

Require.js — Too complicated

Browserify — A much better module loader

Browserify example

Angular Dependency Injection — Solves most of our problems

Gulp Concat

$ npm install --global gulp
$ npm install --save-dev gulp gulp-concat
$ echo '{}' > package.json
gulpfile.js

Icky Globals

angular.module as a setter
angular.module getter
Global module service
No globals involved

Gulp Watch

Gulp with watching

Minification

$ npm install -D gulp-uglify
Gulp minification
$ npm install -D gulp-ng-annotate
Gulp minification with ng-annotate

Sourcemaps

Sourcemaps!

Why Concat is Better

What we built

Third-party code

ES6 Modules — The real solution

Angular 2.0

New Blog: jdxcode.com

New Blog: jdxcode.com