如何一起处理Express JS和Angular JS路由?

时间:2017-02-27 09:39:37

标签: angularjs node.js express routes ngroute

我正在使用Express,Angularjs开发Web应用程序。我有一个主页(即index.html),我想在快递上服务。服务器的代码用xpressServer.js编写。

// file tree
->controller
---formController.js
->js
---app.js
->node_modules
->views
---form.html
---home.html
-index.html
-package.json
-xpressServer.js

以上是我的应用程序的文件结构。

// xpressServer.js
var express = require('express'); 
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, '/js')));
app.use(express.static(path.join(__dirname, '/controller')));
app.use(express.static(path.join(__dirname, '/views')));

app.get('/', function(req,res) {
    res.sendFile(path.join(__dirname + '/public/assets/view/index.html'));
});

app.listen(8081, function() {
    console.log('listenin on port 8081');
});

而且,我的index.html

// index.html
<!DOCTYPE html>
<html ng-app="formModule">
    <head>
        <base href="/" />  
        <title>dfgadfggth</title>
        <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>       
    </head>
    <body>
       <div ng-view></div>
       <script type="text/javascript" src="/js/app.js"></script>       
    </body>
</html>

我到底想做什么?

我想使用Express路由提供index.html,然后使用angularjs进行路由。<div ng-view></div>。我想根据路线获取视图,然后将其放入ng-viewindex.html

处理角度路由的app.js的代码是:

// app.js
'use strict';

var app = angular.module("formModule",['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider,   $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/home', {
            templateUrl: '/views/home.html'
        })
        .when('/form', {
            templateUrl: '/views/form.html',
            controller: '/controller/formController.js'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

我一直在寻找解决方案,但找不到适合我的解决方案。请帮我解决这个问题。

提前致谢!!

0 个答案:

没有答案