From 8e5b8613652d05106d1937d30ca52ce83087ab8d Mon Sep 17 00:00:00 2001 From: Dzmitry Samsonau Date: Mon, 1 Feb 2016 16:17:31 +0300 Subject: [PATCH 1/3] Tutorial done --- config/app.config.js | 4 ++++ package.json | 5 ++++- src/app.js | 7 +++++-- src/directives/greeting.directive.js | 15 +++++++++++++++ src/features/home/home.controller.js | 14 ++++++++++++++ src/features/home/home.controller.test.js | 16 ++++++++++++++++ src/features/home/home.css | 3 +++ src/features/home/home.html | 6 ++++++ src/features/home/home.index.js | 13 +++++++++++++ src/features/home/home.routes.js | 9 +++++++++ src/index.html | 4 +++- src/services/randomNames.service.js | 17 +++++++++++++++++ webpack.make.js | 12 ++++++++---- 13 files changed, 117 insertions(+), 8 deletions(-) create mode 100644 config/app.config.js create mode 100644 src/directives/greeting.directive.js create mode 100644 src/features/home/home.controller.js create mode 100644 src/features/home/home.controller.test.js create mode 100644 src/features/home/home.css create mode 100644 src/features/home/home.html create mode 100644 src/features/home/home.index.js create mode 100644 src/features/home/home.routes.js create mode 100644 src/services/randomNames.service.js diff --git a/config/app.config.js b/config/app.config.js new file mode 100644 index 000000000..8f1d7b800 --- /dev/null +++ b/config/app.config.js @@ -0,0 +1,4 @@ +export default function routing($urlRouterProvider, $locationProvider) { + $locationProvider.html5Mode(true); + $urlRouterProvider.otherwise('/'); +} \ No newline at end of file diff --git a/package.json b/package.json index ab53c8824..ba9b793a0 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ }, "homepage": "https://github.com/Foxandxss/angular-webpack-workflow", "dependencies": { - "angular": "^1.4.8" + "angular": "^1.4.8", + "angular-ui-router": "^0.2.17", + "bootstrap": "^3.3.6" }, "devDependencies": { "angular-mocks": "^1.4.8", @@ -40,6 +42,7 @@ "karma-sourcemap-loader": "^0.3.6", "karma-spec-reporter": "0.0.23", "karma-webpack": "^1.7.0", + "ng-annotate-webpack-plugin": "^0.1.2", "node-libs-browser": "^0.5.3", "null-loader": "^0.1.1", "phantomjs": "^1.9.18", diff --git a/src/app.js b/src/app.js index 0300163f5..6c1d0a5d0 100644 --- a/src/app.js +++ b/src/app.js @@ -1,3 +1,6 @@ -import angular from 'angular'; +import home from './features/home/home.index.js'; +import routing from '../config/app.config.js'; +import uirouter from 'angular-ui-router'; -angular.module('app', []); \ No newline at end of file +angular.module('app', [uirouter, home]) + .config(routing); \ No newline at end of file diff --git a/src/directives/greeting.directive.js b/src/directives/greeting.directive.js new file mode 100644 index 000000000..6f5d6af0a --- /dev/null +++ b/src/directives/greeting.directive.js @@ -0,0 +1,15 @@ +import angular from 'angular'; + +function greeting() { + return { + restrict: 'E', + scope: { + name: '=' + }, + template: '

Hello, {{name}}' + } +} + +export default angular.module('directives.greeting', []) + .directive('greeting', greeting) + .name; \ No newline at end of file diff --git a/src/features/home/home.controller.js b/src/features/home/home.controller.js new file mode 100644 index 000000000..6a67247f8 --- /dev/null +++ b/src/features/home/home.controller.js @@ -0,0 +1,14 @@ +export default class HomeController { + constructor(randomNames) { + this.random = randomNames; + this.name = 'World'; + } + + changeName() { + this.name = 'angular-tips'; + } + + randomName() { + this.name = this.random.getName(); + } +} diff --git a/src/features/home/home.controller.test.js b/src/features/home/home.controller.test.js new file mode 100644 index 000000000..221d090d0 --- /dev/null +++ b/src/features/home/home.controller.test.js @@ -0,0 +1,16 @@ +import home from './home.index'; + +describe('Controller: Home', function() { + let $controller; + + beforeEach(angular.mock.module(home)); + + beforeEach(angular.mock.inject(function(_$controller_) { + $controller = _$controller_; + })); + + it('name is initialized to World', function() { + let ctrl = $controller('HomeController'); + expect(ctrl.name).toBe('World'); + }); +}); \ No newline at end of file diff --git a/src/features/home/home.css b/src/features/home/home.css new file mode 100644 index 000000000..25d4ec945 --- /dev/null +++ b/src/features/home/home.css @@ -0,0 +1,3 @@ +#home-header { + text-align: center; +} \ No newline at end of file diff --git a/src/features/home/home.html b/src/features/home/home.html new file mode 100644 index 000000000..333636171 --- /dev/null +++ b/src/features/home/home.html @@ -0,0 +1,6 @@ +
+ +
+ + + \ No newline at end of file diff --git a/src/features/home/home.index.js b/src/features/home/home.index.js new file mode 100644 index 000000000..e08b0875b --- /dev/null +++ b/src/features/home/home.index.js @@ -0,0 +1,13 @@ +import './home.css'; +import angular from 'angular'; +import uirouter from 'angular-ui-router'; + +import routing from './home.routes'; +import HomeController from './home.controller'; +import randomNames from '../../services/randomNames.service'; +import greeting from '../../directives/greeting.directive'; + +export default angular.module('app.home', [uirouter, randomNames, greeting]) + .config(routing) + .controller('HomeController', HomeController) + .name; \ No newline at end of file diff --git a/src/features/home/home.routes.js b/src/features/home/home.routes.js new file mode 100644 index 000000000..ba8b44b19 --- /dev/null +++ b/src/features/home/home.routes.js @@ -0,0 +1,9 @@ +export default function routes($stateProvider) { + $stateProvider + .state('home', { + url: '/', + template: require('./home.html'), + controller: 'HomeController', + controllerAs: 'home' + }); +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index dd402ba96..3c346ab31 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,8 @@ - Hello, World +
+ +
\ No newline at end of file diff --git a/src/services/randomNames.service.js b/src/services/randomNames.service.js new file mode 100644 index 000000000..559d5ac77 --- /dev/null +++ b/src/services/randomNames.service.js @@ -0,0 +1,17 @@ +import angular from 'angular'; + +class RandomNames { + constructor() { + this.names = ['John', 'Elisa', 'Mark', 'Annie']; + } + + getName() { + const totalNames = this.names.length; + const rand = Math.floor(Math.random() * totalNames); + return this.names[rand]; + } +} + +export default angular.module('services.random-names', []) + .service('randomNames', RandomNames) + .name; \ No newline at end of file diff --git a/webpack.make.js b/webpack.make.js index 8e077e92a..2e0f510d7 100644 --- a/webpack.make.js +++ b/webpack.make.js @@ -1,10 +1,11 @@ 'use strict'; // Modules -var webpack = require('webpack'); -var autoprefixer = require('autoprefixer'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); +const autoprefixer = require('autoprefixer'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const ngAnnotatePlugin = require('ng-annotate-webpack-plugin'); +const webpack = require('webpack'); module.exports = function makeWebpackConfig (options) { /** @@ -175,6 +176,9 @@ module.exports = function makeWebpackConfig (options) { // Disabled when in test mode or not in build mode new ExtractTextPlugin('[name].[hash].css', { disable: !BUILD || TEST + }), + new ngAnnotatePlugin({ + add: true }) ]; From e849ecacfaea0ba08921c4dff49a541bb3bd419e Mon Sep 17 00:00:00 2001 From: Dzmitry Samsonau Date: Mon, 1 Feb 2016 16:40:35 +0300 Subject: [PATCH 2/3] Welcome back scss --- src/app.js | 2 ++ src/features/home/home.html | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 6c1d0a5d0..4cae5a2e5 100644 --- a/src/app.js +++ b/src/app.js @@ -1,3 +1,5 @@ +import 'bootstrap/dist/css/bootstrap.css'; + import home from './features/home/home.index.js'; import routing from '../config/app.config.js'; import uirouter from 'angular-ui-router'; diff --git a/src/features/home/home.html b/src/features/home/home.html index 333636171..87b34f168 100644 --- a/src/features/home/home.html +++ b/src/features/home/home.html @@ -2,5 +2,7 @@ - - \ No newline at end of file +
+ + +
From fa1eef07dfbdfb8cfc7c879ee3d4b8de6ef545c3 Mon Sep 17 00:00:00 2001 From: Dzmitry Samsonau Date: Mon, 1 Feb 2016 16:58:38 +0300 Subject: [PATCH 3/3] Added sass support to the project --- .gitignore | 3 ++- src/features/home/home.css | 3 --- src/features/home/home.html | 11 ++++++----- src/features/home/home.index.js | 2 +- src/features/home/home.scss | 7 +++++++ webpack.make.js | 4 ++++ 6 files changed, 20 insertions(+), 10 deletions(-) delete mode 100644 src/features/home/home.css create mode 100644 src/features/home/home.scss diff --git a/.gitignore b/.gitignore index c65a39ba7..bbcd49f4f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules public -build \ No newline at end of file +build +npm-debug.log diff --git a/src/features/home/home.css b/src/features/home/home.css deleted file mode 100644 index 25d4ec945..000000000 --- a/src/features/home/home.css +++ /dev/null @@ -1,3 +0,0 @@ -#home-header { - text-align: center; -} \ No newline at end of file diff --git a/src/features/home/home.html b/src/features/home/home.html index 87b34f168..126759eb2 100644 --- a/src/features/home/home.html +++ b/src/features/home/home.html @@ -1,8 +1,9 @@ -
+
-
-
- - +
+ + +
+ diff --git a/src/features/home/home.index.js b/src/features/home/home.index.js index e08b0875b..d8000f924 100644 --- a/src/features/home/home.index.js +++ b/src/features/home/home.index.js @@ -1,4 +1,4 @@ -import './home.css'; +import './home.scss'; import angular from 'angular'; import uirouter from 'angular-ui-router'; diff --git a/src/features/home/home.scss b/src/features/home/home.scss new file mode 100644 index 000000000..bed922002 --- /dev/null +++ b/src/features/home/home.scss @@ -0,0 +1,7 @@ +.home-header { + text-align: center; + + &__btn-group { + padding-top: 1em; + } +} \ No newline at end of file diff --git a/webpack.make.js b/webpack.make.js index 2e0f510d7..89e450dc5 100644 --- a/webpack.make.js +++ b/webpack.make.js @@ -110,6 +110,10 @@ module.exports = function makeWebpackConfig (options) { // Allow loading html through js test: /\.html$/, loader: 'raw' + }, { + // SCSS LOADER + test: /\.scss$/, + loaders: ["style", "css", "sass"] }] };