Browserify + Angular
1. A module loader is needed to build JavaScript applications without manually specifying every script dependency and to avoid conflicts between dependencies. Browserify is introduced as a module loader that understands Node's require algorithm and builds a single script that can run in the browser. It allows accessing the over 146,000 packages available on npm. 2. Browserify follows Node's require algorithm to understand dependencies between modules. It bundles all dependencies and modules into a single file that can be run in the browser. This is done by processing a main app.js file that requires other modules using Browserify and bundling them together. 3. A live coding demonstration was then provided to showcase Browserify in action.
![module.exports = require('angular')
.module('myApp', [
require('angular-resource'),
require('angular-messages')
])
.name](https://image.slidesharecdn.com/amsbrowserifyangular-150521191107-lva1-app6892/85/Browserify-Angular-17-320.jpg)
Browserify + Angular
- 2. 1. Why you need a module loader 2. Intro to Browserify 3. Live code
- 4. Why do I need a module loader? 1
- 5. Straw Poll
- 6. Bower
- 7. Bower Features • Package manager for the client side • Download packages from a git repository • Handle semantic versioning • Download dependencies
- 8. Vomit All Problems Onto User
- 9. Dependency Graph App A B C D E F G H
- 10. ABCDEFGH
- 11. <script> tags
- 12. Concatenating your files is <script> tags with fewer HTTP requests
- 14. Why We Need a Module Loader • We want to build our apps without manually specifying every script in order • We want dependencies without conflict vomit • There are 146,330 packages on npm and it would be nice to use them 1
- 15. Intro to 2
- 16. Browserify understands Node’s require algorithm and builds a single script that can run in the browser
- 17. module.exports = require('angular') .module('myApp', [ require('angular-resource'), require('angular-messages') ]) .name
- 18. // node_modules/angular-resource/ index.js require('./angular-resource') module.exports = 'ngResource'
- 19. browserify -e app.js > dist/app.js
- 20. We want to build our apps without manually specifying every script in order ✓
- 21. npm install --save angular dog-names
- 22. Access to 146,330 packages on npm ✓
- 23. node_modules is nested • node_modules/ • angular-credit-cards/ • node_modules/ • ap/ • creditcards/ • node_modules/ • camel-case/ • creditcards-types/ • fast-luhn/
- 26. Code 3