ngWebpack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935417/angularjs-shield.png)
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/938936/Screen_Shot_2014-12-16_at_11.04.26_AM.png)
ngWebpack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935417/angularjs-shield.png)
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/938936/Screen_Shot_2014-12-16_at_11.04.26_AM.png)
...or how I stopped worrying and learned to write modular code
Modularity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
Modularity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
- Reusable
Modularity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
- Reusable
- Modifiable
Modularity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
- Reusable
- Modifiable
- Composable
The Solution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
The Solution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/937902/directives.jpg)
The Solution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/937902/directives.jpg)
- Bundles all required files into a semantic DOM unit
- No awkward controller nesting or orphaned templates
- Easily declare dependancies with Angular modules
The Solution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
The Solution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/937943/Screen_Shot_2014-12-16_at_11.04.26_AM.png)
Webpack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
- A module bundler like RequireJS or Browserify
- Supports most module syntax (like CommonJS, or AMD)
- Both SYNC and ASYNC
- Added benefit of being able to load HTML/CSS/Whatever
// moduleOne.js
foo = function(){
return "I'm a string in Module One";
};
module.exports = foo
// moduleTwo.js
foo = require("./moduleOne.js")
foo() // => "I'm a string in Module One"
DEMO: page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// ui/modelEdit/index.js
require("./userEdit.css");
deps = [
require('data/user/index.js').name
]
var userEditModule = angular.module("app.ui.userEdit", [])
.directive("userEdit", {
restrict: "E",
scope: {},
template: require("./userEdit.html"),
controller: require("./userEdit.js"),
controllerAs: 'vm'
});
module.exports = userEditModule;
DEMO: page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// ui/modelEdit/index.js
require("./userEdit.css");
deps = [
require('data/user/index.js').name
]
var userEditModule = angular.module("app.ui.userEdit", [])
.directive("userEdit", {
restrict: "E",
scope: {},
template: require("./userEdit.html"),
controller: require("./userEdit.js"),
controllerAs: 'vm'
});
module.exports = userEditModule;
DEMO: page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// ui/modelEdit/index.js
require("./userEdit.css");
deps = [
require('data/user/index.js').name
]
var userEditModule = angular.module("app.ui.userEdit", [])
.directive("userEdit", {
restrict: "E",
scope: {},
template: require("./userEdit.html"),
controller: require("./userEdit.js"),
controllerAs: 'vm'
});
module.exports = userEditModule;
DEMO: app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// index.js
var deps = [
require('angular-ui-router'),
require('app/ui/userEdit').name
]
angular.module('app', deps)
.config(function($stateProvider) {
$stateProvider
.state('app.userEdit', {
url: '/',
template: '<user-edit></user-edit>'
});
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>WebPack Demo</title>
<script
type="text/javascript"
src="app.bundle.js"
charset="utf-8">
</script>
</head>
<body>
<h1>WebPack Demo</h1>
<div ui-view></div>
</body>
</html>
DEMO: app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// index.js
var deps = [
require('angular-ui-router'),
require('app/ui/userEdit').name
]
angular.module('app', deps)
.config(function($stateProvider) {
$stateProvider
.state('app.userEdit', {
url: '/',
template: '<user-edit></user-edit>'
});
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>WebPack Demo</title>
<script
type="text/javascript"
src="app.bundle.js"
charset="utf-8">
</script>
</head>
<body>
<h1>WebPack Demo</h1>
<div ui-view></div>
</body>
</html>
DEMO: app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// index.js
var deps = [
require('angular-ui-router'),
require('app/ui/userEdit').name
]
angular.module('app', deps)
.config(function($stateProvider) {
$stateProvider
.state('app.userEdit', {
url: '/',
template: '<user-edit></user-edit>'
});
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>WebPack Demo</title>
<script
type="text/javascript"
src="app.bundle.js"
charset="utf-8">
</script>
</head>
<body>
<h1>WebPack Demo</h1>
<div ui-view></div>
</body>
</html>
DEMO: app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
// index.js
var deps = [
require('angular-ui-router'),
require('app/ui/userEdit').name
]
angular.module('app', deps)
.config(function($stateProvider) {
$stateProvider
.state('app.userEdit', {
url: '/',
template: '<user-edit></user-edit>'
});
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>WebPack Demo</title>
<script
type="text/javascript"
src="app.bundle.js"
charset="utf-8">
</script>
</head>
<body>
<h1>WebPack Demo</h1>
<div ui-view></div>
</body>
</html>
THANK YOU
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/935405/Screen_Shot_2014-12-15_at_4.14.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/938159/j.jpg)
github.com/JamieWoodbury
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/938182/Screen_Shot_2014-12-16_at_12.52.56_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/938212/Screen_Shot_2014-12-15_at_4.27.36_PM.png)
developers.bench.co
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/941290/1-Paul-332x332.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jamiewoodbury/images/941293/Screen_Shot_2014-12-17_at_12.55.32_PM.png)
Angular Webpack
By Jamie Woodbury
Angular Webpack
- 3,997