Question

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

'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));
});

我的项目状态：

＆＃39;使用严格的＆＃39;;

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>

请帮忙！

Answer 1

恢复到1.5.x并在路由中使用＃

Answer 2

激活州有三种主要方式： 1）致电$state.go()。 2）点击包含像<a ui-sref="stateName">State</a>这样的ui-sref的链接 3）导航到与州相关联的特定URL 由于您的代码无法激活状态，因此您的代码无法到达project.html 请在下面的链接中查看：

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

Answer 3

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

Angular-ui-router未加载视图

3 个答案: