AngularJS UI路由器在本地主机上不起作用答案

【问题标题】：AngularJS UI Router not working on localhostAngularJS UI路由器在本地主机上不起作用
【发布时间】：2018-04-27 06:16:16
【问题描述】：

为什么 UI-Router 在JSFiddle 上工作，而在我的本地主机上却没有工作？本地主机链接是http://127.0.0.1:54046/preview/app/index.html。我在这里错过了什么吗？控制台中没有 JS 错误。

目标是通过单击标题导航上的链接在 ui-view 标记内加载一个单独的 HTML 文件。

HTML

<script src="js/bxslider.js"></script>
<script src="js/testim-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<!--<script src="js/target-top.js"></script>-->
<script src="app-test.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/media.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</head>

<body ng-app="myApp">


<section class="section2">
    <div class="container-fluid">
        <div class="header-nav">
            <a ui-sref="main" ><img src="imgs/SCIS-logo2.png" alt="SCIS logo"></a>
            <div class="show-sidenav">
                <div id="mySidenav" class="sidenav">
                  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                  <a ui-sref="request" onclick="closeNav()">REQUEST AN INTERPRETER</a>
                  <a ui-sref="newinfo" onclick="closeNav()">HEARING/NEW INFO</a>
                  <a ui-sref="deaf" onclick="closeNav()">DEAF CONSUMERS</a>
                  <a ui-sref="recruitment" onclick="closeNav()">INTERPRETER RECRUITMENT</a>
                  <a ui-sref="about" onclick="closeNav()">ABOUT</a>
                </div>
                <span style="font-size:30px;cursor:pointer; float:right;" onclick="openNav()">&#9776;</span>
            </div>
            <div class="nav">
                <ul>
                    <li><a ui-sref="request">REQUEST AN INTERPRETER</a></li>
                    <li><a ui-sref="newinfo" class="arrow">HEARING/NEW INFO</a>
                        <span>
                            <a ui-sref="medical">MEDICAL INTERPRETING</a>
                            <a ui-sref="legal">LEGAL INTERPRETING</a>
                            <a ui-sref="business">BUSINESS INTERPRETING</a>
                            <a ui-sref="eductional">EDUCATIONAL INTERPRETING</a>
                            <a ui-sref="vri">VRI</a>
                        </span>
                    </li>
                    <li><a ui-sref="deaf">DEAF CONSUMERS</a></li>
                    <li><a ui-sref="recruitment">INTERPRETER RECRUITMENT</a></li>
                    <li><a ui-sref="about">ABOUT</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- views section -->
<div ui-view>

    Content goes here...

</div>

<!-- footer section -->
<div ng-include="'test-testminoials.html'"></div>

// JavaScript Document
var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("request", {
    url: "#",
    template: "<p>Request</p>",
    controller: "Ctrl1"
  }).state("newinfo", {
    url: "#",
    template: "<p>New Info</p>",
    controller: "Ctrl2"
    }).state("deaf", {
    url: "#",
    template: "<p>Deaf</p>",
    controller: "Ctrl3"
 }).state("recruitment", {
    url: "#",
    template: "<p>Recruitment</p>",
    controller: "Ctrl4"
     }).state("about", {
    url: "#",
    template: "<p>About</p>",
    controller: "Ctrl5"
     }).state("medical", {
    url: "#",
    template: "<p>Medical</p>",
    controller: "Ctrl6"
     }).state("legal", {
    url: "#",
    template: "<p>Legal</p>",
    controller: "Ctrl7"
     }).state("business", {
    url: "#",
    template: "<p>Business</p>",
    controller: "Ctrl8"
     }).state("educational", {
    url: "#",
    template: "<p>Educational</p>",
    controller: "Ctrl9"
     }).state("vri", {
    url: "#",
    template: "<p>VRI</p>",
    controller: "Ctrl10"
  });
});

var ctrls = angular.module("AppCtrls", []);

ctrls.controller( "Ctrl1", function($scope) {
console.log("Ctrl1 loaded.");
});

ctrls.controller( "Ctrl2", function($scope) {
console.log("Ctrl2 loaded.");
});

ctrls.controller( "Ctrl3", function($scope) {
console.log("Ctrl3 loaded.");
});

ctrls.controller( "Ctrl4", function($scope) {
console.log("Ctrl4 loaded.");
});

ctrls.controller( "Ctrl5", function($scope) {
console.log("Ctrl5 loaded.");
});

ctrls.controller( "Ctrl6", function($scope) {
console.log("Ctrl6 loaded.");
});

ctrls.controller( "Ctrl7", function($scope) {
console.log("Ctrl7 loaded.");
});

ctrls.controller( "Ctrl8", function($scope) {
console.log("Ctrl8 loaded.");
});

ctrls.controller( "Ctrl9", function($scope) {
console.log("Ctrl9 loaded.");
});

ctrls.controller( "Ctrl10", function($scope) {
console.log("Ctrl10 loaded.");
});

【问题讨论】：

为什么状态 URL 都是 #？这似乎不对。
暂时忽略#。我试图在不加载 html 文件并仅显示文本的情况下对其进行测试。它似乎在 JSFiddle 上工作，而不是在我的本地主机上
在 localhost 上运行时，控制台日志是否显示任何内容？初始页面加载是否正确？听起来你的文件可能存在某种路径问题。
是不是 angular-ui-router.min.js 和 angular-route.js 走错了路？它们位于js 目录中。
这可能没关系，但是你为什么在使用ui-router时引用angular-route.js？

标签： javascript html angularjs angular-ui-router

【解决方案1】：

这必须与您正在使用的 AngularJs (1.2.0)、ui-router (0.2.10) 的版本有关。也许在 JSFiddle 中您使用的是不同的版本。

你使用的是 ui-router 版本，没有$urlRouterProvider 对象而是$urlRouter（还有很多其他变化），check the docs。

尝试更新到最新版本，Angular (1.6.10) 和 ui-router (1.0.14)，然后一切正常。

【讨论】：

好的，在我更新版本后，我决定将它们上传到我的服务器，而不是让你看看发生了什么。它仍然无法正常工作。查看源代码：christianluneborg.com/clients/scis/index-test.html
您正在加载两个版本的 angular-ui-router（v0.2.18 和 v0.2.10）。此外，您正在注入 ui.router 中不存在的 $urlRouter，但我相信您在这里没有使用的 ngRoute。删除该提供程序引用并选择 ui.router 的 1 个版本，如 Luillyfe 建议的那样。我也会按照建议将您的 angular.min.js 版本升级到最新版本。