├── .bowerrc ├── .gitignore ├── .jshintrc ├── .travis.yml ├── LICENSE ├── README.md ├── app ├── assets │ ├── app.css │ └── svg │ │ ├── Log-in.svg │ │ ├── dollar.svg │ │ └── menu.svg ├── index.html └── src │ └── tabs │ ├── Tabs.js │ ├── TabsController.js │ ├── TabsService.js │ ├── financial │ ├── financial.html │ └── financial.js │ └── login │ ├── login.html │ └── login.js ├── bower.json └── package.json /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/bower_components" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | logs/* 2 | !.gitkeep 3 | node_modules/ 4 | bower_components/ 5 | tmp 6 | .DS_Store 7 | .idea 8 | app/jspm_packages 9 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globalstrict": true, 3 | "globals": { 4 | "angular": false, 5 | "describe": false, 6 | "it": false, 7 | "expect": false, 8 | "beforeEach": false, 9 | "afterEach": false, 10 | "module": false, 11 | "inject": false 12 | } 13 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | 5 | before_script: 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start 8 | - npm start > /dev/null & 9 | - npm run update-webdriver 10 | - sleep 1 # give server time to start 11 | 12 | script: 13 | - node_modules/.bin/karma start karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox 14 | - node_modules/.bin/protractor e2e-tests/protractor.conf.js --browser=firefox 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2010-2014 Google, Inc. http://angularjs.org 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 13 | all 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 21 | THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Material with Routing - a Demo 2 | 3 | This project contains a sample AngularJS application and is preconfigured to install the Angular Material framework 4 | and a bunch of dependenciesfor instant web development gratification. The seed code for the project was provided by 5 | the Angular Material starter project 6 | [https://github.com/angular/material-start](https://github.com/angular/material-start). That includes this very 7 | README.md file 8 | 9 | This sample application is intended to be a shell to demonstrate a starter Angular Material project and how it can be 10 | used with ngRoute to create a modular project with html fragments which can be brought together using ngRoute but 11 | without exposing *ugly* URL links, but instead expose a side navigation bar (side nav). The contents of the side nav 12 | link to the different html fragments which are *"loaded"* into the main content area. I must emphasize *shell* because 13 | in particular, I leave out any code for authentication or form submission. The methods called when you click some of the 14 | buttons is nothing but a stub. 15 | 16 | It also demonstrates the use angular-material's ```md-tabs```, ```md-input```, ```md-select``` and ```md-button``` 17 | 18 | ## Getting Started 19 | 20 | #### Prerequisites 21 | 22 | You will need **git** to clone this repository. You can get git from 23 | [http://git-scm.com/](http://git-scm.com/). 24 | 25 | We also use a number of **node.js** tools to initialize and test this project. You must have node.js and 26 | its package manager **npm** installed. You can get them from [http://nodejs.org/](http://nodejs.org/). 27 | 28 | After you get node.js and npm, be sure to install **bower**. You can install bower as such 29 | 30 | ``` 31 | npm install bower 32 | ``` 33 | 34 | #### Install the dependencies 35 | 36 | Go to the root of this project and execute ```bower install bower.json``` which will install a number of files in 37 | `app/bower_components` 38 | 39 | *Note that the `bower_components` folder would normally be installed in the root folder but 40 | the `.bowerrc` file alters the directory to be `app/bower_components`. Putting it in the app folder makes 41 | it easier to serve the files by a webserver.* 42 | 43 | ## Directory Layout 44 | 45 | 46 | app/ --> all of the source files for the application 47 | assets/app.css --> default stylesheet 48 | src/ --> all app specific modules 49 | users/ --> package for user features 50 | index.html --> app layout file (the main html template file of the app) 51 | karma.conf.js --> config file for running unit tests with Karma 52 | e2e-tests/ --> end-to-end tests 53 | protractor-conf.js --> Protractor config file 54 | scenarios.js --> end-to-end scenarios to be run by Protractor 55 | 56 | 57 | ## Updating Angular 58 | 59 | You can update the tool dependencies by running: 60 | 61 | ``` 62 | npm update 63 | ``` 64 | 65 | This will find the latest versions that match the version ranges specified in the `package.json` file. 66 | 67 | You can update the Angular dependencies by running: 68 | 69 | ``` 70 | bower update 71 | ``` 72 | 73 | This will find the latest versions that match the version ranges specified in the `bower.json` file. 74 | 75 | 76 | ## Serving the Application Files 77 | 78 | While angular is client-side-only technology and it's possible to create angular webapps that 79 | don't require a backend server at all, we recommend serving the project files using a local 80 | webserver during development to avoid issues with security restrictions (sandbox) in browsers. The 81 | sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, 82 | etc to function properly when an html page is opened via `file://` scheme instead of `http://`. 83 | 84 | ### Running the App during Development 85 | 86 | The angular-seed project comes preconfigured with a local development webserver. It is a node.js 87 | tool called [http-server][http-server]. You can install http-server globally: 88 | 89 | ``` 90 | sudo npm install -g http-server 91 | ``` 92 | 93 | Then you can start your own development web server to serve static files from a folder by running: 94 | 95 | ``` 96 | cd app 97 | http-server -a localhost -p 8000 98 | ``` 99 | 100 | Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just 101 | configure your server to serve the files under the `app/` directory. 102 | 103 | 104 | ## Contact 105 | 106 | For more information on AngularJS please check out http://angularjs.org/ 107 | For more information on Angular Material, check out https://material.angularjs.org/ 108 | 109 | [git]: http://git-scm.com/ 110 | [bower]: http://bower.io 111 | [npm]: https://www.npmjs.org/ 112 | [node]: http://nodejs.org 113 | [http-server]: https://github.com/nodeapps/http-server 114 | -------------------------------------------------------------------------------- /app/assets/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Roboto', sans-serif; 3 | font-size: 14px; 4 | height: 100%; 5 | margin: 0px; 6 | padding: 0px; 7 | } 8 | 9 | /* Toolbar area */ 10 | 11 | .menu { 12 | background-color: transparent; 13 | border: none; 14 | height: 38px; 15 | margin: 16px; 16 | width: 36px; 17 | } 18 | 19 | md-toolbar h1 { 20 | margin: auto; 21 | } 22 | 23 | /* Sidenav area */ 24 | 25 | md-list .md-button { 26 | color: inherit; 27 | font-weight: 500; 28 | text-align: left; 29 | width: 100%; 30 | } 31 | 32 | md-list .md-button.selected { 33 | color: #03a9f4; 34 | } 35 | 36 | md-sidenav md-list { 37 | padding: 0px 0px 8px 0px; 38 | } 39 | 40 | /* Primary content area */ 41 | 42 | #content { 43 | overflow: hidden; 44 | } 45 | 46 | #content { 47 | padding-left: 40px; 48 | padding-right: 40px; 49 | padding-top: 5px; 50 | } 51 | 52 | #content .md-button.share { 53 | background-color: transparent; 54 | border: none; 55 | width: 48px; 56 | height: 48px; 57 | margin: 8px auto 16px 0; 58 | position: absolute; 59 | top: 10px; 60 | right: 25px; 61 | } 62 | 63 | #content md-icon.avatar { 64 | margin-top: 10px; 65 | } 66 | 67 | #content .md-button.share > md-icon { 68 | fill: black; 69 | width: 36px; 70 | height: 36px; 71 | } 72 | 73 | md-button.menuBtn > md-icon { 74 | fill: white; 75 | width: 24px; 76 | height: 24px; 77 | } 78 | 79 | #content .md-button.share:active > md-icon { 80 | background-color: #dadada; 81 | border-radius: 75%; 82 | padding: 4px; 83 | transition: all 100ms ease-out 30ms; 84 | } 85 | 86 | #content img { 87 | display: block; 88 | height: auto; 89 | max-width: 500px; 90 | } 91 | 92 | /* Utils */ 93 | 94 | .content-wrapper { 95 | position: relative; 96 | } 97 | 98 | /* Typography support coming in 0.8.0 */ 99 | 100 | md-toolbar h1 { 101 | font-size: 1.250em; 102 | font-weight: 400; 103 | } 104 | 105 | .avatar { 106 | position: relative; 107 | width: 128px; 108 | height: 128px; 109 | border: 1px solid #ddd; 110 | border-radius: 50%; 111 | display: inline-block; 112 | overflow: hidden; 113 | margin: 0px; 114 | vertical-align: middle; 115 | zoom: 0.70; 116 | transform: translateZ(0); 117 | -webkit-transform: scale(0.70); 118 | -moz-transform: scale(0.70); 119 | } 120 | 121 | md-bottom-sheet md-icon { 122 | margin-right: 20px; 123 | } 124 | 125 | span.name { 126 | font-weight: bold; 127 | font-size: 1.1em; 128 | padding-left: 5px; 129 | } 130 | -------------------------------------------------------------------------------- /app/assets/svg/dollar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/assets/svg/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular Material - Starter App 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |

