Question

我正在创建一个简单的Angular网站。对于路由，我使用Angular-ui-router。当我点击Home时，关于模板没有加载，而当我点击Contact时模板加载完美。有人可以在我犯错的地方帮助我。这里是plunker的链接

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

Answer 1

您正在使用联系家庭，并且总是使用相同的模块'homeModel'

angular.module('homeModel', [])

联系人是最后一个并覆盖它

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

因此，请为每个组件使用唯一模块

还要确保将其添加到脚本中，例如

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

还会删除反斜杠以获取about.html

templateUrl: '/about.html',

Answer 2

您应该使用 templateUrl 属性，如下面的代码。

您的联系页面正常工作，因为它被定义为组件

eq()

<强> Updated PLUNK

Answer 3

在script.js中，您使用的是'template'并写了'<home></home>'，但您有home.html。并且您想使用home.html作为模板。您应该使用templateUrl: 'home.html'代替template:'<home></home>'

同时更改template: <about></about>＆amp;的代码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>'
                });
        });
})();

请参阅快照，请在代码中更改红色框：

在script.js中使用此代码并再次运行，您的代码将成功运行：

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

更改代码后查看快照：

<强> @Arjun：你的代码也是正确的，在模板中添加一些html（比如，我已经完成了，我写了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'
                });
        });
})();

请参阅快照：

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

对于那些希望最终迁移到Angular 2的人来说，我遇到了类似的问题。作为迁移到Angular 2的中间步骤，我一直在尝试升级到Angular 1.6.1以及支持组件的ui-router版本。我复制了你的插件，为ui-router的版本1添加了外部库，然后按照“指南：路由到组件”https://ui-router.github.io/guide/ng1/route-to-component中所述进行了更改。这包括对组件的一些语法更改以及对组件的调用，而不是每个州的url和模板。请参阅此链接了解工作插件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.'];
        }
    });
})();

Angular.js UI-Router模板未加载

5 个答案: