1

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';
}]);

1 Answer 1

3

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'
])
Sign up to request clarification or add additional context in comments.

1 Comment

OMGOMGOMG @sunil-d. ARGH! I feel like an idiot & yup, something small. Thank you!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.