Почему UI-Router работает на JSFiddle , и он не работает на моем локальном хосте? Ссылка на локальный хост http://127.0.0.1:54046/preview/app/index.html. Я что-то здесь упускаю? В консоли нет ошибок JS.
Цель состоит в том, чтобы загрузить отдельный файл HTML внутри тега ui-view, щелкнув ссылки в заголовке навигации.
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()">×</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()">☰</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.");
});