├── .bowerrc ├── .gitignore ├── .jshintrc ├── README.md ├── app ├── bootstrap.js ├── index.html ├── kcdModule │ ├── about │ │ ├── AboutCtrl.html │ │ └── AboutCtrl.js │ ├── common │ │ └── directives │ │ │ ├── kcd-greeting.html │ │ │ └── kcd-greeting.js │ ├── contact │ │ ├── ContactCtrl.html │ │ └── ContactCtrl.js │ ├── home │ │ ├── HomeCtrl.html │ │ └── HomeCtrl.js │ └── kcdModule.js └── main.css ├── bower.json └── package.json /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "./app/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | bower_components 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "esnext": true, 7 | "expr": true, 8 | "forin": true, 9 | "freeze": true, 10 | "immed": true, 11 | "indent": 2, 12 | "latedef": "nofunc", 13 | "newcap": true, 14 | "noarg": true, 15 | "noempty": true, 16 | "nonbsp": true, 17 | "quotmark": "single", 18 | "undef": true, 19 | "unused": "vars", 20 | "trailing": true, 21 | "maxdepth": 4, 22 | "maxstatements": 30, 23 | "maxcomplexity": 5, 24 | "maxlen": 120, 25 | "browser": true, 26 | "node": true, 27 | "globals": { 28 | "angular": true, 29 | 30 | "describe": true, 31 | "before": true, 32 | "after": true, 33 | "beforeEach": true, 34 | "afterEach": true, 35 | "it": true, 36 | "expect": true, 37 | "inject": true, 38 | 39 | "process": true 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpack Angular 2 | 3 | An example of using webpack with an Angular project. 4 | -------------------------------------------------------------------------------- /app/bootstrap.js: -------------------------------------------------------------------------------- 1 | angular.element(document).ready(function() { 2 | angular.bootstrap(document.body, ['kcdModule']); 3 | }); 4 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular with Webpack 6 | 7 | 8 | 9 | Home | 10 | Contact | 11 | About 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /app/kcdModule/about/AboutCtrl.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /app/kcdModule/about/AboutCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('kcdModule').controller('AboutCtrl', function AboutCtrl() { 2 | const vm = this; 3 | vm.greeting = 'Hello About!'; 4 | }); 5 | -------------------------------------------------------------------------------- /app/kcdModule/common/directives/kcd-greeting.html: -------------------------------------------------------------------------------- 1 |
2 | Hello {{vm.greeted}}! 3 |
4 | -------------------------------------------------------------------------------- /app/kcdModule/common/directives/kcd-greeting.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | angular.module('kcdModule').directive('kcdGreeting', kcdGreeting); 4 | 5 | function kcdGreeting() { 6 | return { 7 | restrict: 'E', 8 | templateUrl: 'kcdModule/common/directives/kcd-greeting.html', 9 | scope: { 10 | greeted: '@' 11 | }, 12 | controllerAs: 'vm', 13 | bindToController: true, 14 | controller: angular.noop 15 | }; 16 | } 17 | })(); 18 | -------------------------------------------------------------------------------- /app/kcdModule/contact/ContactCtrl.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /app/kcdModule/contact/ContactCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('kcdModule').controller('ContactCtrl', function ContactCtrl() { 2 | const vm = this; 3 | vm.greeting = 'Hello contact!'; 4 | }); 5 | -------------------------------------------------------------------------------- /app/kcdModule/home/HomeCtrl.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /app/kcdModule/home/HomeCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('kcdModule').controller('HomeCtrl', function HomeCtrl() { 2 | const vm = this; 3 | vm.greeting = 'Hello home!'; 4 | }); 5 | -------------------------------------------------------------------------------- /app/kcdModule/kcdModule.js: -------------------------------------------------------------------------------- 1 | angular.module('kcdModule', [ 2 | 'ui.router', 3 | 'formly', 4 | 'ngAria', 5 | 'ngMessages', 6 | 'ngAnimate' 7 | ], function($urlRouterProvider, $stateProvider) { 8 | 9 | $stateProvider.state('home', { 10 | url: '/home', 11 | templateUrl: 'kcdModule/home/HomeCtrl.html', 12 | controller: 'HomeCtrl', 13 | controllerAs: 'vm' 14 | }); 15 | 16 | 17 | $stateProvider.state('about', { 18 | url: '/about', 19 | templateUrl: 'kcdModule/about/AboutCtrl.html', 20 | controller: 'AboutCtrl', 21 | controllerAs: 'vm' 22 | }); 23 | 24 | $stateProvider.state('contact', { 25 | url: '/contact', 26 | templateUrl: 'kcdModule/contact/ContactCtrl.html', 27 | controller: 'ContactCtrl', 28 | controllerAs: 'vm' 29 | }); 30 | 31 | $urlRouterProvider.otherwise('/'); 32 | }); 33 | 34 | -------------------------------------------------------------------------------- /app/main.css: -------------------------------------------------------------------------------- 1 | .kcd-greeting { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-angular", 3 | "authors": [ 4 | "Kent C. Dodds " 5 | ], 6 | "description": "Example of using angular with webpack", 7 | "main": "app/index.html", 8 | "keywords": [ 9 | "egghead.io", 10 | "angular", 11 | "webpack" 12 | ], 13 | "license": "MIT", 14 | "private": true, 15 | "dependencies": { 16 | "angular": "~1.5.3", 17 | "angular-ui-router": "~0.2.13", 18 | "angular-formly": "~8.2.0", 19 | "angular-aria": "~1.5.3", 20 | "angular-messages": "~1.5.3", 21 | "angular-animate": "~1.5.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-angular", 3 | "version": "1.0.0", 4 | "description": "Example of using webpack with an angular project for an egghead.io lesson", 5 | "main": "app/index.js", 6 | "repository": "https://github.com/kentcdodds/webpack-angular.git", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "start": "node node_modules/.bin/webpack-dev-server --content-base app", 10 | "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html" 11 | }, 12 | "keywords": [ 13 | "webpack", 14 | "angular", 15 | "egghead.io" 16 | ], 17 | "author": "Kent C. Dodds (http://kent.doddsfamily.us)", 18 | "license": "MIT", 19 | "devDependencies": { 20 | "angular-formly": "^4.0.8", 21 | "api-check": "^6.0.10", 22 | "babel": "^4.7.4", 23 | "babel-core": "^4.7.4", 24 | "babel-loader": "^4.1.0", 25 | "css-loader": "^0.9.1", 26 | "file-loader": "^0.8.1", 27 | "jshint": "^2.6.3", 28 | "jshint-loader": "^0.8.3", 29 | "nib": "^1.1.0", 30 | "raw-loader": "^0.5.1", 31 | "style-loader": "^0.8.3", 32 | "stylus": "^0.49.3", 33 | "stylus-loader": "^0.6.0", 34 | "url-loader": "^0.5.5", 35 | "webpack": "^1.7.2", 36 | "webpack-core": "^0.5.0", 37 | "webpack-dev-server": "^1.7.0" 38 | }, 39 | "dependencies": { 40 | "angular": "^1.3.14", 41 | "angular-animate": "^1.3.14", 42 | "angular-aria": "^1.3.14", 43 | "angular-material": "^0.8.3", 44 | "angular-messages": "^1.3.14", 45 | "angular-ui-router": "^0.2.13" 46 | } 47 | } 48 | --------------------------------------------------------------------------------