├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── README.md ├── UNLICENSE ├── Vagrantfile ├── gulpfile.js ├── package.json ├── provision ├── README.md ├── base.sh └── client.sh ├── src ├── app │ ├── controllers │ │ ├── application │ │ │ ├── index.js │ │ │ ├── style.styl │ │ │ └── template.html │ │ ├── authentication │ │ │ ├── index.js │ │ │ └── template.html │ │ ├── home │ │ │ ├── index.js │ │ │ ├── style.styl │ │ │ └── template.html │ │ ├── index.js │ │ ├── login │ │ │ ├── index.js │ │ │ └── template.html │ │ ├── myProfile │ │ │ ├── images │ │ │ │ └── angular.png │ │ │ ├── index.js │ │ │ ├── style.styl │ │ │ └── template.html │ │ ├── page1 │ │ │ ├── index.js │ │ │ ├── style.styl │ │ │ └── template.html │ │ └── page2 │ │ │ ├── index.js │ │ │ ├── style.styl │ │ │ └── template.html │ ├── directives │ │ ├── footer │ │ │ ├── index.js │ │ │ ├── style.styl │ │ │ └── template.html │ │ ├── index.js │ │ └── navbar │ │ │ ├── index.js │ │ │ └── template.html │ ├── index.js │ ├── routes.js │ └── services │ │ ├── auth.js │ │ └── index.js └── assets │ ├── favicon.png │ ├── index.html │ └── stylus │ ├── main.styl │ └── root.styl ├── webpack.config.js ├── webpack.dev.js └── webpack.prod.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 4 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/build 2 | **/local -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true, 6 | "jquery": true 7 | }, 8 | "ecmaFeatures": { 9 | "arrowFunctions": true, 10 | "blockBindings": true, 11 | "classes": true, 12 | "defaultParams": true, 13 | "destructuring": true, 14 | "forOf": true, 15 | "generators": true, 16 | "modules": true, 17 | "spread": true, 18 | "templateStrings": true, 19 | "jsx": true 20 | }, 21 | "rules": { 22 | "consistent-return": [0], 23 | "key-spacing": [0], 24 | "quotes": [1, "single", "avoid-escape"], 25 | "quote-props": [1, "as-needed"], 26 | "new-cap": [0], 27 | "no-multi-spaces": [0], 28 | "no-shadow": [0], 29 | "no-unused-vars": [1], 30 | "no-undef": 2, 31 | "no-unused-expressions": 0, 32 | "no-use-before-define": [2, "nofunc"], 33 | "no-trailing-spaces": [2], 34 | "eol-last": [0], 35 | "no-labels": [2], 36 | "indent": 2, 37 | "vars-on-top": 2, 38 | "camelcase": [2, {"properties": "never"}], 39 | "semi": [2, "always"] 40 | } 41 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vagrant 3 | local 4 | 5 | 6 | npm-debug.log* 7 | node_modules 8 | build -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About 2 | 3 | A **seed** AngularJS project using: 4 | 5 | + AngularJS 1.4.5 6 | + Angular UI Router 0.2.15 7 | + Bootstrap 3.3.5 with Angular Strap 2.3.1 8 | + Gulp 3.9 9 | + Webpack 1.12.1 10 | + ES6 via Babel 11 | 12 | This project demonstrates how AngularJS can be used with Webpack and ES6 via the provided webpack configuration files. 13 | 14 | # Development Environment Provisioning 15 | 16 | Please read the [provisioning](./provision/README.md) section for setting up the development environment. 17 | 18 | # Linting 19 | 20 | An [.eslintrc](./eslintrc) is provided for [ESLint](http://eslint.org/) but the eslint packages are not listed in [package.json](./package.json) as 21 | the eslint modules are required for the client machine (and not the development server). 22 | 23 | To install ESLint: 24 | 25 | ``` 26 | npm install -g eslint 27 | ``` -------------------------------------------------------------------------------- /UNLICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to -------------------------------------------------------------------------------- /Vagrantfile: -------------------------------------------------------------------------------- 1 | # -*- mode: ruby -*- 2 | # vi: set ft=ruby : 3 | 4 | Vagrant.configure(2) do |config| 5 | config.vm.box = "bento/debian-7.8-i386" 6 | config.vm.box_version = "2.2.0" 7 | config.vm.network :forwarded_port, guest: 22, host: 3025, id: 'ssh' 8 | 9 | config.vm.network "private_network", ip: "192.168.30.25" 10 | 11 | # disable the default vagrant shared folder file 12 | config.vm.synced_folder ".", "vagrant", disabled: true 13 | 14 | config.vm.provider "virtualbox" do |vb| 15 | # Customize the amount of memory on the VM: 16 | vb.memory = "384" 17 | vb.cpus = 1 18 | end 19 | 20 | # provision VM 21 | config.vm.provision "shell", path: "provision/base.sh", privileged: false 22 | 23 | if RUBY_PLATFORM =~ /mingw/ 24 | config.vm.provision "shell", path: "provision/client.sh", privileged: false 25 | end 26 | 27 | 28 | end 29 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var path = require( 'path' ); 2 | var gulp = require( 'gulp' ); 3 | var gutil = require( 'gulp-util' ); 4 | var webpack = require( 'webpack' ); 5 | var gulpWebpack = require( 'gulp-webpack' ); 6 | var WebpackDevServer = require( 'webpack-dev-server' ); 7 | var stylus = require( 'gulp-stylus' ); 8 | var clean = require( 'gulp-clean' ); 9 | var runSequence = require( 'run-sequence' ); 10 | 11 | function handleError( task ) { 12 | return function ( err ) { 13 | this.emit( 'end' ); 14 | gutil.log( 'Error handler for', task, err.toString() ); 15 | }; 16 | } 17 | 18 | // The development server (the recommended option for development) 19 | gulp.task( 'default', [ 'webpack-dev-server', 'stylus:compile' ] ); 20 | 21 | gulp.task( 'webpack-dev-server', function ( callback ) { 22 | var config = Object.create( require( './webpack.dev.js' ) ); 23 | 24 | // Start a webpack-dev-server 25 | new WebpackDevServer( webpack( config ), { 26 | contentBase: path.join( __dirname, 'build' ), 27 | publicPath: config.output.publicPath, 28 | hot: true, 29 | historyApiFallback: true, 30 | stats: { 31 | colors: true 32 | } 33 | } ).listen( 8080, '0.0.0.0', function ( err ) { 34 | if ( err ) { 35 | throw new gutil.PluginError( 'webpack-dev-server', err ); 36 | } 37 | gutil.log( '[webpack-dev-server]', 'http://192.168.30.25:8080' ); 38 | callback(); 39 | } ); 40 | 41 | //setup stylus watcher 42 | gulp.watch( [ 'src/assets/stylus/*.styl', 'src/assets/stylus/**/*.styl' ], [ 'stylus:compile' ] ); 43 | } ); 44 | 45 | gulp.task( 'stylus:compile', function () { 46 | return gulp.src( './src/assets/stylus/main.styl' ) 47 | .pipe( stylus().on( 'error', handleError( 'stylus:compile' ) ) ) 48 | .pipe( gulp.dest( './src/assets' ) ); 49 | } ); 50 | 51 | gulp.task( 'clean:build', function () { 52 | return gulp.src( 'build/*', { read: false } ) 53 | .pipe( clean() ); 54 | } ); 55 | 56 | gulp.task( 'build:cp:index', function () { 57 | return gulp.src( [ 58 | './src/assets/favicon.png' 59 | ] ) 60 | .pipe( gulp.dest( 'build/' ) ); 61 | } ); 62 | 63 | gulp.task( 'build:webpack', function () { 64 | return gulp.src( 'src/app/index.js' ) 65 | .pipe( gulpWebpack( require( './webpack.prod.js' ), webpack ) ) 66 | .pipe( gulp.dest( 'build/' ) ); 67 | } ); 68 | 69 | 70 | gulp.task( 'build', function ( cb ) { 71 | runSequence( 72 | 'clean:build', 73 | [ 'stylus:compile', 'build:cp:index' ], 74 | 'build:webpack', 75 | cb 76 | ); 77 | } ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng6-starter", 3 | "version": "1.0.0", 4 | "description": "AngularJS with ES6 (via babel) and webpack", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": { 10 | "name": "Nazar Aziz", 11 | "email": "mcnazar@gmail.com" 12 | }, 13 | "dependencies": { 14 | "angular": "1.4.5", 15 | "angular-animate": "1.4.5", 16 | "angular-aria": "1.4.5", 17 | "angular-strap": "2.3.1", 18 | "angular-ui-router": "0.2.15", 19 | "bootstrap": "3.3.5", 20 | "font-awesome": "4.4.0", 21 | "jquery": "2.1.4", 22 | "lodash": "3.10.1", 23 | "bluebird": "2.9.34" 24 | }, 25 | "devDependencies": { 26 | "babel-loader": "5.3.2", 27 | "compression-webpack-plugin": "0.2.0", 28 | "css-loader": "0.17.0", 29 | "file-loader": "0.8.4", 30 | "gulp": "3.9.0", 31 | "gulp-clean": "0.3.1", 32 | "gulp-imagemin": "2.3.0", 33 | "gulp-stylus": "2.0.6", 34 | "gulp-util": "3.0.6", 35 | "gulp-webpack": "1.5.0", 36 | "gulp-webpack": "1.5.0", 37 | "html-loader": "0.3.0", 38 | "html-webpack-plugin": "1.6.1", 39 | "ng-annotate-loader": "0.0.6", 40 | "ngtemplate-loader": "1.3.0", 41 | "run-sequence": "1.1.2", 42 | "style-loader": "0.12.3", 43 | "stylus-loader": "1.2.1", 44 | "url-loader": "0.5.6", 45 | "webpack": "1.12.1", 46 | "webpack-dev-server": "1.10.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /provision/README.md: -------------------------------------------------------------------------------- 1 | # Development Environment Setup 2 | 3 | ## Virtual Development using Vagrant 4 | 5 | [Vagrant](https://www.vagrantup.com) provides easy to configure, reproducible, and portable work environments built on top of 6 | industry-standard technology and controlled by a single consistent workflow to help maximize the productivity and flexibility of you and your team. 7 | 8 | ## Setting up Vagrant 9 | 10 | ### 1. Download and Install Vagrant 11 | 12 | Head to the Vagrant [downloads](http://www.vagrantup.com/downloads) and download the correct installation package for your OS 13 | 14 | ### 2. Download and Install VirtualBox 15 | 16 | The project [Vagrantfile](../Vagrantfile) is configured for VirtualBox, which can be [downloaded here](https://www.virtualbox.org/wiki/Downloads). 17 | Please ensure that the Host Only network option is selected during VirtualBox installation. 18 | 19 | ### 3. Download a Vagrant Base Box 20 | 21 | Install the local base box using the following command: 22 | 23 | ``` 24 | vagrant box add bento/debian-7.8-i386 25 | ``` 26 | 27 | When asked, choose the virtualbox variant. 28 | 29 | ### 4. Provision the Local Development VM 30 | 31 | Once **bento/debian-7.8-i386** has been downloaded open a command prompt at the project folder root and issue the following command: 32 | 33 | ``` 34 | vagrant up 35 | ``` 36 | 37 | This should clone the base box into a project specific box. The Vagrant file should also provision all pre-requisites (i.e. node, npm, build tools etc). Once complete, the box should be 38 | accessible on address **192.168.30.25**. [PuTTY](http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html) or [SmarTTY](http://smartty.sysprogs.com/) 39 | can be used to SSH into 192.168.30.25 using the username/password of vagrant/vagrant. 40 | 41 | ### 5. Setup File Synchronization 42 | 43 | Vagrant allows using your favourite IDE/Text Editor on your OS. These files are then synced on the Vagrant box, which is configured to build and 44 | serve the web application. During development, for example, the web application is accessible on http://192.168.30.25:8080. 45 | 46 | Vagrant VMs are almost perfect apart from the default Shared Folder mechanism. In VirtualBox, the vboxfs shared folder has a number of shortcomings: 47 | 48 | #### Lacks symbolic link support 49 | 50 | This can be hacked using: 51 | 52 | ``` 53 | config.vm.provider "virtualbox" do |vb| 54 | vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/vagrant", "1"] 55 | end 56 | ``` 57 | 58 | Additionally, if using Windows, the non Admin user must be provided with [create symbolic link permissions](http://superuser.com/questions/124679/how-do-i-create-a-link-in-windows-7-home-premium-as-a-regular-user?answertab=votes#125981). 59 | 60 | The above "works" but is less than ideal 61 | 62 | #### Does not expose file changes 63 | 64 | This is a critical issue as LiveReload or WebPack's Hot Reload never detects file changes. Any files in the /vagrant share will not be reloaded on file change. 65 | 66 | #### Workaround 1 67 | 68 | Use an alternative sync method such as RSYNC or [Vagrant Unison](https://github.com/mrdavidlaing/vagrant-unison) 69 | 70 | #### Workaround 2 71 | 72 | Configure your IDE/Text Editor to remote sync all files on change. WebStorm, for example, provides a facility where project files can be synced using SFTP. 73 | 74 | 75 | ### 6. Synchronize Project Files to Vagrant Box 76 | 77 | Typically I create a **files** folder inside the vagrant home (/home/vagrant) folder and configure project files to be synchronized there. 78 | 79 | Once synchronized, cd into ~/files and install all npm dependencies using: 80 | 81 | ``` 82 | npm install 83 | ``` 84 | 85 | Once all node dependencies are installed, start the development server using: 86 | 87 | ``` 88 | gulp 89 | ``` 90 | 91 | The development web application should now be accessible on [http://192.168.30.25:8080](http://192.168.30.25:8080). -------------------------------------------------------------------------------- /provision/base.sh: -------------------------------------------------------------------------------- 1 | # !/usr/bin/env bash 2 | 3 | # install dependencies 4 | sudo apt-get update 5 | sudo apt-get install -y build-essential 6 | 7 | # install node via nvm - https://github.com/creationix/nvm 8 | echo "Installing nvm..." 9 | curl https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash 10 | 11 | echo "source /home/vagrant/.nvm/nvm.sh" >> /home/vagrant/.profile 12 | source /home/vagrant/.profile 13 | 14 | nvm install 0.12.7 15 | nvm alias default 0.12.7 16 | 17 | # install global npm packages 18 | 19 | npm install -g gulp@3.9.0 -------------------------------------------------------------------------------- /provision/client.sh: -------------------------------------------------------------------------------- 1 | # !/usr/bin/env bash 2 | 3 | # fix putty ctrl+left right arrow navigation 4 | 5 | echo 'tput smkx' >> /home/vagrant/.profile 6 | -------------------------------------------------------------------------------- /src/app/controllers/application/index.js: -------------------------------------------------------------------------------- 1 | import './style.styl'; 2 | 3 | export default function() { 4 | 'ngInject'; 5 | } -------------------------------------------------------------------------------- /src/app/controllers/application/style.styl: -------------------------------------------------------------------------------- 1 | #application { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/app/controllers/application/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
-------------------------------------------------------------------------------- /src/app/controllers/authentication/index.js: -------------------------------------------------------------------------------- 1 | export default function( $state, Authentication ) { 2 | 'ngInject'; 3 | 4 | if ( !(Authentication.loggedIn) ) { 5 | $state.go( 'app.login' ); 6 | } 7 | } -------------------------------------------------------------------------------- /src/app/controllers/authentication/template.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /src/app/controllers/home/index.js: -------------------------------------------------------------------------------- 1 | import './style.styl'; 2 | 3 | export default function( $scope ) { 4 | 'ngInject'; 5 | 6 | $scope.greeting = 'oh hai'; 7 | } -------------------------------------------------------------------------------- /src/app/controllers/home/style.styl: -------------------------------------------------------------------------------- 1 | #home { 2 | 3 | } -------------------------------------------------------------------------------- /src/app/controllers/home/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Home Page

