diff --git a/bower.json b/bower.json index bd37f11..d87751c 100644 --- a/bower.json +++ b/bower.json @@ -22,9 +22,9 @@ ], "dependencies": { "angular": "^1.5.7", - "angular-route": "^1.5.7", "angular-animate": "^1.5.7", - "angular-material": "^1.0.9" + "angular-material": "^1.0.9", + "angular-ui-router": "^0.3.1" }, "devDependencies": { "angular-mocks": "^1.5.7" diff --git a/src/app/404.html b/src/app/404.html new file mode 100644 index 0000000..d2c01b1 --- /dev/null +++ b/src/app/404.html @@ -0,0 +1,2 @@ +<h1>Page Not Found</h1> +<p>Sorry, but the page you were trying to view does not exist.</p> diff --git a/src/app/app.js b/src/app/app.js index 682be2a..955fa88 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -13,7 +13,7 @@ angular .module('app', [ - 'ngRoute', + 'ui.router', 'ngAnimate', 'ngMaterial' ]) @@ -22,8 +22,11 @@ // safe dependency injection // this prevents minification issues - config.$inject = ['$routeProvider', '$locationProvider']; - // run.$inject = []; + config.$inject = [ + '$stateProvider', + '$urlRouterProvider', + '$locationProvider' + ]; /** * App routing @@ -31,17 +34,30 @@ * You can leave it here in the config section or take it out * into separate file * + * @param {Object} $stateProvider $stateProvider Angular service + * @param {Object} $urlRouterProvider $urlRouterProvider Angular service + * @param {Object} $locationProvider $locationProvider Angular service */ - function config($routeProvider, $locationProvider) { + function config($stateProvider, $urlRouterProvider, $locationProvider) { + $urlRouterProvider.otherwise('/404'); + // routes - $routeProvider - .when('/', { + $stateProvider + .state('app', { + abstract: true, + url: '', + templateUrl: 'app/main/main.html', + controller: 'MainController' + }) + .state('app.home', { + url: '/', templateUrl: 'app/home/home.html', controller: 'HomeController', controllerAs: 'homeCtrl' }) - .otherwise({ - redirectTo: '/404' + .state('app.404', { + url: '/404', + templateUrl: 'app/404.html' }); // use the HTML5 History API @@ -52,6 +68,6 @@ * Run once the App is ready */ function run() { - // console.log('App ready!'); + console.log('App ready!'); } })(); diff --git a/src/app/home/home.controller.js b/src/app/home/home.controller.js index 77df89a..0d3de8a 100644 --- a/src/app/home/home.controller.js +++ b/src/app/home/home.controller.js @@ -31,6 +31,8 @@ */ HomeController.prototype._init = function() { this.pageReady = true; + + console.log('Home controller ready!'); }; HomeController.prototype.next = function(isValid) { diff --git a/src/app/home/home.html b/src/app/home/home.html index cffd477..82f77e2 100644 --- a/src/app/home/home.html +++ b/src/app/home/home.html @@ -96,31 +96,15 @@ <h1 class="md-display-2 product-name">{{homeCtrl.productName}}</h1> </input-stars> <h2 ng-show="homeCtrl.user.title"> - {{homeCtrl.user.title}} + {{homeCtrl.user.title}} {{homeCtrl.user.name}} </h2> - - <p> - {{homeCtrl.user.review}} - </p> - - <md-input-container class="md-block" - flex-gt-sm - ng-hide="!homeCtrl.socialsSelected.length"> - <h3 class="md-title">Share on:</h3> - <div ng-repeat="item in homeCtrl.socialsSelected"> - <md-button class="md-raised md-primary" - ng-click="homeCtrl.share(item)"> - Share on {{item}} - </md-button> - </div> - </md-input-container> </md-card-content> <md-card-actions layout="row" layout-align="end center"> <md-button ng-click="homeCtrl.publish()" tabindex="5" ng-disabled="!form.$valid"> - Publish + Done </md-button> </md-card-actions> </md-card> diff --git a/src/app/main/main.controller.js b/src/app/main/main.controller.js new file mode 100644 index 0000000..b4541a9 --- /dev/null +++ b/src/app/main/main.controller.js @@ -0,0 +1,5 @@ +angular + .module('app') + .controller('MainController', function() { + console.log('Main controller ready!'); + }); diff --git a/src/app/main/main.html b/src/app/main/main.html new file mode 100644 index 0000000..2eb10e8 --- /dev/null +++ b/src/app/main/main.html @@ -0,0 +1,6 @@ +<page-header></page-header> + +<!-- Main view for templates --> +<div ui-view class="page"></div> + +<page-footer></page-footer> diff --git a/src/index.html b/src/index.html index b3bd732..63234d0 100644 --- a/src/index.html +++ b/src/index.html @@ -73,21 +73,16 @@ <p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience.</p> <![endif]--> - <page-header></page-header> - - <!-- Main view for templates --> - <div ng-view class="page"></div> - - <page-footer></page-footer> + <div ui-view></div> <!-- build:main(./.tmp) js/main.min.js --> <!-- bower:js --> <script src="../bower_components/angular/angular.js"></script> - <script src="../bower_components/angular-route/angular-route.js"></script> <script src="../bower_components/angular-animate/angular-animate.js"></script> <script src="../bower_components/angular-aria/angular-aria.js"></script> <script src="../bower_components/angular-messages/angular-messages.js"></script> <script src="../bower_components/angular-material/angular-material.js"></script> + <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script> <!-- endbower --> <script src="app/app.js"></script> @@ -95,6 +90,7 @@ <script src="app/page-header/page-header.directive.js"></script> <script src="app/page-footer/page-footer.directive.js"></script> + <script src="app/main/main.controller.js"></script> <script src="app/home/home.controller.js"></script> <!-- build:templates -->