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

Angular Webpack

  • 2,566
Loading comments...

More from Jamie Woodbury