繁体   English   中英

ui-router-ui视图和链接不起作用

[英]ui-router - ui view and link not working

我正在尝试ui路由器的角度。 我将以下代码行添加到我的app.js中的应用程序模块中:

angular
 .module("ngClassifieds", ['ngMaterial', 'ui.router'])
 .config(function($mdThemingProvider, $stateProvider){

    $mdThemingProvider.theme('default')
        .primaryPalette('teal')
        .accentPalette('orange');

    $stateProvider
        .state('stateone', {
            url:'/stateone',
            template: '<h1>State one</h1>'
        })
        .state('statetwo', {
            url: '/statetwo',
            template: '<h1>State two</h1>'
        });

});

在我的html上,我只是放置一个空的ui视图以测试我是否正在获取这两个标头,但没有运气:

<ui-view></ui-view>

通过输入以下内容在我的localhost链接上进行测试:

localhost:8080/#/stateone
localhost:8080/#/statetwo

但是由于某些原因,它不会在任何链接中加载/显示任何标题,而只是显示没有标题的页面。

我已经将angular-ui-router.js包含在我的index.html中

如果有人能指出我做错了,那太好了。

如果有人想知道:这是我的脚本的顺序:

  <script src="node_modules/angular/angular.js"></script>
  <script src="node_modules/angular-animate/angular-animate.js"></script>
 <script src="node_modules/angular-aria/angular-aria.js"></script>
 <script src="node_modules/angular-material/angular-material.js"></script>
 <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>

 <script src="scripts/app.js"></script>

 <script src="components/classifieds.ctr.js"></script>
 <script src="components/classifieds.fac.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

由于您没有收到任何错误,因此很难理解出了什么问题,但是您可以看看我的plunkr并找出来。 我删除了棱角材料。

https://plnkr.co/edit/WGjzY6flSx5Ces1moSPk?p=preview

    <script>
    angular
 .module("ngClassifieds", ['ui.router'])
 .config(function( $stateProvider){

    $stateProvider
        .state('stateone', {
            url:'/stateone',
            template: '<h1>State one</h1>'
        })
        .state('statetwo', {
            url: '/statetwo',
            template: '<h1>State two</h1>'
        });

});
    </script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <a href="#/stateone">Link1</a>
     <a href="#/statetwo">Link2</a>
     <ui-view></ui-view>
  </body>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM