Saurabh Sharma Saurabh Sharma - 1 year ago 93
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


angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
.state('a', {
url: '',
templateUrl: 'partials/home.html'
.state('a.b', {
url: '/ReportB',
templateUrl: "partials/B.html"

$rootScope.$on("$stateChangeError", console.log.bind(console));


Controller b.js :



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

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


Controller main.js


function mainController($state,$translate){


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



<!DOCTYPE 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>
<div ui-view=""></div>


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


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

Also sharing screenshot of my project setup
Angular Setup

Answer Source

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.

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'

To see the functionality use this link: