8000 Multiple pages to load additional components asynchronously · packetloop/angular-webpack@5414a84 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Jan 21, 2019. It is now read-only.

Commit 5414a84

Browse files
nkbtnkbt
committed
Multiple pages to load additional components asynchronously
1 parent 195888c commit 5414a84

22 files changed

+153
-16
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,5 @@ npm test
3333
- [x] Separate CSS for `<hello>` + webpack build
3434
- [ ] Embed images
3535
- [x] Coverage report
36-
- [ ] One more page + webpack entry to load additional components asynchronously
36+
- [x] Multiple pages to load additional components asynchronously
3737
- [ ] Gulp + JSHint + Flow

‎index.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
<title></title>
66
<script src="./dest/app.js"></script>
77
</head>
8-
<body ng-app="app">
8+
<body ng-app="app" ng-strict-di>
99

10+
<ul>
11+
<li><a href="#/">Start</a></li>
12+
<li><a href="#/home">Home</a></li>
13+
<li><a href="#/about">About</a></li>
14+
</ul>
1015

11-
<div ng-controller="HelloController as hello">
12-
{{hello.test}}
13-
</div>
14-
15-
<hello></hello>
16+
<ng-view></ng-view>
1617

1718
</body>
1819
</html>

‎package.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@
1111
"name": "Nik Butenko",
1212
"email": "nik@butenko.me"
1313
},
14+
"repository": {
15+
"type": "git",
16+
"url": "git://github.com/packetloop/angular-webpack.git"
17+
},
1418
"license": "MIT",
1519
"devDependencies": {
16-
"angular": "^1.3.6",
1720
"angular-mocks": "^1.3.6",
1821
"css-loader": "^0.9.0",
1922
"exports-loader": "^0.6.2",
@@ -32,5 +35,9 @@
3235
"style-loader": "^0.8.2",
3336
"webpack": "^1.4.13",
3437
"webpack-dev-server": "^1.6.6"
38+
},
39+
"dependencies": {
40+
"angular": "^1.3.6",
41+
"angular-route": "^1.3.6"
3542
}
3643
}

