CODEWITHSUNDEEP
angularjsangular-ui-router
Saurabh Sharma
Saurabh Sharma

Reputation: 325

Angularjs-ui-router not showing contents of template in browser

i am new Angular and trying to get a working example setup for Angular UI router

I researched some questions on stackoverflow but dont see the issue specifically. My Issue is that even though in browser debugging and network analysis i am seeing thatm my template html is called, still not seeing any content in browser.No errors in console

AngularJS ui-router - template not displaying

Using Angular 1.4.7 and corrosponding

Please find app.js below

(function(){
    angular.module('TestPrj',['ui.router']);

    angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/ReportB');
        $stateProvider
        .state('a', {
            url: '',
            abstract:true,
            controller:'mainController',
            controllerAs:'main',
            templateUrl: 'partials/home.html'
        })
        .state('a.b', {
            url: '/ReportB',
            controller:'B',
            controllerAs:'B',
            templateUrl: "partials/B.html"
        }); 
    });

    angular.module('TestPrj').run(function($rootScope,$state){
          $rootScope.$on("$stateChangeError", console.log.bind(console));
        });

})();

Controller b.js :

(function(){

angular.module('TestPrj').controller('B',B);

    function B($state){
        this.pageName = "Report a B";
    }

    B.$inject = ["$state","$stateParams","$scope"];

})();

Controller main.js
(function(){

angular.module('TestPrj').controller('mainController',mainController);

function mainController($state,$translate){

    }

mainController.$inject = ["$state","$translate"];

})();

index.html

<!DOCTYPE html>
<html>
<head ng-app="TestPrj" lang="en">
        <script type="text/javascript" src="js/lib/angular.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script>
        <script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script>
        <script type="text/javascript" src="js/lib/ui-mask.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

        <script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script>
        <script type="text/javascript" src="js/controllers/main.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>

partials/home.html

<div class="container">
    <div ui-view=""></div>
</div>

partials/B.html

<div>
    <div ui-view=""></div>  
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</div>

Also sharing screenshot of my project setup Angular Setup

Upvotes: 1

Views: 2085

Answers (2)

DavidNJ
DavidNJ

Reputation: 189

It isn't clear why you are using an abstract state. The abstract state can provide data and enter/exit processing to child states. But it isn't activated. It does need a template.

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

In your example the child state does done of these and the abstract state was apparently meant to be used.

It would seem you didn't intend to make it abstract.

Update: The abstract url can't be blank. This is an example of your code with the url set: 

.state('a', {
    url: '/a',
    abstract: true,
    controller: 'mainController',
    controllerAs: 'main',
    templateUrl: 'partials/home.html'
})

http://plnkr.co/edit/11o6qF?p=preview

To see the functionality use this link: http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b

Upvotes: 0

DanielC
DanielC

Reputation: 951

Based off the digging I did I think the issue is that you made the first state abstract. There is an issue posted on the github for ui-router you can read here. Also, consider the two plunkr examples

without abstract 

    $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })

with abstract

    $stateProvider
        .state('route1', {
            url: "/route1",
            abstract: true,
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })

The second plunkr is a copy of the first except that abstract: true was added to the state and now it doesn't work.

Also, make sure you either clear your browser cache frequently or disable caching while using ui-router. It's pretty bad about serving cached results.

Upvotes: 1

Related Questions