【发布时间】：2018-06-03 17:08:33
【问题描述】：
我正在 Angular 1.6 中创建一个简单的 Web 应用程序
我为 url "/" 创建了一个状态，但似乎 angular 无法访问文件，不知道为什么。
文件夹结构是这样的：
所以 html 像这样加载应用程序：
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>paykey</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="myApp" >
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<div ui-view></div>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/codigo.service.js"></script>
</body>
</html>
而有状态的app.js文件就是这个：
'use strict';
angular
.module('myApp', [
'ui.router',
'$stateProvider',
'$urlRouterProvider'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// .state('home')
.state('main', {
url: '/',
templateUrl: 'views/quote-comps.html',
controller: 'MainT',
controllerAs: 'main'
});
});
所以调试它似乎通过了 stateProvider 行，但 html 没有显示出来。我唯一看到的是 CSS 中的背景金发女郎，控制台中没有错误。
quote-comps.html 文件是这样的：
<div ng-controller="MainT" ng-init="init()" style="padding-top: 90px;
padding-left: 20px;">
<div class="bar bar-header disable-user-behavior" >
<div class="header">
<div class="row header-wrapper">
<div class="header-content col text" ng-class="currentPage.title!=undefined ? 'text':''">
<div ng-if="currentPage.title != undefined">
</div>
<img src="images/ICONOS/Logo_banorte_ICO/Logo_Banortexxxhdpi.png" class="bem_image">
<h5 style="text-align: center; color: white; margin-bottom: 0px;margin-top: 0px; font-size: 12px;">Bienvenido</h5>
</div>
</div>
<div class="header-bar" ng-if="currentPage.name.indexOf('login') < 0 && currentPage.name.indexOf('activaToken') < 0 && currentPage.name.indexOf('resynchronize-token') < 0">
<div class="clear"></div>
</div>
</div>
</div>
<div style=" margin-top: 52px;
background-color: #35282B;
height: 450px;
overflow: scroll;">
<h5 style="text-align: center; color: white; font-size: 16px"><!--{{operacion.nombreBeneficario}}-->55 1007 0744</h5>
<h5 style="text-align: center; color: white; ">Has recibido un pago Banorte Móvil por:</h5>
<h3 style="text-align: center; color: white; ">$ {{operacion.importeOperacion}} {{operacion.divisa}}</h3>
<p ng-show="finish" style="text-align: center; font-style: bold; color: white;" ><span>¿Qué deseas hacer?</span></p>
<img ng-show="finish2" class="amount-header ss2" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" >
<p ng-show="finish2" class="amount-header textBox4">¡El deposito fue exitoso!
</p>
<div ng-show="finish" class="comparison-box" ng-class="{'comparison-box-open' : arrowUp}">
<div class="comparison-header-container" ng-click="openMore('first')">
<span> <img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"> </img></span>
<span class="comparison-header comboBox">Depositarlo</span>
<img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp, 'rotate360' : !arrowUp}">
<!-- <img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"> -->
</div>
<div class="amounts-container">
<div>
<p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}">Ingresa:</p>
<input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE">
</div>
<span class="comboBox2"></span>
</div>
<div class="amounts-container">
<div>
<p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}">Banco:</p>
<input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE">
</div>
<span class="comboBox2"></span>
</div>
<div class="wizard-full">
<!--<a href="#/form1"><button class="btn btn-primary btnSeg seg"> Depositar </button></a> -->
</div>
<button class="btn cus2" type="submit" ng-click="cancel()">Depositar</button>
</div>
<div ng-show="finish" class="comparison-box seg" ng-class="{'comparison-box-open' : arrowUp2}" style="">
<div class="comparison-header-container" ng-click="openMore('second')">
<span> <img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"> </img></span>
<span class="comparison-header comboBox">Cobrarlo en un cajero</span>
<img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp2, 'rotate360' : !arrowUp2}" ng-click="restauraE()">
<!-- <img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"> -->
</div>
<div class="amounts-container">
<div>
<p ng-show="mostrarQuieres" class="amount-header textBox" ng-class="{'show' : arrowUp2 && container, 'hide' : !arrowUp2}">¿Quieres generar tu código de referencia para retirar el efectivo en cajero automático?
</p>
<span>
<img ng-show="mostrarAcude" class="amount-header ss1" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" >
</span>
<div ng-show="mostrarAcude" class="amount-header textbox2" ng-class="{'show' : arrowUp2 && container, 'hide' : !arrowUp2}">Acude a cualquier cajero Banorte, selecciona la opcion retiro de efectivo y captura o escanea este código para retirar tu efectivo
</div>
</div>
</div>
<div class="wizard-full">
<!--<button class="btn btn-primary btnSeg2 seg" ng-click="getCode()"> Generar referencia </button> -->
<button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()">Generar transferencia</button>
</div>
<div ng-show="mostrar">{{codigoBarras}}
<io-barcode code="123" type="CODE128B"></io-barcode>
</div>
</div>
<div ng-show="mostrar" class="wizard-full">
<button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()"> d </button>
</div>
</div>
<div class="footer">
"2017 Derechos reservados."</div>
</div>
依赖：
"dependencies": {
"@uirouter/angularjs": "^1.0.11",
"angular": "^1.6.6",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1"
},
【问题讨论】：
-
您是否在控制台上看到 404 错误？
-
你没有指定
ui-view指令来加载模板 -
不，它实际上加载了所有需要的js
-
ui-view 应该在 app.js 中？
-
ui-view 是一个指令，它作为属性附加到元素上，以放入 loaddd 模板。