Angular-ui-router无法加载视图

我已经与Angular合作过，但已经有一段时间了，所以我有点生疏。我似乎无法让Angular ui-router为我的任何状态加载html模板。这是一个非常简单的应用程序;它不需要任何ajax调用，只需通过ui-router获得html模板。我目前试图达到的状态是/ projects状态，但是当我输入/＃/ projects时，我看到的只是一个空白页面。以及/＃后面的路径变为＃！＃％2Fprojects;我不确定这是否正常。控制台中没有显示任何错误，并且我放入状态和控制器的所有日志似乎都已注销，表明它们正在正确加载。因此，我相信Angular没有找到templateUrl，但我不知道为什么不。我正在使用Angular 1.6。这里是所有相关的文件： server.jsAngular-ui-router无法加载视图

'use strict'; 
/* eslint-disable global-require */ 

var express=require('express'); 
var app=express(); 

app.use("/", express.static(__dirname)); 

var port=app.listen(process.env.PORT || 8080); 
app.listen(port, function(){ 
    console.log("Server working!"); 
}) 

app.get('*', function(request, response){ 
    console.log(request); 
    response.sendFile(__dirname+'/browser/index.html'); 
})

我index.html文件：

<html> 
<head> 
<title> My Portfolio</title> 
<script src="/node_modules/angular/angular.js" defer></script> 
<script src="/node_modules/angular-ui-router/release/angular-ui-router.js" defer></script> 
<script src="browser/js/app.js" defer></script> 
<script src="browser/js/projects/projects_controller.js" defer></script> 
<script src="browser/js/projects/projects_state.js" defer></script> 
</head> 
<body ng-app="app"> 
<div id="main"> 
<ui-view></ui-view> 
</div> 
</body> 
</html>

我app.js

'use strict'; 

var app = angular.module('app', ['ui.router']); 

app.run(function($rootScope) { 
    $rootScope.$on("$stateChangeError", console.log.bind(console)); 
});

我的项目状态：

'严格使用';

console.log("project state"); 
app.config(function($stateProvider){ 
    $stateProvider.state('projects', { 
     url:'/projects', 
     templateUrl: '/js/projects/projects.html', 
     controller: 'projects_ctrl' 
    }) 
}) 
console.log("state out!")

项目控制器：

'use strict'; 

console.log("controller"); 
app.controller('projects_ctrl', function($scope){ 
    console.log("hi!") 
})

而且projects.html页面（这是从来没有达到过...）

<div> 
<h1>Hi, this is the projects page!</h1> 
</div>

请帮帮忙！

来源

2017-01-13 Wallaceness

您可以从浏览器加载视图（即/js/projects/projects.html）吗？ –

@JB Nizet不，我无法加载视图。这是我的全部问题。 – Wallaceness

所以这是一个服务器问题。不是角度问题。如果服务器不允许访问视图，角度怎么显示呢？用NodeJS标记您的问题并发布您的服务器结构。我对NodeJS无能为力，但如果NodeJS没有标记为NodeJS，您将不会得到NodeJS开发人员的关注。 –

我解决了这个问题。问题是我没有在templateUrl中正确指定路径。正确的路径是browser/js/projects/projects.html，而不是js/projects/projects.html。奇怪，因为我可以发誓我曾尝试过，但我想这次它只是神奇的工作。我想我学到的教训是从服务器提供的静态路径进行角度导航，而不是从我们以前认为的加载的index.html导航。

来源

2017-01-14 16:53:12 Wallaceness

恢复到1.5.x版本，并使用＃在路线

来源

2017-01-13 18:55:26 pravs

这没有奏效。我试着回到1.5.9并使用＃，但它没有任何区别。 – Wallaceness

阅读凉亭安装日志。在bower.json中，您可以添加像这样的“分辨率”的分辨率：{ “angular”：“1.5.11” } – pravs

有激活的状态三种主要方式： 1）调用$state.go()。 2）点击包含ui-sref的链接，如<a ui-sref="stateName">State</a> 3）导航到与状态相关的特定URL 由于您的代码没有办法激活状态，所以您的代码无法访问到project.html 请在下面检查链接：

https://plnkr.co/edit/AVhuZJsO8ujySLZQG4TL?p=preview

来源

2017-01-13 19:00:34

我手动导航到/＃/ projects页面。感谢您的答案，但不幸的是，这并没有解决问题，因为即使我把ui-sref页面仍然无法进入项目页面。奇怪的是，在我点击它后添加了第二个“项目”链接，如果这有帮助的话？ – Wallaceness

Angular-ui-router无法加载视图

回答

相关问题