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 module bcapp not seeing module called controllers defined.
  • your code var app = angular.module('bcapp', ['ngmaterial']); create new module called bcapp 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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -