├── .gitignore ├── LICENSE ├── README.md ├── lib ├── home │ ├── home.config.js │ ├── home.controller.js │ ├── home.html │ ├── home.module.js │ └── home.scss ├── index.html ├── index.js ├── scss │ ├── _fab.scss │ ├── _icon.scss │ ├── _variables.scss │ └── bootstrap.scss └── sidenav │ ├── sidenav.controller.js │ ├── sidenav.html │ └── sidenav.module.js ├── package.json ├── webpack.config.js └── www └── .gitignore /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | engine/ 3 | node_modules/ 4 | platforms/ 5 | plugins/ 6 | build/ 7 | resources/ 8 | bower_components/ 9 | config.xml 10 | coverage 11 | # Logs 12 | logs 13 | *.log 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Julien Renaux 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular1.4-ES6-material-webpack-boilerplate 2 | A simple AngularJS 1.4 boilerplate using ES6, material design and webpack 3 | 4 | ## Install 5 | 6 | ``` 7 | git clone git@github.com:shprink/angular1.4-ES6-material-webpack-boilerplate.git 8 | cd angular1.4-ES6-material-webpack-boilerplate 9 | npm install 10 | ``` 11 | 12 | ## Dev (liverelaod server) 13 | 14 | ``` 15 | npm run-script devserver 16 | ``` 17 | 18 | ## Build 19 | 20 | ``` 21 | npm run-script build 22 | ``` 23 | -------------------------------------------------------------------------------- /lib/home/home.config.js: -------------------------------------------------------------------------------- 1 | class HomeConfig { 2 | 3 | static initRoute ($stateProvider, $urlRouterProvider) { 4 | 'ngInject'; 5 | $stateProvider.state('public.home', { 6 | url: "/home", 7 | views: { 8 | 'content@': { 9 | templateUrl: require("./home.html"), 10 | controller: "HomeController as home" 11 | } 12 | } 13 | }); 14 | $urlRouterProvider.otherwise("/public/home"); 15 | } 16 | } 17 | 18 | export default HomeConfig.initRoute; 19 | -------------------------------------------------------------------------------- /lib/home/home.controller.js: -------------------------------------------------------------------------------- 1 | class HomeController { 2 | 3 | /** 4 | * Constructor class HomeController 5 | * 6 | * @param {object} $scope 7 | */ 8 | constructor($scope) { 9 | 'ngInject'; 10 | 11 | var vm = this; 12 | vm.tiles = buildGridModel({ 13 | icon: "avatar:svg-", 14 | title: "Svg-", 15 | background: "" 16 | }); 17 | 18 | function buildGridModel(tileTmpl) { 19 | var it, results = []; 20 | for (var j = 0; j < 11; j++) { 21 | it = angular.extend({}, tileTmpl); 22 | it.icon = it.icon + (j + 1); 23 | it.title = it.title + (j + 1); 24 | it.span = { 25 | row: 1, 26 | col: 1 27 | }; 28 | switch (j + 1) { 29 | case 1: 30 | it.background = "red"; 31 | it.span.row = it.span.col = 2; 32 | break; 33 | case 2: 34 | it.background = "green"; 35 | break; 36 | case 3: 37 | it.background = "darkBlue"; 38 | break; 39 | case 4: 40 | it.background = "blue"; 41 | it.span.col = 2; 42 | break; 43 | case 5: 44 | it.background = "yellow"; 45 | it.span.row = it.span.col = 2; 46 | break; 47 | case 6: 48 | it.background = "pink"; 49 | break; 50 | case 7: 51 | it.background = "darkBlue"; 52 | break; 53 | case 8: 54 | it.background = "purple"; 55 | break; 56 | case 9: 57 | it.background = "deepBlue"; 58 | break; 59 | case 10: 60 | it.background = "lightPurple"; 61 | break; 62 | case 11: 63 | it.background = "yellow"; 64 | break; 65 | } 66 | results.push(it); 67 | } 68 | return results; 69 | } 70 | } 71 | } 72 | 73 | export default HomeController; 74 | -------------------------------------------------------------------------------- /lib/home/home.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |

{{tile.title}}

