Angular.js UI-Router templates are not loading

Question

I'm making a simple Angular Website. For Routing I'm using Angular-ui-router. When I click on Home, About the templates are not loading whereas when I click on Contact the template loads perfectly. Can someone please help me where I made a mistake.Here is the link for plunker

> https://plnkr.co/edit/8LlDl08JVbQKiD5eWEah?p=preview

edit comment please check it ->remove backslash in your about component — devadrion
– devadrion, Commented Jan 20, 2017 at 6:19

devadrion · Accepted Answer · 2017-01-20 06:14:06Z

1

you are using for contact home and about always same module 'homeModel'

angular.module('homeModel', [])

the contact ist the last one and overwrites it

  <script src="home.component.js"></script>
    <script src="about.component.js"></script>
    <script src="contact.component.js"></script>

so use unique module for every component

also make sure you add it in your script for example

 angular.module('myVin', ['ui.router', 'homeModel', 'contactModel', 'aboutModel'])

also remove backslash to get about.html

templateUrl: '/about.html',

answered Jan 20, 2017 at 6:14

devadrion

2162 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arjun Over a year ago

For Each page do I need to make a new model every time? So, If I had more than 20 pages for each page I need to make a separate model and use?

devadrion Over a year ago

You need for every page a controller which holds your message and you can put all your controllers in your module 'myVin' check this blog:scotch.io/tutorials/angular-routing-using-ui-router

Aravind · Accepted Answer · 2017-01-20 06:20:12Z

You should be using templateUrl property as below code.

Your contact page was working because it is defined as a component

// Code goes here

(function() {
    'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'home.html'
                })
                .state('about', {
                    url: '/about',
                    templateUrl: 'about.html'
                })
                .state('contact', {
                    url: '/contact',
                    template: '<contact></contact>'
                });
        });
})();

Updated PLUNK

Shubham Verma · Accepted Answer · 2017-01-20 06:51:20Z

0

In the script.js , you are using 'template' and wrote '<home></home>', but you have home.html. and you want to use home.html as a template. You should use templateUrl: 'home.html' instead template:'<home></home>'

Also change your code for template: <about></about> & template: <contact></contact>

(function() {
    'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    template: '<home></home>'
                })
                .state('about', {
                    url: '/about',
                    template: '<about></about>'
                })
                .state('contact', {
                    url: '/contact',
                    template: '<contact></contact>'
                });
        });
})();

see in the snapshot, please do change in red box in your code :

use this code in script.js and run again your code will run successfully:

(function() {
    'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'home.html'
                })
                .state('about', {
                    url: '/about',
                    templateUrl: 'about.html'
                })
                .state('contact', {
                    url: '/contact',
                    templateUrl: 'contact.html'
                });
        });
})();

See the snapshot after changing the code:

@Arjun: Your code is also correct, add some html in your template ( Like, i have done, i wrote template: '<h1>Shubham Verma</h1>' )

(function() { 'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    template: '<h1>Shubham Verma</h1>'
                })
                .state('about', {
                    url: '/about',
                    templateUrl: 'about.html'
                })
                .state('contact', {
                    url: '/contact',
                    templateUrl: 'contact.html'
                });
        });
})();

Please see the snapshot:

edited Jan 20, 2017 at 6:51

answered Jan 20, 2017 at 6:32

Shubham Verma

10.2k8 gold badges70 silver badges87 bronze badges

5 Comments

Arjun Over a year ago

In component, I'm providing as templateUrl and in the config, I gave as a template. So why It does n't work?

Shubham Verma Over a year ago

Its aslo working. I have change the code as your- .state('home', { url: '/', template: '<h1>Shubham Verma</h1>' } Its displaying: Shubham Verma

Shubham Verma Over a year ago

Please see my last updae on the same. Your code is correct. add some more html like <h1>Arjun</h1> template.

Shubham Verma Over a year ago

did you got your answer ?

Arjun Over a year ago

Yes I got the answer @Shubham Verma

sonu singhal · Accepted Answer · 2017-01-20 09:13:49Z

You are overwriting your module. 

angular.module('moduleName',[]) 

is use to define a module for using that module further you should use like below

angular.module('moduleName')

Replace your files like given below

replace content of about.component.js with given below code

(function() {
    'use strict';

    angular.module('homeModel')
        .component('about', {
            templateUrl: 'about.html',
            controller: function () {
                var ctrl = this;

                ctrl.mesgs = ['Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.',
                'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus', 
                'Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.'];
            }
        });
})();



And replace code of component.contact.js with given below code


(function() {
    'use strict';

    angular.module('homeModel')
        .component('contact', {
            templateUrl: 'contact.html',
            controller: function () {
                var ctrl = this;

                ctrl.msgs = ['Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.',
                'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus', 
                'Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.'];
            }
        });
})();

It will work fine

j-terranova · Accepted Answer · 2017-01-22 15:35:41Z

For those looking to eventually migrate to Angular 2, I had a similar problem. As an intermediated step in migrating to Angular 2 I have been trying to upgrade to Angular 1.6.1 along with the version of the ui-router that supports components. I copied your plunk, added the external library for version 1 of the ui-router and then made the changes as described in the "Guide: Route to Component", https://ui-router.github.io/guide/ng1/route-to-component . This included some syntax changes to your components and a call to the component rather than the url and template for each state. See this link for the working plunk, https://plnkr.co/edit/QsiFehbRkr7AYAYV4yiM?p=preview

script.js
(function() {
'use strict';

angular.module('myVin', ['ui.router', 'homeModel', 'aboutModel', 'contactModel' ])
    .config(function($stateProvider,  $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('home', {
                component: 'home.component',
            })
            .state('about', {
                component: 'about.component',
            })
            .state('contact', {
                component: 'contact.component',
            });
    });
})();

about.component.js
   (function() {
    'use strict';

angular.module('homeModel', [])
    .component('about', {
        templateUrl: '/about.html',
        controller: function () {
            var ctrl = this;

            ctrl.mesgs = ['Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.',
            'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus', 
            'Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.'];
        }
    });
})();

Collectives™ on Stack Overflow

Angular.js UI-Router templates are not loading

5 Answers 5

2 Comments

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related