‎src/app.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
var angular = require('vendor/angular');
2-
module.exports = angular.module('app', [
3-
require('./hello/hello_module').name
2+
var app = angular.module('app', [
3+
require('vendor/angular_route').name
44
]);
5+
6+
app.config(require('./app/app_register_config')(app));
7+
app.config(require('./app/app_router_config')(app));
8+
9+
module.exports = app;
10+
global.window.app = app;

‎src/app/about/about.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div>{{this.name}}</div>

‎src/app/about/about_controller.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var $inject = ['BlahService'];
2+
var AboutController = function (blahService) {
3+
this.name = 'About: ' + blahService.blah();
4+
};
5+
AboutController.$inject = $inject;
6+
7+
module.exports = AboutController;

‎src/app/about/about_route.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = function (app) {
2+
return {
3+
template: require('./about.html'),
4+
controller: 'AboutController',
5+
controllerAs: 'this',
6+
resolve: {
7+
async: ['$q', function ($q) {
8+
var defer = $q.defer();
9+
require.ensure([], function () {
10+
app.register(require('./'));
11+
defer.resolve();
12+
});
13+
return defer.promise;
14+
}]
15+
}
16+
};
17+
};
18+

‎src/app/about/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var angular = require('vendor/angular');
2+
3+
var about = angular.module('app.about', [
4+
require('../../blah').name
5+
]);
6+
7+
about.controller('AboutController', require('./about_controller'));
8+
9+
module.exports = about;

‎src/app/app_register_config.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
3+
module.exports = function (app) {
4+
5+
var $inject = ['$controllerProvider', '$provide', '$compileProvider', '$filterProvider'];
6+
var RegisterConfig = function ($controllerProvider, $provide, $compileProvider, $filterProvider) {
7+
var providers = {
8+
$controllerProvider: $controllerProvider,
9+
$provide: $provide,
10+
$compileProvider: $compileProvider,
11+
$filterProvider: $filterProvider
12+
};
13+
app.register = function (module) {
14+
15+
module.requires.forEach(function(moduleName) {
16+
app.register(angular.module(moduleName));
17+
});
18+
19+
module._invokeQueue.reverse().forEach(function (invokeArgs) {
20+
var provider = providers[invokeArgs[0]];
21+
provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
22+
});
23+
return this;
24+
};
25+
};
26+
27+
RegisterConfig.$inject = $inject;
28+
29+
return RegisterConfig;
30+
};

‎src/app/app_router_config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict';
2+
3+
module.exports = function (app) {
4+
5+
var $inject = ['$routeProvider'];
6+
var RouterConfig = function ($routeProvider) {
7+
$routeProvider
8+
.when('/', {template: ''})
9+
.when('/home', require('./home/home_route')(app))
10+
.when('/about', require('./about/about_route')(app))
11+
.otherwise({redirectTo: '/'})
12+
;
13+
};
14+
15+
RouterConfig.$inject = $inject;
16+
17+
return RouterConfig;
18+
};

‎src/app/home/home.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div>{{this.name}}</div>

‎src/app/home/home_controller.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var $inject = ['HelloService'];
2+
var HomeController = function (helloService) {
3+
this.name = 'Home: ' + helloService.hello();
4+
};
5+
HomeController.$inject = $inject;
6+
7+
module.exports = HomeController;

‎src/app/home/home_route.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = function (app) {
2+
return {
3+
template: require('./home.html'),
4+
controller: 'HomeController',
5+
controllerAs: 'this',
6+
resolve: {
7+
async: ['$q', function ($q) {
8+
var defer = $q.defer();
9+
require.ensure([], function () {
10+
app.register(require('./'));
11+
defer.resolve();
12+
});
13+
return defer.promise;
14+
}]
15+
}
16+
};
17+
};
18+

‎src/app/home/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var angular = require('vendor/angular');
2+
3+
var home = angular.module('app.home', [
4+
require('../../hello').name
5+
]);
6+
7+
home.controller('HomeController', require('./home_controller'));
8+
9+
module.exports = home;

‎src/blah/blah_module.js renamed to ‎src/blah/index.js

File renamed without changes.

‎src/hello/hello_module.js renamed to ‎src/hello/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var angular = require('vendor/angular');
22

33
var hello = angular.module('hello', [
4-
require('./../blah/blah_module').name
4+
require('./../blah').name
55
]);
66

77
hello

‎src/hello/tests/hello_controller_spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('Hello Controller', function () {
55
var $scope;
66
var controller;
77

8-
beforeEach(angular.mock.module(require('./../hello_module').name));
8+
beforeEach(angular.mock.module(require('./..').name));
99

1010
beforeEach(angular.mock.module(function ($provide) {
1111
helloService = jasmine.createSpyObj('HelloService', ['hello']);

‎src/hello/tests/hello_directive_spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('Hello Directive', function () {
55
var $scope;
66
var $element;
77

8-
beforeEach(angular.mock.module(require('./../hello_module').name));
8+
beforeEach(angular.mock.module(require('./..').name));
99

1010
beforeEach(angular.mock.module(function ($provide) {
1111
helloService = jasmine.createSpyObj('HelloService', ['hello']);

‎src/hello/tests/hello_service_spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('Hello Service', function () {
55
var helloHelloService;
66
var blahService;
77

8-
beforeEach(angular.mock.module(require('./../hello_module').name));
8+
beforeEach(angular.mock.module(require('./..').name));
99

1010
beforeEach(angular.mock.module(function ($provide) {
1111
helloHelloService = jasmine.createSpyObj('HelloHelloService', ['hello']);

‎src/vendor/angular.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
if (!global.window.angular) {
22
require('angular');
33
}
4-
module.exports = global.window.angular;
4+
var angular = global.window.angular;
5+
module.exports = angular;

‎src/vendor/angular_route.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var angular = require('./angular');
2+
require('angular-route');
3+
module.exports = angular.module('ngRoute');

‎webpack.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ module.exports = {
77
output: {
88
filename: '[name].js',
99
path: './dest',
10-
publicPath: '/dest/'
10+
publicPath: './dest/',
11+
chunkFilename: '[id].chunk.js'
1112
},
1213
resolve: {
1314
modulesDirectories: ['node_modules'],

0 commit comments

Comments
 (0)
0