Javascript 角度UI路由器视图不显示任何内容_Javascript_Angularjs_Angular Ui Router

Javascript 角度UI路由器视图不显示任何内容

javascript angularjs

Javascript 角度UI路由器视图不显示任何内容,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我无法让UI路由器工作，这真的很烦人，因为我在另一个网站上构建了一个网站，我在那里构建了一个运行良好的网站。当前，ui视图未显示任何内容，ui sref链接不可单击或重定向。我也没有收到任何错误。我的代码如下。任何帮助都将不胜感激 JS:app.JS var app = angular .module("RssTransfers", ["ui.router"]) .config(MainRouter); function MainRouter($stateProvide

我无法让UI路由器工作，这真的很烦人，因为我在另一个网站上构建了一个网站，我在那里构建了一个运行良好的网站。当前，ui视图未显示任何内容，ui sref链接不可单击或重定向。我也没有收到任何错误。我的代码如下。任何帮助都将不胜感激

JS:app.JS

var app = angular
    .module("RssTransfers", ["ui.router"])
    .config(MainRouter);

    function MainRouter($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('transfers', {
                url: '/',
                templateUrl: 'transfers.html',
            })

            .state('about', {
                url: '/about',
                templateUrl: 'about.html'
            })

            .state('upload', {
                url: '/upload',
                templateUrl: 'upload.html'
            })
    };

HTML:index.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>RSS Transfers</title>

  <link rel="stylesheet" type="text/css" href="./css/materialize.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
  <script src="./js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
  <script src="./js/ng-file-upload.min.js"></script>
  <script src="./js/app.js"></script>
  <script src="./js/transferController.js"></script>
  <script src="./js/uploadController.js"></script>
  <script src="./js/materialize.js"></script>
</head>
<body ng-app="RssTransfers">

    <div ng-include="'navbar.html'"></div>

    <div class="wrapper" ui-view></div>


</body>
</html>

我已经用了你的代码，在这里创建了一个。注意-它还没有包含控制器

angular.module('RssTransfers',['ui.router']);

(function() {
  'use strict';

  angular
    .module('RssTransfers')
    .config(routing);

  routing.$inject = ['$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider'];

  function routing( $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider ){

    $urlMatcherFactoryProvider.strictMode(false);

    // For any unmatched url, redirect to /root
    $urlRouterProvider.otherwise("/transfers");

     $stateProvider
        .state('transfers', {
            url: '/transfers',
            templateUrl: 'transfers.html',
        })
        .state('about', {
            url: '/about',
            templateUrl: 'about.html'
        })
        .state('upload', {
            url: '/upload',
            templateUrl: 'upload.html'
        });
  }
})();

虽然我仍然不确定为什么你的不起作用…

解决了，尽管我不确定为什么。我删除了我的前端文件，从头开始，它工作得很好。我怀疑ui路由器和ng文件上传可能存在冲突问题，但我会在到达那里后解决该问题。

您是否尝试在MainRouter函数中添加断点？plunkr会有帮助…我在app.js中插入了断点，但它从未命中调试器。我想我的错误与实例化模块有关，但我就是看不到它。汉克斯，你比我快，因为我刚刚在Plunker。是的，我只是盯着它看，什么也没有。我建议删除ui路由器渲染时不需要的所有文件，因为它可能是其中的一个，或者只是意味着你的模板路径错误。谢谢，我会尝试一下。模板在同一个目录中，所以这不应该影响它，但我很乐意一点一点地删除，看看问题在哪里！

angular.module('RssTransfers')
    .controller('TransferController', TransfersController);

TransfersController.$inject = ['$http'];

function TransfersController($http){
    var self = this;
    self.all = [];
    self.addTransfer = addTransfer;
    self.newTransfer = {};
    self.getTransfer = getTransfer;

    getTransfers();
    function getTransfers(){
        $http
            .get('http://localhost:3000/transfers/')
            .then(function(response){
                self.all = response.data.transfers;
        });
    }

  function addCriminal() {
      $http
          .post('http://localhost:3000/transfer', self.newTransfer)
          .then(function(response){
              getTransfers();
    });
    self.newTransfer = {};
  }

}

angular.module('RssTransfers',['ui.router']);

(function() {
  'use strict';

  angular
    .module('RssTransfers')
    .config(routing);

  routing.$inject = ['$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider'];

  function routing( $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider ){

    $urlMatcherFactoryProvider.strictMode(false);

    // For any unmatched url, redirect to /root
    $urlRouterProvider.otherwise("/transfers");

     $stateProvider
        .state('transfers', {
            url: '/transfers',
            templateUrl: 'transfers.html',
        })
        .state('about', {
            url: '/about',
            templateUrl: 'about.html'
        })
        .state('upload', {
            url: '/upload',
            templateUrl: 'upload.html'
        });
  }
})();