ngWebpack
+
ngWebpack
+
...or how I stopped worrying and learned to write modular code
Modularity
Modularity
- Reusable
Modularity
- Reusable
- Modifiable
Modularity
- Reusable
- Modifiable
- Composable
The Solution
The Solution
The Solution
- Bundles all required files into a semantic DOM unit
- No awkward controller nesting or orphaned templates
- Easily declare dependancies with Angular modules
The Solution
The Solution
Webpack
- 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
// 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
// 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
// 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
// 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
// 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
// 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
// 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
github.com/JamieWoodbury
developers.bench.co
Angular Webpack
By Jamie Woodbury
