├── .gitignore
├── README.md
├── app
    ├── directives
    │   ├── hello-world
    │   │   ├── hello-world.html
    │   │   ├── hello-world.js
    │   │   └── hello-world.scss
    │   └── index.js
    ├── index.html
    └── index.js
├── cover.jpg
├── package.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | app/bundle.js
 2 | ### JetBrains template
 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
 4 | 
 5 | *.iml
 6 | 
 7 | ## Directory-based project format:
 8 | .idea/
 9 | # if you remove the above rule, at least ignore the following:
10 | 
11 | # User-specific stuff:
12 | # .idea/workspace.xml
13 | # .idea/tasks.xml
14 | # .idea/dictionaries
15 | 
16 | # Sensitive or high-churn files:
17 | # .idea/dataSources.ids
18 | # .idea/dataSources.xml
19 | # .idea/sqlDataSources.xml
20 | # .idea/dynamic.xml
21 | # .idea/uiDesigner.xml
22 | 
23 | # Gradle:
24 | # .idea/gradle.xml
25 | # .idea/libraries
26 | 
27 | # Mongo Explorer plugin:
28 | # .idea/mongoSettings.xml
29 | 
30 | ## File-based project format:
31 | *.ipr
32 | *.iws
33 | 
34 | ## Plugin-specific files:
35 | 
36 | # IntelliJ
37 | /out/
38 | 
39 | # mpeltonen/sbt-idea plugin
40 | .idea_modules/
41 | 
42 | # JIRA plugin
43 | atlassian-ide-plugin.xml
44 | 
45 | # Crashlytics plugin (for Android Studio and IntelliJ)
46 | com_crashlytics_export_strings.xml
47 | crashlytics.properties
48 | crashlytics-build.properties
49 | ### Yeoman template
50 | node_modules/
51 | bower_components/
52 | *.log
53 | 
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular + Webpack from LoftBlog
 2 | ![Webpack plus AngularJS](cover.jpg)
 3 | 
 4 | ## Description
 5 | This is an example of using webpack with an Angular project.
 6 | 
 7 | A full description and example of work you can see in the video lessons.
 8 | 
 9 | [Angular + Webpack](http://youtube.com/loftblog)
10 | 
11 | ## Install
12 | ```sh
13 | $ git clone https://github.com/Severenit/angular-webpack.git && cd angular-webpack
14 | $ npm install
15 | $ npm start
16 | ```
17 | 
18 | ## Tech
19 | You can always get source code for lessons.
20 | You should open the terminal and enter next command:
21 | ```sh
22 | $ git checkout -f step-[number-lessons]
23 | ```
24 | The list of lessons:
25 | ```sh
26 | 'Angular + Webpack: Введение': $ git checkout -f step-1
27 | ```


--------------------------------------------------------------------------------
/app/directives/hello-world/hello-world.html:
--------------------------------------------------------------------------------
1 | <div class="hello-world">
2 |   {{vm.greeting}}
3 | </div>


--------------------------------------------------------------------------------
/app/directives/hello-world/hello-world.js:
--------------------------------------------------------------------------------
 1 | export default ngModule => {
 2 |   ngModule.directive('helloWorld', helloWorldFn);
 3 |   require('./hello-world.scss');
 4 |   function helloWorldFn() {
 5 |     return {
 6 |       restrict: 'E',
 7 |       scope: {},
 8 |       template: require('./hello-world.html'),
 9 |       controllerAs: 'vm',
10 |       controller: function () {
11 |         const vm = this;
12 | 
13 |         vm.greeting = 'Hello Webpack';
14 |       }
15 |     }
16 |   }
17 | }


--------------------------------------------------------------------------------
/app/directives/hello-world/hello-world.scss:
--------------------------------------------------------------------------------
1 | .hello-world {
2 |   color: red;
3 |   border: 1px solid;
4 | }


--------------------------------------------------------------------------------
/app/directives/index.js:
--------------------------------------------------------------------------------
1 | export default ngModule => {
2 |   require('./hello-world/hello-world.js')(ngModule);
3 | }


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html ng-app="app">
 3 | <head lang="en">
 4 |   <meta charset="UTF-8">
 5 |   <title>Angular with Webpack</title>
 6 | </head>
 7 | <body>
 8 |   <h1>Angular + Webpack</h1>
 9 |   <hello-world></hello-world>
10 |   <script src="bundle.js"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | const angular = require('angular');
2 | const ngModule = angular.module('app',[]);
3 | 
4 | require('./directives')(ngModule);
5 | 


--------------------------------------------------------------------------------
/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Severenit/angular-webpack/72e0b8eac6fb490a5ed395bb159be407b249af52/cover.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpack-angular",
 3 |   "version": "1.0.0",
 4 |   "description": "Example of using webpack with an angular project for an loftblog lesson",
 5 |   "main": "app/index.js",
 6 |   "repository": "https://github.com/Severenit/angular-webpack.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 |     "loftblog"
16 |   ],
17 |   "author": "Zar Zakharov",
18 |   "license": "MIT",
19 |   "devDependencies": {
20 |     "babel-core": "^5.8.25",
21 |     "babel-loader": "^5.3.2",
22 |     "css-loader": "^0.19.0",
23 |     "node-sass": "^3.3.3",
24 |     "raw-loader": "^0.5.1",
25 |     "sass-loader": "^2.0.1",
26 |     "style-loader": "^0.12.4",
27 |     "webpack": "^1.12.2",
28 |     "webpack-dev-server": "^1.11.0"
29 |   },
30 |   "dependencies": {
31 |     "angular": "^1.5.0-beta.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/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 |     loaders: [
10 |       {test: /\.js$/, loader: 'babel'},
11 |       {test: /\.html$/, loader: 'raw'},
12 |       {test: /\.css$/, loader: 'style!css'},
13 |       {test: /\.scss$/, loader: 'style!css!sass'}
14 |     ]
15 |   }
16 | };


--------------------------------------------------------------------------------