MobMaiden

32 | 33 |
34 | 35 | 36 | 37 | 38 |

{{tab.name_provider()}}

39 | 40 | 41 | 42 | 43 | 44 |
45 | 46 |
47 | 48 | -------------------------------------------------------------------------------- /app/src/tabs/Tabs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by bhowmicp on 3/30/2015. 3 | */ 4 | (function () { 5 | 'use strict'; 6 | angular.module('TabsApp.aux', []); 7 | // Prepare the 'users' module for subsequent registration of controllers and delegates 8 | angular.module('TabsApp', ['ngMaterial', 'ngRoute', 'TabsApp.aux', 'TabsApp.login', 'TabsApp.financial']) 9 | .config(function ($mdThemingProvider, $mdIconProvider) { 10 | $mdThemingProvider.theme('default') 11 | .primaryPalette('green') 12 | .accentPalette('teal'); 13 | $mdIconProvider.icon('menu', './assets/svg/menu.svg'); 14 | 15 | }).run(['$rootScope', '$injector', function ($rootScope, $injector) { 16 | $injector.get("$http").defaults.transformRequest = function (data, headersGetter) { 17 | if ($rootScope.oauth) headersGetter()['Authorization'] = "Token " + $rootScope.oauth.token; 18 | if (data) { 19 | return angular.toJson(data); 20 | } 21 | }; 22 | }]); 23 | })(); 24 | -------------------------------------------------------------------------------- /app/src/tabs/TabsController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by bhowmicp on 3/31/2015. 3 | */ 4 | (function () { 5 | 'use strict'; 6 | 7 | angular.module('TabsApp') 8 | .filter('logged_in_status', function () { 9 | return function (tabs_list, status) { 10 | status = status || false; 11 | var hst = []; 12 | var keys = Object.keys(tabs_list); 13 | for (var i = 0; i < keys.length; i++) { 14 | console.log(tabs_list[keys[i]]); 15 | if (tabs_list[keys[i]].logged_in(status)) 16 | hst.push(tabs_list[keys[i]]); 17 | } 18 | return hst; 19 | } 20 | }) 21 | .controller('TabsController', ['$scope', '$route', '$routeParams', '$location', '$mdSidenav', 'tab_attributes', 22 | function ($scope, $route, $routeParams, $location, $mdSidenav, tab_attributes) { 23 | $scope.route = $route; 24 | $scope.routeParams = $routeParams; 25 | $scope.location = $location; 26 | $scope.toggleList = function () { 27 | $mdSidenav('left').toggle(); 28 | }; 29 | $scope.tab_list = tab_attributes.tabs(); 30 | $scope.logged_in_status2 = function () { 31 | return tab_attributes.login_status(); 32 | }; 33 | 34 | }]); 35 | })(); -------------------------------------------------------------------------------- /app/src/tabs/TabsService.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by bhowmicp on 3/31/2015. 3 | */ 4 | (function () { 5 | 'use strict'; 6 | angular.module('TabsApp.aux') 7 | .factory('tab_attributes', function () { 8 | var x = {}; 9 | var _login_status=[false]; 10 | 11 | return { 12 | tabs: function (key, val) { 13 | if (key != undefined) { 14 | x[key] = val; 15 | } 16 | return x; 17 | }, 18 | login_status: function (status) { 19 | if (status == undefined) { 20 | return _login_status; 21 | } else { 22 | _login_status[0] = status; 23 | return _login_status; 24 | } 25 | } 26 | }; 27 | }); 28 | })(); -------------------------------------------------------------------------------- /app/src/tabs/financial/financial.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 23 |

Save

24 | 25 | 26 |
27 | 28 |
29 |
-------------------------------------------------------------------------------- /app/src/tabs/financial/financial.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | var ctrlname = 'FinancialController'; 4 | var url_pattern = '/financial'; 5 | angular.module('TabsApp.financial', ['ngMaterial', 'ngRoute', 'TabsApp.aux']) 6 | .controller(ctrlname, ['$scope', '$routeParams', 7 | function ($scope, $routeParams) { 8 | $scope.name = ctrlname; 9 | $scope.params = $routeParams; 10 | $scope.bank_add_acct_data = {}; 11 | $scope.submit_bank_info = function (valid) { 12 | if (valid) { 13 | $http.post('/account/bank/', $scope.bank_add_acct_data) 14 | .success(function (data, status, headers, config) { 15 | // this callback will be called asynchronously 16 | // when the response is available 17 | }).error(function (data, status, headers, config) { 18 | // this callback will be called asynchronously 19 | // when the response is available 20 | }); 21 | } 22 | }; 23 | $scope.fetch_bank_account = function () { 24 | $http.get('/account/bank/1'). 25 | success(function (data, status, headers, config) { 26 | // this callback will be called asynchronously 27 | // when the response is available 28 | console.log(data); 29 | $scope.bank_add_acct_data = data; 30 | }). 31 | error(function (data, status, headers, config) { 32 | // called asynchronously if an error occurs 33 | // or server returns response with an error status. 34 | $scope.bank_add_acct_data = $scope.bank_add_acct_data || {}; 35 | });//TODO: Complete, just a placeholder 36 | }; 37 | $scope.submit_credit_card_info = function () { 38 | //TODO Submit the credit card information in a format of your choosing 39 | console.log("Submit credit card information"); 40 | }; 41 | $scope.card_types = [ 42 | {description: 'American Express', code: 'amex'}, 43 | {description: 'Visa', code: 'visa'}, 44 | {description: 'MasterCard', code: 'mastercard'} 45 | ] 46 | }]).config(['$routeProvider', function ($routeProvider) { 47 | $routeProvider.when(url_pattern, { 48 | templateUrl: './src/tabs/financial/financial.html', 49 | controller: ctrlname 50 | }); 51 | 52 | }]).run(['$location', 'tab_attributes', function ($location, tab_attributes) { 53 | tab_attributes.tabs(ctrlname, { 54 | name_provider: function () { 55 | return 'Bank Account Information'; 56 | }, 57 | url: function () { 58 | $location.path(url_pattern); 59 | return url_pattern; 60 | }, 61 | logged_in: function (status) { 62 | return status; 63 | } 64 | }); 65 | }]); 66 | })(); -------------------------------------------------------------------------------- /app/src/tabs/login/login.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 8 | 9 | 10 | 11 | 13 | 14 | 16 |

Login 

17 | 18 | 19 |
20 | 21 |
-------------------------------------------------------------------------------- /app/src/tabs/login/login.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Partho Bhowmick on 3/31/2015. 3 | */ 4 | (function () { 5 | 'use strict'; 6 | var ctrlname = 'LoginController'; 7 | var url_pattern = '/login'; 8 | angular.module('TabsApp.login', ['ngMaterial', 'ngRoute', 'TabsApp.aux']) 9 | .controller(ctrlname, ['$scope', '$routeParams', 10 | function ($scope, $routeParams) { 11 | $scope.name = ctrlname; 12 | $scope.params = $routeParams; 13 | $scope.logindata = {username: '', password: ''}; 14 | $scope.submit_auth = function (valid) { 15 | if (valid) { 16 | $http.post('/user/login', $scope.logindata).success(function (data, status, headers, config) { 17 | // this callback will be called asynchronously 18 | // when the response is available 19 | $rootScope.oauth = data; 20 | }).error(function (data, status, headers, config) { 21 | // this callback will be called asynchronously 22 | // when the response is available 23 | }) 24 | } 25 | } 26 | }]).config(function ($routeProvider) { 27 | $routeProvider.when(url_pattern, { 28 | templateUrl: './src/tabs/login/login.html', 29 | controller: ctrlname 30 | }).otherwise({ 31 | templateUrl: './src/tabs/login/login.html' 32 | }); 33 | }).run(['$location', 'tab_attributes', function ($location, tab_attributes) { 34 | tab_attributes.tabs(ctrlname, { 35 | name_provider: function () { 36 | return (tab_attributes.login_status()[0]) ? 'Sign out' : 'Sign in/Sign up'; 37 | }, 38 | url: function () { 39 | $location.path(url_pattern); 40 | return url_pattern; 41 | }, 42 | logged_in: function (status) { 43 | return true; 44 | } 45 | }); 46 | }]); 47 | })(); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-material-starter", 3 | "description": "A starter project for AngularJS Material", 4 | "version": "0.0.1", 5 | "homepage": "https://github.com/angular/material-start", 6 | "license": "MIT", 7 | "private": true, 8 | "dependencies": { 9 | "angular": "^1.3.x", 10 | "angular-animate": "v1.3.x", 11 | "angular-aria": "^1.3.x", 12 | "angular-material": "^0.8.0", 13 | "angular-route":"^1.3.0", 14 | "material-design-icons":"^1.0.1" 15 | }, 16 | "devDependencies": { 17 | "angular-material": "~0.8.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-start", 3 | "private": true, 4 | "version": "0.0.0", 5 | "description": "A starter project for AngularJS Material", 6 | "repository": "https://github.com/angular/material-start", 7 | "license": "MIT", 8 | "devDependencies": { 9 | "karma": "~0.10", 10 | "protractor": "^1.1.1", 11 | "http-server": "^0.6.1", 12 | "bower": "^1.3.1", 13 | "shelljs": "^0.2.6", 14 | "karma-junit-reporter": "^0.2.2" 15 | }, 16 | "scripts": { 17 | "postinstall": "bower update", 18 | "prestart": "npm update" 19 | } 20 | } 21 | --------------------------------------------------------------------------------