Node JS如何知道如何处理路由

时间:2017-03-21 01:36:48

标签: javascript angularjs

我只想尝试加载部分页面。

HTML:

<!DOCTYPE html>

<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Friends</title>
    <script src='angular/angular.js'></script>
    <script src='angular-route/angular-route.js'></script>
    <script src='app.js'></script>
</head>
<body>
    <p>
        <a href='#!/list'>All Your Frinds</a> | <a href='#!/new'>Add a Friend</a>
    </p>
    <div ng-view=''>
    </div>
</body>
</html>

路由:

var app = angular.module('app', ['ngRoute']).config(function ($routeProvider)
     {
        $routeProvider
        .when('/list', 
        {
            templateUrl: 'partials/list.html'
        })
        .when('/new',
        {
            templateUrl: 'partials/create.html'
        })
        .when('/show/:id',
        {
            templateUrl: 'partials/show.html'
        })
        .when('/edit/:id',
        {
            templateUrl: 'partials/edit.html'
        })
        .otherwise(
        {
            redirectTo: '/'
        })

    });

虽然我有一个控制器,但它里面没有任何东西。我只是希望能够看到部分页面正在加载,而不是。我在部分页面中需要ng-controller指令才能加载?

3 个答案:

答案 0 :(得分:1)

在此示例中没有做任何事情

您的nodejs很可能是从文件夹中提供静态angularjs内容,如果您使用expressjs,那将是因为

app.use(express.static('public'))

然而,angularjs路由器正在处理你的部分

确保设置

$locationProvider.html5Mode(false);

通过查看开发者控制台以查看路由器指向的URL也可以提供帮助。

另外   没有&#34;&#34;

,它本身就没问题

答案 1 :(得分:0)

我从href中删除感叹号并尝试按预期工作后尝试了您的代码。还要在HTML中添加基本href。请尝试下面的代码

<!DOCTYPE html>

<html ng-pp='app' lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="/"></base>
    <meta charset="utf-8" />
    <title>Friends</title>
    <script src='angular/angular.js'></script>
    <script src='angular-route/angular-route.js'></script>
    <script src='app.js'></script>
</head>
<body>
    <p>
        <a href='#/list'>All Your Frinds</a> | <a href='#/new'>Add a Friend</a>
    </p>
    <div ng-view=''>
    </div>
</body>
</html>

JS

var app = angular.module('app', ['ngRoute']).config(function ($routeProvider,$locationProvider)
 {
    $locationProvider.html5Mode(false);
    $routeProvider
    .when('/list', 
    {
        templateUrl: 'partials/list.html'
    })
    .when('/new',
    {
        templateUrl: 'partials/create.html'
    })
    .when('/show/:id',
    {
        templateUrl: 'partials/show.html'
    })
    .when('/edit/:id',
    {
        templateUrl: 'partials/edit.html'
    })
    .otherwise(
    {
        redirectTo: '/'
    })

});

答案 2 :(得分:0)

该指令拼写错误......应该是:

ng-app