4 | {{ greeting }} 5 |
6 |
-------------------------------------------------------------------------------- /src/app/controllers/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | 3 | import ApplicationController from './application'; 4 | 5 | import AuthenticationController from './authentication'; 6 | import HomeController from './home'; 7 | import LoginController from './login'; 8 | import MyProfileController from './myProfile'; 9 | import Page1Controller from './page1'; 10 | import Page2Controller from './page2'; 11 | 12 | export default angular 13 | .module( 'app.controllers', [] ) 14 | .controller( 'ApplicationController', ApplicationController ) 15 | .controller( 'AuthenticationController', AuthenticationController ) 16 | .controller( 'HomeController', HomeController ) 17 | .controller( 'LoginController', LoginController ) 18 | .controller( 'MyProfileController', MyProfileController ) 19 | .controller( 'Page1Controller', Page1Controller ) 20 | .controller( 'Page2Controller', Page2Controller ) 21 | .name; -------------------------------------------------------------------------------- /src/app/controllers/login/index.js: -------------------------------------------------------------------------------- 1 | export default function( $scope, $state, Authentication ) { 2 | 'ngInject'; 3 | 4 | $scope.login = function() { 5 | Authentication.logIn(); 6 | $state.go( 'app.my.profile' ); 7 | }; 8 | 9 | $scope.isLoggedIn = function() { 10 | return Authentication.loggedIn; 11 | }; 12 | 13 | } -------------------------------------------------------------------------------- /src/app/controllers/login/template.html: -------------------------------------------------------------------------------- 1 |
2 | 7 |
-------------------------------------------------------------------------------- /src/app/controllers/myProfile/images/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nazar/angular-es6-webpack-seed/6866010ddca89efc6d35c6376a6f5dd6c5bc6d32/src/app/controllers/myProfile/images/angular.png -------------------------------------------------------------------------------- /src/app/controllers/myProfile/index.js: -------------------------------------------------------------------------------- 1 | import './style.styl'; 2 | import ngImg from './images/angular.png'; 3 | 4 | export default function( $scope, $state, Authentication ) { 5 | 'ngInject'; 6 | 7 | $scope.ngImg = ngImg; 8 | 9 | $scope.logout = function() { 10 | Authentication.logOut(); 11 | $state.go( 'app.home' ); 12 | }; 13 | 14 | } -------------------------------------------------------------------------------- /src/app/controllers/myProfile/style.styl: -------------------------------------------------------------------------------- 1 | #my-profile { 2 | .btn { 3 | margin-bottom: 10px; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/controllers/myProfile/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

