使用角度js进行路由

Question

我的服务器使用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以使用路由。 我试图调试它，但浏览器卡住而没有做任何事情。 我的应用程序是本地的，我尝试连接的网址是：

HTTP：//本地主机：8080 /站

并且所有文件都正确加载，控制台上没有任何错误。

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这是一个约定。 当海尔哈纳..什么情况是route转换在您的角度代码，以后有事发生#一个很纯粹的客户端或软重定向。 所以angular会触发一个AJAX请求，以从路由器中检索与templateUrl匹配的资源。 然后将其插入<div ng-view></div>从而重定向。 注意ng-view 。

以下是提出的解决方案

链接应该是http：// localhost：8080 / #station，因为角度匹配处理#之后的路由。 您提供的链接等其他路由将传递给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 个解决方案

解决方案1
3 已采纳 2016-01-03 14:46:20

Angular 101

以下是提出的解决方案

使用角度js进行路由

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-01-03 14:46:20

Angular 101

以下是提出的解决方案

解决方案1
3 已采纳 2016-01-03 14:46:20