Saurabh Sharma Saurabh Sharma - 3 months ago 30
AngularJS Question

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

Answer

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

Comments