AngularJS UI路由器無法在本地主機上運行

Question

為什么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>

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

這必須與您使用的AngularJs（1.2.0），ui-router（0.2.10）的版本有關。 也許在JSFiddle中，您正在使用其他版本。

您正在使用版本ui-router，沒有$urlRouterProvider對象，而是$urlRouter （以及許多其他更改），請檢查docs 。

嘗試更新到最新版本，即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