6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Twitter 21 | 22 | 23 | 24 | 25 | 26 | Facebook 27 | 28 | 29 | 30 | 31 | 32 | Google plus 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /lib/home/home.module.js: -------------------------------------------------------------------------------- 1 | import HomeConfig from './home.config'; 2 | import HomeController from './home.controller'; 3 | require('./home.scss'); 4 | 5 | let homeModule = angular.module('demo.home', []); 6 | 7 | homeModule.config(HomeConfig); 8 | homeModule.controller('HomeController', HomeController); 9 | 10 | export default homeModule = homeModule.name 11 | -------------------------------------------------------------------------------- /lib/home/home.scss: -------------------------------------------------------------------------------- 1 | .gridListdemoDynamicTiles md-icon { 2 | width: 50%; 3 | height: 50%; 4 | } 5 | .gridListdemoDynamicTiles md-icon svg { 6 | -webkit-border-radius: 50%; 7 | -moz-border-radius: 50%; 8 | border-radius: 50%; 9 | } 10 | .gridListdemoDynamicTiles .s64 { 11 | font-size: 64px; 12 | } 13 | .gridListdemoDynamicTiles .s32 { 14 | font-size: 48px; 15 | } 16 | .gridListdemoDynamicTiles md-icon.fa { 17 | display: block; 18 | padding-left: 0; 19 | } 20 | .gridListdemoDynamicTiles md-icon.s32 span { 21 | padding-left: 8px; 22 | } 23 | .gridListdemoDynamicTiles md-grid-list { 24 | margin: 8px; 25 | } 26 | .gridListdemoDynamicTiles .gray { 27 | background: #f5f5f5; 28 | } 29 | .gridListdemoDynamicTiles .green { 30 | background: #b9f6ca; 31 | } 32 | .gridListdemoDynamicTiles .yellow { 33 | background: #ffff8d; 34 | } 35 | .gridListdemoDynamicTiles .blue { 36 | background: #84ffff; 37 | } 38 | .gridListdemoDynamicTiles .darkBlue { 39 | background: #80d8ff; 40 | } 41 | .gridListdemoDynamicTiles .deepBlue { 42 | background: #448aff; 43 | } 44 | .gridListdemoDynamicTiles .purple { 45 | background: #b388ff; 46 | } 47 | .gridListdemoDynamicTiles .lightPurple { 48 | background: #8c9eff; 49 | } 50 | .gridListdemoDynamicTiles .red { 51 | background: #ff8a80; 52 | } 53 | .gridListdemoDynamicTiles .pink { 54 | background: #ff80ab; 55 | } 56 | .gridListdemoDynamicTiles md-grid-tile { 57 | transition: all 300ms ease-out 50ms; 58 | } 59 | .gridListdemoDynamicTiles md-grid-tile md-icon { 60 | padding-bottom: 32px; 61 | } 62 | .gridListdemoDynamicTiles md-grid-tile md-grid-tile-footer { 63 | background: rgba(0, 0, 0, 0.68); 64 | height: 36px; 65 | } 66 | .gridListdemoDynamicTiles md-grid-tile-footer figcaption { 67 | width: 100%; 68 | } 69 | .gridListdemoDynamicTiles md-grid-tile-footer figcaption h3 { 70 | margin: 0; 71 | font-weight: 700; 72 | width: 100%; 73 | text-align: center; 74 | } 75 | 76 | //I don't know why, but if this is not declared, you'll see little dots on top of the speed dial. The code its the same from the material.angular one, & there is no bug on their code.....strange 77 | .md-scale .md-fab-action-item { opacity: 0; } 78 | -------------------------------------------------------------------------------- /lib/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {%= o.htmlWebpackPlugin.options.pkg.title %} 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |

22 | Toolbar 23 |

24 |
25 | 26 |
27 | 28 | {% for (var chunk in o.htmlWebpackPlugin.files) { %} 29 | 30 | {% } %} 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | // Import angular 2 | import 'angular'; 3 | // Material design css 4 | import 'angular-material/angular-material.css'; 5 | // Icons 6 | import 'font-awesome/css/font-awesome.css'; 7 | // Animation 8 | import angularAnimate from 'angular-animate'; 9 | // Materail Design lib 10 | import angularMaterial from 'angular-material'; 11 | // Router 12 | import angularUIRouter from 'angular-ui-router'; 13 | // Our modules 14 | import home from './home/home.module'; 15 | import sidenav from './sidenav/sidenav.module'; 16 | 17 | // Project specific style 18 | import './scss/bootstrap.scss' 19 | 20 | // Create our demo module 21 | export const demoModule = angular.module('demo', [ 22 | angularMaterial, 23 | angularAnimate, 24 | angularUIRouter, 25 | home, 26 | sidenav 27 | ]); 28 | 29 | demoModule.config(($stateProvider) => { 30 | $stateProvider.state('public', { 31 | url: "/public", 32 | abstract: true, 33 | views: { 34 | 'sidenav': { 35 | templateUrl: require("./sidenav/sidenav.html"), 36 | controller: "SidenavController as sidenav" 37 | } 38 | } 39 | }); 40 | }); 41 | 42 | demoModule.controller('MainController', function($mdSidenav) { 43 | let vm = this; 44 | vm.toggleSidenav = () => { 45 | $mdSidenav('left').toggle(); 46 | }; 47 | vm.closeSidenav = () => { 48 | $mdSidenav('left').close(); 49 | }; 50 | }); 51 | -------------------------------------------------------------------------------- /lib/scss/_fab.scss: -------------------------------------------------------------------------------- 1 | md-fab-speed-dial { 2 | position: fixed; 3 | bottom: 20px; 4 | right: 20px; 5 | md-fab-trigger { 6 | button { 7 | font-size: 25px !important; 8 | } 9 | } 10 | md-fab-actions { 11 | button { 12 | font-size: 20px !important; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/scss/_icon.scss: -------------------------------------------------------------------------------- 1 | md-icon[md-font-icon] { 2 | height: auto; 3 | } 4 | -------------------------------------------------------------------------------- /lib/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | md-icon[md-font-icon] { 2 | height: auto; 3 | } 4 | -------------------------------------------------------------------------------- /lib/scss/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import "./icon"; 3 | @import "./fab"; 4 | -------------------------------------------------------------------------------- /lib/sidenav/sidenav.controller.js: -------------------------------------------------------------------------------- 1 | class SidenavController { 2 | 3 | /** 4 | * Constructor class SidenavController 5 | * 6 | * @param {object} $scope 7 | */ 8 | constructor($scope) { 9 | 'ngInject'; 10 | 11 | } 12 | } 13 | 14 | export default SidenavController; 15 | -------------------------------------------------------------------------------- /lib/sidenav/sidenav.html: -------------------------------------------------------------------------------- 1 | 2 |

Sidenav Left

3 | 4 | 5 | 6 | Close Sidenav Left 7 | 8 | -------------------------------------------------------------------------------- /lib/sidenav/sidenav.module.js: -------------------------------------------------------------------------------- 1 | import SidenavController from './sidenav.controller'; 2 | 3 | 4 | let sidenavModule = angular.module('demo.sidenav', []); 5 | 6 | sidenavModule.controller('SidenavController', SidenavController); 7 | 8 | export default sidenavModule = sidenavModule.name 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular1.4-ES6-material-webpack-boilerplate", 3 | "version": "1.0.0", 4 | "description": "A simple AngularJS 1.4 boilerplate using ES6, material design and webpack", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "rm -rf www/* && webpack -p", 9 | "devserver": "webpack-dev-server --port 9100 --progress --colors" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate.git" 14 | }, 15 | "author": "shprink (http://julienrenaux.fr/)", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate/issues" 19 | }, 20 | "dependencies": { 21 | "angular": "~1.4.8", 22 | "angular-animate": "~1.4.8", 23 | "angular-aria": "~1.4.8", 24 | "angular-material": "^1.0.0", 25 | "angular-ui-router": "^0.2.14", 26 | "font-awesome": "^4.3.0" 27 | }, 28 | "homepage": "https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate", 29 | "devDependencies": { 30 | "autoprefixer-loader": "^2.0.0", 31 | "babel-core": "^5.2.9", 32 | "babel-loader": "^5.0.0", 33 | "css-loader": "^0.12.0", 34 | "file-loader": "^0.8.1", 35 | "html-loader": "^0.3.0", 36 | "html-webpack-plugin": "^1.3.0", 37 | "ng-annotate-loader": "~0.0.4", 38 | "node-sass": "^3.2.0", 39 | "path": "^0.11.14", 40 | "sass-loader": "^1.0.2", 41 | "style-loader": "^0.12.1", 42 | "webpack": "^1.8.11", 43 | "webpack-dev-server": "^1.8.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'), 2 | webpack = require("webpack"), 3 | libPath = path.join(__dirname, 'lib'), 4 | wwwPath = path.join(__dirname, 'www'), 5 | pkg = require('./package.json'), 6 | HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | 8 | 9 | var config = { 10 | entry: path.join(libPath, 'index.js'), 11 | output: { 12 | path: path.join(wwwPath), 13 | filename: 'bundle-[hash:6].js' 14 | }, 15 | module: { 16 | loaders: [{ 17 | test: /\.html$/, 18 | loader: 'file?name=templates/[name]-[hash:6].html' 19 | }, { 20 | test: /\.(png|jpg)$/, 21 | loader: 'file?name=img/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest 22 | }, { 23 | test: /\.css$/, 24 | loader: "style!css" 25 | }, { 26 | test: /\.scss$/, 27 | loader: "style!css!autoprefixer!sass" 28 | }, { 29 | test: /\.js$/, 30 | exclude: /(node_modules)/, 31 | loader: "ng-annotate?add=true!babel" 32 | }, { 33 | test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/], 34 | loader: 'file?name=fonts/[name].[ext]' 35 | }] 36 | }, 37 | plugins: [ 38 | // HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin 39 | new HtmlWebpackPlugin({ 40 | filename: 'index.html', 41 | pkg: pkg, 42 | template: path.join(libPath, 'index.html') 43 | }), 44 | 45 | // OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin 46 | new webpack.optimize.OccurenceOrderPlugin(), 47 | 48 | // Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication 49 | new webpack.optimize.DedupePlugin() 50 | ] 51 | }; 52 | 53 | module.exports = config; 54 | -------------------------------------------------------------------------------- /www/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | --------------------------------------------------------------------------------