CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
cmeza
cmeza

Reputation: 369

AngularJS UI-Router not getting to default state

For the life of me, I cannot get anything to load in my index.html's ui-view. I'm using AngularJS/Ui-Router in another project & it's working. This is literally everything in my project at the moment.

It worked when I had put ng-controller='ResumeCtrl' on the <span>.

I'm not getting any errors in the console, but I do see my App Loaded [ null ] console.log.

I've looked at at least 10 different ui-router tutorials & I've REALLY simplified this and am not getting any where. I've spent the last 12hrs looking at this and I'm probably missing something REALLY small, but at this point, I'm not seeing it. :(

Here's my JSFiddle: https://jsfiddle.net/L5csekpq/2/

index.html:

<body ng-app="wmApp">
    <h1>WM TEST</h1>

    <div><a href="#/resume">Resume</a></div>

    [<span ui-view></span>]

    <script type="application/javascript" src="/lib/lib.js"></script>
    <script type="application/javascript" src="/wm.js"></script>
</body>

lib.js is the grunt concat/minified of the bower loaded angular.js (1.5.5)/angular-ui-route.js (0.2.18).

This is the grunt concat of all my JS files, linked above as wm.js:

angular.module('wmApp', [
    'ui.router',
    'wmApp.wmConstants',
    'wmApp.ResumeController'
])

.run(['$rootScope', '$location', '$state', function (
    $rootScope,
    $location,
    $state
) {
    console.log ('App Loaded [', $location.state(), ']');
    $rootScope.$on("$stateChangeError", console.log.bind(console));
}])
;
angular.module('wmApp.wmStates', [])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('home', {
        url: '/home',
        template: '<h3>STATE SUCCESSFUL</h3>'
      })
      .state('resume', {
        url: '/resume',
        template: '<h3>{{ data }}</h3>',
        controller: 'ResumeCtrl'
      })
  ;

  $urlRouterProvider.otherwise('/home');
}])
.run(['$state', function($state) {
  console.log('Current State: ', $state.current);
}])
;


angular.module('wmApp.wmConstants', [])

.constant('wmConstants', {
  sample: {
    api: {
      url: 'http://api.sample.com',
      key: 'xxxxxx' 
    }
  }
});

angular.module('wmApp.ResumeController', [])

.controller('ResumeCtrl', ['$scope', 'wmConstants', function($scope, wmConstants) {
  console.log('ResumeCtrl', wmConstants.sample.api.url);

  $scope.data = 'omg data';
}]);

Upvotes: 1

Views: 92

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

Your problem is that you have forgotten to declare the module wmApp.wmStates as being required by your main application module.

This:

angular.module('wmApp', [
    'ui.router',
    'wmApp.wmConstants',
    'wmApp.ResumeController'
])

Should be this:

angular.module('wmApp', [
    'ui.router',
    'wmApp.wmStates',
    'wmApp.wmConstants',
    'wmApp.ResumeController'
])

Upvotes: 3

Related Questions