使用角度 js 进行路由
Posted
技术标签:
【中文标题】使用角度 js 进行路由【英文标题】：Routing with angular js 【发布时间】：2016-04-07 06:22:48 【问题描述】：我的服务器使用 Angular 进行路由。我的服务器向浏览器发送一个 html 文件，其中包含带有路由的 js 文件（使用 Angular js）。
我的服务器代码（发送到浏览器 check.html 包含路由文件 main.js）：
var express = require("express");
var app = express(); // express.createServer();
app.use(express.static(__dirname + '/public'));
app.get("/*", function(request, response)
response.sendFile(__dirname + '/public/check.html');
);
app.listen(8080);
check.html 代码：
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>
在浏览器获取 check.html 文件后，他不会将其重定向到 main.js 以使用路由。我试图调试它，但浏览器卡住了，什么也不做。我的应用是本地的，我试图连接的 url 是：
http://localhost:8080/stations
所有文件都正确加载，控制台上没有任何错误。
main.js 代码：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider)
$routeProvider
.when('/',
controller: 'HomeController',
templateUrl: 'menu.html'
)
.when('/stations',
controller: 'StationsController',
templateUrl: 'check2.html'
)
.when('/',
controller: 'HomeController',
templateUrl: 'menu.html'
)
.otherwise(redirectTo: '/');
);
myApp.controller('StationsController', function($scope)
$scope.check = name:"ELAD!!";
);
check2.html 代码：
<html>
<head>
</head>
<body>
<div>
<p>check.name</p>
</div>
</body>
</html>
【问题讨论】：
控制台告诉你什么？并检查您的 .js 文件是否包含真正的 html 内容，而不是 check.html 的内容 @GalSosin 当刚接触 Angular 时，混合服务器端和客户端是一个常见的误解 【参考方案1】：好的，让我们重新开始 angular..
角度 101
您可能知道角度对于 单页应用程序 是必不可少的，所以在您的情况下，您提供的第一页是 check.html，但您应该将其命名为 index.html，这是一个约定。 khair .. 当route 转换发生在您的角度代码中时会发生什么，这是# 之后的东西，它纯粹是客户端或软重定向。所以 Angular 会触发 AJAX 请求以从路由器中检索与您的 templateUrl 匹配的资源。然后将其插入<div ng-view></div> 中，从而进行重定向。注意ng-view。
下面是建议的解决方案
链接应该是http://localhost:8080/#stations，因为角度匹配处理#之后的路线。您提供的链接等其他路线将交给server。
你的check.html 应该是这样的。
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
并且您的check2.html 应该在您的公共目录中并且具有类似的代码
<div>
<p>check.name</p>
</div>
【讨论】：
以上是关于使用角度 js 进行路由的主要内容，如果未能解决你的问题，请参考以下文章