AngularJS + Angular UI Router: templateUrl return Blank Page

Question

I'm just starting learning the angularjs and I want to use it for creating a ui template. I want to make a static HEADER and FOOTER and the only thing that will be dynamic is the CONTENT. My issue is that my It returns me a blank web page.

Thanks in advance guys.

index.html

<!DOCTYPE html>
<html data-ng-app="app">
<head>
 <meta charset="utf-8">
 <title>UI-Router</title>
 <link rel="stylesheet" href="">

 <!-- START LOAD VENDORS -->
 <script src="js/jquery/jquery.min.js"></script>

 <script src="js/angular/angular.min.js"></script>
 <script src="js/angular/angular-ui-router.min.js"></script>
 <!-- END LOAD VENDORS -->

 <!-- START LOAD SOURCE CODE -->
 <script src="js/app.js"></script>
 <!-- END LOAD SOURCE CODE -->

</head>
<body ui-view>
</body>

</html>

app.js

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

app.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {
 
  $urlRouterProvider.otherwise('/');

  $stateProvider
   .state('index',{
    abstract: true,
    url: '/index',
    templateUrl: 'view/app.html'
   })
 }])

view/header.html

<ul>
 <li>US</li>
 <li>626.205.3838</li>
 <li>cert@abkrescue.com</li>
 <li>Search</li>
</ul>
<ul>
 <li>Facebook</li>
 <li>Twitter</li>
 <li>Instagram</li>
 <li>LinkedIn</li>
</ul>

view/footer.html

<div>

 <span>name here</span>
 <span>partner</span>
 <span>subscribe</span>

 <ul>
  <h3>get to know us</h3>
  <li>blog</li>
  <li>stories</li>
  <li>staff</li>
 </ul>

 <ul>
  <h3>connect</h3>
  <li>contact</li>
  <li>help</li>
  <li>request</li>
 </ul>

 <ul>
  <h3>resource</h3>
  <li>download</li>
  <li>financial</li>
  <li>donors</li>
 </ul>

 <ul>
  <h3>get involved</h3>
  <li>volunteer</li>
  <li>partnership</li>
  <li>donate</li>
 </ul>

</div>

view/app.html

 <div data-ng-include=" 'view/header.html' "></div>
 <div data-ng-include=" 'view/footer.html' "></div>

score 1 · Answer 1 · answered Aug 03 '16 at 10:30

1

Try using the ui-view element directive. And make sure you are referring the template correctly

<body>
  <ui-view></ui-view>
</body>

answered Aug 03 '16 at 10:30

Mahesh Nathwani

121
1
9

1

And even make sure you remove the abstract:true from the router config. – Mahesh Nathwani Aug 04 '16 at 07:21

Karim · Accepted Answer · 2016-08-03T10:50:39.963

1

You cannot transition to an abstract state

i've created a working plnkr here: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview

$stateProvider
    .state('index',{
        url: '/',
        templateUrl: 'view/app.html'
    })

edited Aug 03 '16 at 10:50

answered Aug 03 '16 at 10:43

Karim

8,454
3
25
33

Thanks @Karim that's really work. I also try to put **views: {'': {templateUrl: 'view/app.html'}}** inside $stateProvider as -mohit said. and it also work. if its okay with you can tell me a further explanation to it ? – angelo Aug 04 '16 at 02:16
1

that's a different approach, you will have multiple views tied up to the same state and your app.html will contain only the logic of your application. more info here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views – Karim Aug 04 '16 at 07:54
Thank you @Karim that was a big help. – angelo Aug 04 '16 at 09:07

score 1 · Answer 3 · edited May 23 '17 at 11:51

The correct way to do this is to have separate ui-view directives for your header, content and the footer.

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>UI-Router</title>
    <link rel="stylesheet" href="">

    <!-- START LOAD VENDORS -->
    <script src="js/jquery/jquery.min.js"></script>

    <script src="js/angular/angular.min.js"></script>
    <script src="js/angular/angular-ui-router.min.js"></script>
    <!-- END LOAD VENDORS -->

    <!-- START LOAD SOURCE CODE -->
    <script src="js/app.js"></script>
    <!-- END LOAD SOURCE CODE -->

</head>
<body>
    <div ui-view="header">
    <div ui-view="content">
    <div ui-view="footer">
</body>
</html>

Define the template for each ui-view in the state config function and remove the abstract: true option. More on it here: what is the purpose of use abstract state?

app.js

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

app.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('index',{
                url: '/index',
                views: {
                    'header': {
                        templateUrl: 'view/header.html'
                    },
                    'content': {
                        templateUrl: 'view/app.html'
                    },
                    'footer': {
                        templateUrl: 'view/footer.html'
                    }
                }
            })
    }])

Also wrap your header.html code in a div tag.

header.html

<div>
    <ul>
        <li>US</li>
        <li>626.205.3838</li>
        <li>cert@abkrescue.com</li>
        <li>Search</li>
    </ul>
    <ul>
        <li>Facebook</li>
        <li>Twitter</li>
        <li>Instagram</li>
        <li>LinkedIn</li>
    </ul>
</div>

Now the header and footer will remain fixed and you can change your content based on states by adding other state like this:

.state('index.two',{
    url: '/index/two',
    views: {
        'content@': {
            templateUrl: 'view/two.html'
        }
    }
})

Thank you @mohit. It works and thanks also for your notes. – angelo Aug 04 '16 at 02:23 — angelo, Aug 04 '16 at 02:23

AngularJS + Angular UI Router: templateUrl return Blank Page

3 Answers3