├── app
├── css
│ └── style.css
├── directives
│ └── hello-world
│ │ ├── hello-world.html
│ │ ├── hello-world.css
│ │ └── hello-world.js
├── test2.txt
├── server.js
├── index.js
├── index.html
└── package.json
├── README.md
└── webpack.config.js
/app/css/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | }
--------------------------------------------------------------------------------
/app/directives/hello-world/hello-world.html:
--------------------------------------------------------------------------------
1 |
2 | {{vm.greeting}}
3 |
--------------------------------------------------------------------------------
/app/directives/hello-world/hello-world.css:
--------------------------------------------------------------------------------
1 | .hello-world{
2 | color: red;
3 | border: 1px solid sandybrown;
4 | }
5 |
--------------------------------------------------------------------------------
/app/test2.txt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Hello World
6 |
7 |
8 | hello world
9 |
10 |
11 |
--------------------------------------------------------------------------------
/app/server.js:
--------------------------------------------------------------------------------
1 | var port = 8000,
2 | express = require('express'),
3 | app = express();
4 | app.use('/', express.static(__dirname));
5 | app.listen(port);
6 | console.log('Now serving http://localhost:' + port + '/index.html');
7 |
--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | var angular = require('angular');//引入angular
2 | var ngModule = angular.module('app',[]);//定义一个angular模块
3 | require('./directives/hello-world/hello-world.js')(ngModule);//引入指令(directive)文件
4 | require('./css/style.css');//引入样式文件
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-webpack
2 | * angular-webpack/app$ npm install
3 | * angular-webpack$ webpack
4 | * angular-webpack/app$ npm start
5 |
6 | ## 博客链接
7 | 源码的解读在我的博客里有
8 |
9 | [文章链接](http://www.cnblogs.com/kagol/p/5152734.html)
10 |
11 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Hello World app
6 |
7 |
8 | 3213123123
9 |
10 |
11 |
--------------------------------------------------------------------------------
/app/directives/hello-world/hello-world.js:
--------------------------------------------------------------------------------
1 | module.exports =function(ngModule){
2 | ngModule.directive('helloWorld',aFun);
3 | require('./hello-world.css');
4 | function aFun(){
5 | return{
6 | restrict:'E',
7 | scope:{},
8 | template: require('./hello-world.html'),
9 | controllerAs:'vm',
10 | controller:function(){
11 | var vm=this;
12 | vm.greeting='angularjssswebpack'
13 | }
14 | }
15 | }
16 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | context: __dirname + '/app',//上下文
3 | entry: './index.js',//入口文件
4 | output: {//输出文件
5 | path: __dirname + '/app',
6 | filename: './bundle.js'
7 | },
8 | module: {
9 | noParse: [/moment/],
10 | loaders: [//加载器
11 | {test: /\.html$/, loader: 'raw-loader'},
12 | {test: /\.css$/, loader: 'style-loader!css-loader'},
13 | {test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
14 | {test: /\.(png|jpg|ttf)$/, loader: 'url-loader?limit=8192'}
15 | ]
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular_webpack",
3 | "version": "1.0.0",
4 | "description": "angular webpack demo",
5 | "main": "server.js",
6 | "scripts": {
7 | "test": "test",
8 | "start": "node server.js"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git"
13 | },
14 | "keywords": [
15 | "angular",
16 | "webpack"
17 | ],
18 | "author": "kagol",
19 | "license": "ISC",
20 | "dependencies": {
21 | "angular": "^1.5.8",
22 | "css-loader": "^0.26.0",
23 | "express": "^4.14.0",
24 | "raw-loader": "^0.5.1",
25 | "sass-loader": "^4.0.2",
26 | "style-loader": "^0.13.1",
27 | "url-loader": "^0.5.7"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------