【问题标题】：Routing with angular js使用角度 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 时，混合服务器端和客户端是一个常见的误解

标签： javascript jquery html angularjs node.js

【解决方案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>

【讨论】：