javascript - Angular .config routing not working: white page after grunt serve -
when run grunt serve
, nothing blank page scroll bar shown. problem related setup of .config routing in app.js, i've struggled terribly long time trying figure out is.
index.html
<!doctype html> <html class="no-js" ng-app="bcapp"> <head> <meta charset="utf-8"> <title>quickmath</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="styles/main.css"> <!-- adds mathjax in asciimath form--> <script type="text/javascript" src="bower_components/mathjax/mathjax.js?config=am_htmlormml-full"></script> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers.js"></script> </head> <body> <!--[if lt ie 7]> <p class="browsehappy">you using <strong>outdated</strong> > browser. please <a href="http://browsehappy.com/">upgrade >browser</a> improve experience.</p> <![endif]--> <div ng-view class="view-frame"></div> </body> </html>
app.js
'use strict'; /* app module */ var myapp = angular.module('bcapp', [ 'nganimate', 'ngcookies', 'ngresource', 'ngroute', 'ngsanitize', 'ngtouch', 'controllers' ]); myapp.config(['$routeprovider', function ($routeprovider) { $routeprovider .when('/', {templateurl: 'views/home.html', controller: 'homectrl'}) .when('/theteam', {templateurl: 'views/theteam.html', controller: 'homectrl'}) .when('/blog', {templateurl: 'views/blog.html',controller: 'homectrl'}) .when('/contribute', {templateurl: 'views/contribute.html',controller: 'homectrl'}) .when('/algebra', {templateurl: 'views/algebra.html',controller: 'homectrl'}) .when('/geometry', {templateurl: 'views/geometry.html',controller: 'homectrl'}) .when('/precalculus', {templateurl: 'views/precalculus.html',controller: 'homectrl'}) .when('/bc', {templateurl: 'views/bc.html',controller: 'homectrl'}) .when('/graphtheory', {templateurl: 'views/graphtheory.html',controller: 'homectrl'}) .when('/linearalgebra', {templateurl: 'views/linearalgebra.html',controller: 'homectrl'}) .when('/mvc', {templateurl: 'views/mvc.html',controller: 'homectrl'}) .when('/numbertheory', {templateurl: 'views/numbertheory.html',controller: 'homectrl'}) .when('/discrete', {templateurl: 'views/discrete.html',controller: 'homectrl'}) .otherwise({ redirectto: '/'}); }]);
controllers.js
'use strict'; /* controllers */ var app = angular.module('bcapp', ['ngmaterial']); app.controller('homectrl', function ($scope) { $scope.awesomethings = [ 'html5 boilerplate', 'angularjs', 'karma' ]; }); app.controller('appctrl', function ($scope, $timeout, $mdsidenav, $mdutil, $log){ function buildtoggler(navid){ var debouncefn = $mdutil.debounce(function (){ $mdsidenav(navid) .toggle() .then(function (){ $log.debug('toggle ' + navid + ' done'); }); }, 300); return debouncefn; } $scope.toggleleft = buildtoggler('left'); }); app.controller('leftctrl', function ($scope, $timeout, $mdsidenav, $log){ $scope.close = function (){ $mdsidenav('left').close() .then(function () { $log.debug('close left done'); }); }; });
two issues:
- you adding
controllers
modulebcapp
not seeing module called controllers defined. - your code
var app = angular.module('bcapp', ['ngmaterial']);
create new module calledbcapp
again. means overriding existing 1 has routes configured.
change module name controllers
has controllers code.
'use strict'; /* controllers */ var app = angular.module('controllers', ['ngmaterial']); app.controller('homectrl', function ($scope) { $scope.awesomethings = [ 'html5 boilerplate', 'angularjs', 'karma' ]; }); app.controller('appctrl', function ($scope, $timeout, $mdsidenav, $mdutil, $log){ function buildtoggler(navid){ var debouncefn = $mdutil.debounce(function (){ $mdsidenav(navid) .toggle() .then(function (){ $log.debug('toggle ' + navid + ' done'); }); }, 300); return debouncefn; } $scope.toggleleft = buildtoggler('left'); }); app.controller('leftctrl', function ($scope, $timeout, $mdsidenav, $log){ $scope.close = function (){ $mdsidenav('left').close() .then(function () { $log.debug('close left done'); }); }; });
Comments
Post a Comment