AngularJS UI路由器无法在本地主机上运行

Question

Why is the UI-Router working on JSFiddle and it's not working on my localhost? 为什么UI-Router可以在JSFiddle上运行，而不能在我的本地主机上运行？ The localhost link is http://127.0.0.1:54046/preview/app/index.html . 本地主机链接是http://127.0.0.1:54046/preview/app/index.html 。 Am I missing something here? 我在这里想念什么吗？ There are no JS errors in the console. 控制台中没有JS错误。

The goal is to load a separate HTML file inside the ui-view tag by clicking the links on the header navigation. 目的是通过单击标题导航上的链接来在ui-view标记内加载单独的HTML文件。

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>

JS JS

// 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.");
});

Answer 1

This must be about the version of AngularJs (1.2.0), ui-router (0.2.10) you are using. 这必须与您使用的AngularJs（1.2.0），ui-router（0.2.10）的版本有关。 Maybe in the JSFiddle you are using a different versions. 也许在JSFiddle中，您正在使用其他版本。

You are using version ui-router, there is not $urlRouterProvider object but $urlRouter (and a lot of other changes), check the docs . 您正在使用版本ui-router，没有$urlRouterProvider对象，而是$urlRouter （以及许多其他更改），请检查docs 。

Try to update to the last versions, Angular (1.6.10) and ui-router (1.0.14) then everything would work ok. 尝试更新到最新版本，即Angular（1.6.10）和ui-router（1.0.14），然后一切正常。

AngularJS UI路由器无法在本地主机上运行

问题描述

1 个解决方案

解决方案1
0 2018-04-26 22:16:16

AngularJS UI路由器无法在本地主机上运行

问题描述

1 个解决方案

解决方案1 0 2018-04-26 22:16:16

解决方案1
0 2018-04-26 22:16:16