This! Is! My profile!!1

4 | 5 |
6 | 11 |
12 | 13 |
14 | 15 |
16 |
17 |
-------------------------------------------------------------------------------- /src/app/controllers/page1/index.js: -------------------------------------------------------------------------------- 1 | import './style.styl'; 2 | 3 | export default function() { 4 | 'ngInject'; 5 | } -------------------------------------------------------------------------------- /src/app/controllers/page1/style.styl: -------------------------------------------------------------------------------- 1 | #page1 { 2 | 3 | } -------------------------------------------------------------------------------- /src/app/controllers/page1/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Page 1

4 |
5 |
-------------------------------------------------------------------------------- /src/app/controllers/page2/index.js: -------------------------------------------------------------------------------- 1 | import './style.styl'; 2 | 3 | export default function() { 4 | 'ngInject'; 5 | } -------------------------------------------------------------------------------- /src/app/controllers/page2/style.styl: -------------------------------------------------------------------------------- 1 | #page2 { 2 | 3 | } -------------------------------------------------------------------------------- /src/app/controllers/page2/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Page 2

4 |
5 |
-------------------------------------------------------------------------------- /src/app/directives/footer/index.js: -------------------------------------------------------------------------------- 1 | import './style.styl'; 2 | import template from 'directives/footer/template.html'; 3 | 4 | export default function() { 5 | return { 6 | restrict: 'E', 7 | replace: true, 8 | templateUrl: template 9 | }; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/app/directives/footer/style.styl: -------------------------------------------------------------------------------- 1 | .footer { 2 | position: absolute; 3 | bottom: 0; 4 | padding-top: 5px; 5 | width: 100%; 6 | 7 | height: 30px; 8 | 9 | background-color: #f8f8f8; 10 | border-color: #e7e7e7; 11 | 12 | box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.3); 13 | 14 | .content { 15 | font-size: 15px; 16 | } 17 | 18 | } -------------------------------------------------------------------------------- /src/app/directives/footer/template.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/directives/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | 3 | import footer from './footer'; 4 | import navbar from './navbar'; 5 | 6 | export default angular 7 | .module( 'app.directives', [] ) 8 | .directive( 'seedFooter', footer ) 9 | .directive( 'seedNavbar', navbar ) 10 | .name; -------------------------------------------------------------------------------- /src/app/directives/navbar/index.js: -------------------------------------------------------------------------------- 1 | import template from 'directives/navbar/template.html'; 2 | 3 | export default function() { 4 | return { 5 | restrict: 'E', 6 | templateUrl: template 7 | }; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /src/app/directives/navbar/template.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/index.js: -------------------------------------------------------------------------------- 1 | require( 'assets/main.css' ); 2 | 3 | import angular from 'angular'; 4 | import angularUIRouter from 'angular-ui-router'; 5 | 6 | import routes from './routes'; 7 | 8 | import controllers from './controllers'; 9 | import directives from './directives'; 10 | import services from './services'; 11 | 12 | export default angular 13 | .module( 'app', [ 14 | 'mgcrea.ngStrap', 15 | angularUIRouter, 16 | 17 | controllers, 18 | directives, 19 | services 20 | ] ) 21 | .config( routes ); -------------------------------------------------------------------------------- /src/app/routes.js: -------------------------------------------------------------------------------- 1 | import applicationTemplate from 'controllers/application/template.html'; 2 | 3 | import authenticationTemplate from 'controllers/authentication/template.html'; 4 | import homeTemplate from 'controllers/home/template.html'; 5 | import loginTemplate from 'controllers/login/template.html'; 6 | import myProfileTemplate from 'controllers/myProfile/template.html'; 7 | import page1Template from 'controllers/page1/template.html'; 8 | import page2Template from 'controllers/page2/template.html'; 9 | 10 | export default function ( $stateProvider, $urlRouterProvider, $locationProvider ) { 11 | 'ngInject'; 12 | 13 | $locationProvider.html5Mode( { 14 | enabled: true, 15 | requireBase: false 16 | } ); 17 | 18 | $urlRouterProvider.otherwise( '/' ); 19 | 20 | $stateProvider 21 | .state( 'app', { 22 | url: '', 23 | abstract: true, 24 | templateUrl: applicationTemplate, 25 | controller: 'ApplicationController' 26 | } ) 27 | .state( 'app.home', { 28 | url: '/', 29 | templateUrl: homeTemplate, 30 | controller: 'HomeController' 31 | } ) 32 | .state( 'app.page1', { 33 | url: '/page1', 34 | templateUrl: page1Template, 35 | controller: 'Page1Controller' 36 | } ) 37 | .state( 'app.page2', { 38 | url: '/page2', 39 | templateUrl: page2Template, 40 | controller: 'Page2Controller' 41 | } ) 42 | .state( 'app.login', { 43 | url: '/login', 44 | templateUrl: loginTemplate, 45 | controller: 'LoginController' 46 | } ) 47 | .state( 'app.my', { 48 | url: '/my', 49 | templateUrl: authenticationTemplate, 50 | controller: 'AuthenticationController' 51 | } ) 52 | .state( 'app.my.profile', { 53 | url: '/profile', 54 | templateUrl: myProfileTemplate, 55 | controller: 'MyProfileController' 56 | } ); 57 | } 58 | -------------------------------------------------------------------------------- /src/app/services/auth.js: -------------------------------------------------------------------------------- 1 | export default class { 2 | 3 | constructor() { 4 | this.loggedIn = false; 5 | } 6 | 7 | logIn() { 8 | this.loggedIn = true; 9 | } 10 | 11 | logOut() { 12 | this.loggedIn = false; 13 | } 14 | 15 | } -------------------------------------------------------------------------------- /src/app/services/index.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | 3 | import auth from './auth'; 4 | 5 | export default angular 6 | .module( 'app.services', [] ) 7 | .service( 'Authentication', auth ) 8 | .name; -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nazar/angular-es6-webpack-seed/6866010ddca89efc6d35c6376a6f5dd6c5bc6d32/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | AngularJS Seed - Change Me 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/assets/stylus/main.styl: -------------------------------------------------------------------------------- 1 | @import 'root'; -------------------------------------------------------------------------------- /src/assets/stylus/root.styl: -------------------------------------------------------------------------------- 1 | html { 2 | position: relative; 3 | min-height: 100%; 4 | } 5 | 6 | #root { 7 | 8 | } 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var _ = require( 'lodash' ); 2 | var path = require( 'path' ); 3 | var webpack = require( 'webpack' ); 4 | var HtmlWebpackPlugin = require( 'html-webpack-plugin' ); 5 | 6 | var pathApp; 7 | 8 | function pathTo() { 9 | return path.join( __dirname, 'src', path.join.apply( path, arguments ) ); 10 | } 11 | 12 | pathApp = _.partial( pathTo, 'app' ); 13 | 14 | module.exports = function ( options ) { 15 | var config = _.merge( {}, { 16 | entry: { 17 | vendor: [ 18 | 'font-awesome/css/font-awesome.min.css', 19 | 'bootstrap/dist/css/bootstrap.min.css', 20 | 'bootstrap/dist/css/bootstrap-theme.min.css', 21 | 22 | 'jquery', 23 | 'bluebird', 24 | 'lodash', 25 | 26 | 'angular', 27 | 'angular-animate', 28 | 'angular-aria', 29 | 'angular-ui-router', 30 | 31 | 'angular-strap/dist/angular-strap.min.js', 32 | 'angular-strap/dist/angular-strap.tpl.min.js' 33 | ] 34 | }, 35 | 36 | output: { 37 | path: path.join( __dirname, 'build' ), 38 | filename: 'js/[name]-[hash].js', 39 | publicPath: '/' 40 | }, 41 | plugins: [ 42 | new webpack.HotModuleReplacementPlugin(), 43 | new webpack.NoErrorsPlugin(), 44 | new webpack.ProvidePlugin( { 45 | jQuery: 'jquery', 46 | $: 'jquery', 47 | 'window.jQuery': 'jquery' 48 | } ), 49 | new HtmlWebpackPlugin( { 50 | template: './src/assets/index.html', 51 | inject: 'body' 52 | } ), 53 | new webpack.optimize.CommonsChunkPlugin( 'vendor', 'js/vendor-[hash].js' ) 54 | ], 55 | resolve: { 56 | extensions: [ '', '.js' ], 57 | alias: { 58 | //app sub aliases 59 | app: pathApp( 'index.js' ), 60 | controllers: pathApp( 'controllers' ), 61 | directives: pathApp( 'directives' ), 62 | 63 | //assets sub aliases 64 | assets: pathTo( 'assets' ), 65 | 66 | //vendor aliases 67 | jquery: 'jquery/dist/jquery.min.js' 68 | } 69 | }, 70 | module: { 71 | loaders: [ 72 | { 73 | test: /\.html$/, 74 | loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './src/app')) + '/!html' 75 | }, 76 | { 77 | test: /\.styl$/, 78 | loader: 'style-loader!css!stylus' 79 | }, 80 | { 81 | test: /\.css$/, 82 | loader: 'style-loader!css-loader' 83 | }, 84 | { 85 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 86 | loader: 'url-loader?name=assets/[hash][name].[ext]&limit=10000&mimetype=application/font-woff' 87 | }, 88 | { 89 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 90 | loader: 'file-loader?name=assets/[hash][name].[ext]' 91 | }, 92 | { 93 | test: /\.jpg|\.png|\.mp3/, 94 | loader: 'file-loader?name=assets/[hash][name].[ext]' 95 | } 96 | ] 97 | }, 98 | resolveLoader: { 99 | root: path.join( __dirname, 'node_modules' ) 100 | } 101 | }, options.overrides ); 102 | 103 | config.module.loaders = _.union( config.module.loaders, options.loaders ); 104 | config.plugins = _.union( config.plugins, options.plugins ); 105 | 106 | return config; 107 | }; -------------------------------------------------------------------------------- /webpack.dev.js: -------------------------------------------------------------------------------- 1 | var path = require( 'path' ); 2 | var webpack = require( 'webpack' ); 3 | 4 | var webpackDevConfig = { 5 | overrides: { 6 | devtool: 'eval', 7 | debug: true, 8 | entry: { 9 | app: [ 10 | 'webpack-dev-server/client?http://192.168.30.25:8080', 11 | 'webpack/hot/dev-server', 12 | './src/app/index.js' 13 | ] 14 | } 15 | }, 16 | 17 | loaders: [ 18 | { 19 | test: /\.js$/, 20 | loaders: [ 'ng-annotate', 'babel' ], 21 | include: path.join( __dirname, 'src', 'app' ), 22 | exclude: path.join( __dirname, 'node_modules' ) 23 | } 24 | ], 25 | 26 | plugins: [ 27 | new webpack.DefinePlugin( { 28 | 'process.env': { 29 | NODE_ENV: JSON.stringify( 'development' ) 30 | } 31 | } ) 32 | ] 33 | }; 34 | 35 | module.exports = require( './webpack.config' )( webpackDevConfig ); -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | var path = require( 'path' ); 2 | var webpack = require( 'webpack' ); 3 | var CompressionPlugin = require( 'compression-webpack-plugin' ); 4 | 5 | var webpackProdConfig = { 6 | overrides: { 7 | entry: { 8 | app: [ 9 | './src/app/index.js' 10 | ] 11 | } 12 | }, 13 | 14 | loaders: [ 15 | { 16 | test: /\.js$/, 17 | loaders: [ 'ng-annotate', 'babel' ], 18 | include: path.join( __dirname, 'src', 'app' ), 19 | exclude: path.join( __dirname, 'node_modules' ) 20 | } 21 | ], 22 | 23 | plugins: [ 24 | new webpack.DefinePlugin( { 25 | 'process.env': { 26 | NODE_ENV: JSON.stringify( 'production' ) 27 | } 28 | } ), 29 | new webpack.optimize.DedupePlugin(), 30 | new webpack.optimize.UglifyJsPlugin(), 31 | new CompressionPlugin({ 32 | asset: '{file}.gz', 33 | algorithm: 'gzip', 34 | threshold: 10240, 35 | minRatio: 0.8 36 | } ) 37 | ] 38 | }; 39 | 40 | module.exports = require( './webpack.config' )( webpackProdConfig ); --------------------------------------------------------------------------------