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

Answer 1

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

Answer 2

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',

Answer 3

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.'];
        }
    });
})();

Answer 4

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

Answer 5

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: