Angular 101

Question

我的服务器使用angular进行路由。我的服务器向浏览器发送一个HTML文件，其中包含带路由的js文件（使用角度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以便使用路由。我试图调试它，但浏览器卡住而没有做任何事情。我的应用程序是本地的，我尝试连接的网址是：

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>

Answer 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进行路由

1 个答案:

Angular 101

以下是建议的解决方案