Search code examples
javascriptangularjsuiviewangularjs-scopeangular-ui-router

AngularJS ui.router won't load template

I'm still learning AngularJS and having trouble with UI Router. It just won't load the template.

Here's my code:

<body class="top-navigation" ng-app="mixcontainer">

      <div id="wrapper">
        Navbar here
      </div>
      <div class="row m-b-lg m-t-lg" ng-controller='MainCtrl'>
        <div ui-view></div>
      </div>
    </div>
  </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>



</body>

and my angular app.js:

var app = angular.module('mixcontainer',['ui.router'])

app.config(function($stateProvider){
    var test = {
        name: 'test',
        url: '/test',
        template: '<h3>Hello world</h3>',
        controller: 'MainCtrl'
    }

    $stateProvider.state(test);
})

app.controller('MainCtrl',['$scope','$state','$rootScope', function($scope,$state,$routeScope){

}])

I tried multiple times and no matter what angular won't yield ui-view whether it is a template or templateUrl. I also don't have any error on my browser's or server's console. I've been on it for a week and it is driving me nuts.

Solution

  • Try create your ui-routes by using $stateProvider('nameOfState', configurationObject) in the right way. Switch your routes by using $state e.g. inside your controller logic. Here is a working fiddle example which will help you.

    var app = angular.module('mixcontainer',['ui.router'])

app.config(function($stateProvider){

    $stateProvider.state("test", {
        url: "/test",
        template: "<h3>Hello world</h3>",
        controller: "MainCtrl"
    });
});