使用 Angular JS 和 ExpressJS 进行路由

routing with angular js and expressjs

本文关键字：路由 ExpressJS Angular JS 使用      更新时间：2023-09-26

我正在尝试用express和angularjs启动一个项目。我正在遵循本指南。在第一次运行 localhost：3000 时，我成功地将我的 index.jade 文件加载到视图目录中。索引.翡翠

extends layout
block content
    div
        ng-view
    include footerjs

footerjs.jade

script(src="/javascripts/angular.min.js")
script(src="/javascripts/angular-route.js")
script(src="/javascripts/angular-resource.js")
script(src="/javascripts/app.js")
script(src="/javascripts/task.js")

views 目录有一个名为 partial 的文件夹。 在这个文件夹中，我添加了两个模板。"任务.翡翠"和"着陆.翡翠"。

我的应用.js

var mainApp = angular.module('mainApp', ['ngRoute', 'taskApp', "ngResource", 'ui.router' ]);
mainApp.config(['$routeProvider', '$locationProvider',function(routeProvider, locationProvider) {
    locationProvider.html5Mode(true);
    routeProvider
        .when('/', {
            templateUrl: 'partials/landing',
            controller: 'taskController'
        }).
        when('/task', {
            templateUrl: 'partials/task',
            controller: 'taskController'
        }).
        otherwise({redirectTo: '/'});
}]);

我做了一条快速路线：

router.get('/partials/:urlName', function(req, res) {
    res.render('partials/'+req.params.urlName);
});

我无法路由任何部分。我一开始就被困在我的布局上，并且在尝试路由/task时出现错误 404。任何帮助将不胜感激。

您应该在 templateUrl 中包含文件扩展名：

routeProvider
        .when('/', {
            templateUrl: 'partials/landing.jade',
            controller: 'taskController'
        }).
        when('/task', {
            templateUrl: 'partials/task.jade',
            controller: 'taskController'
        }).
        otherwise({redirectTo: '/'});
相关文章：