Angular.js UI-路由器模板不加载(Angular.js UI-Router templa

2019-09-28 05:34发布

站内文章 / 前端开发
66 0 0

我做一个简单的角度网站。 对于路由我采用了棱角分明的UI路由器。 当我点击主页，关于模板不加载，而当我联系单击模板负荷完美。 是否有人可以帮助我，我做了一个mistake.Here是链接plunker 

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

Answer 1:

您正在使用的联络家和大约总是相同的模块“homeModel” 

angular.module('homeModel', [])

IST的最后一个接触并将其覆盖

  <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属性如下代码。

您的联系页面进行工作，因为它被定义为一个组件 

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

更新普拉克



Answer 3:

在的script.js，您使用的'template' ，并写了'<home></home>' ，但你必须home.html的。 并且要使用home.html的作为模板。 你应该用templateUrl: 'home.html' ，而不是template:'<home></home>'

同时改变你的代码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>'
                });
        });
})();

看到快照，请不要改变你的代码红框：

在的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>' ）

（函数（）{ '使用严格'; 

    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:

对于那些希望最终迁移到角2，我有一个类似的问题。 作为迁移到角2的中介一步，我一直在尝试升级到1.6.1角度与支持组件的UI路由器的版本一起。 我复制你的普拉克，增加了外部库的UI路由器的版本1，然后作出了“指南：路由到组件”中所描述的变化， https://ui-router.github.io/guide/ng1/路由到部件 。 这包括一些语法更改您的组件和部件，而不是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 templates are not loading
标签： angularjs angular-ui-router
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~