├── .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 |
--------------------------------------------------------------------------------