2017-03-28 17 views
1

私はJade AngularJSとExpressJSを組み合わせようとしています。私は、グランツと一緒にサーバーを走らせるためのexpressのapp.jsを持っていました。そのapp.jsから私はhome.jadeをレンダリングし、私をホームページに誘導します。ホームページの中で、私はangularJSを持っていました。 AngularJSディレクトリに別のapp.jsを作成しました。どのようにルートを組み合わせるのですか? routinためエクスプレスルートとアングルルートを組み合わせる方法

App.js(エクスプレス)

var config = require('./config/config'); 
var express = require('express'); 
var bodyParser = require('body-parser'); 
var cors = require('cors'); 
var http = require('http'); 

var app = express(); 

app.use(cors()); 
app.use(bodyParser.urlencoded({extended:true})); 
app.use(bodyParser.json()); 

var oneDay = 86400000; 
app.use(express.static(config.root + '/public', { maxAge: oneDay })); 

app.set('views', config.root + '/app/views'); 
app.set('view engine', 'jade'); 

app.get('/', function(req, res){ 
    res.render('home'); 
}); 
app.listen(config.port); 

App.js(AngularJS)

var myApp = angular.module("app", []); 

myApp.config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true).hashPrefix('!'); 

    $routeProvider 
     .when('/haha', { 
      title: '', 
      templateUrl: '{DIR_TO_JADE_FILE}', 
      controller: 'HomeController' 
    })  
}); 

myApp.controller("AppController", function AppController($scope, $http, $location, $window, $rootScope) { 
    alert("Initialize..."); 
    $scope.message = "HELLO"; 
}); 

HTML

doctype html 
html(lang='en') 
head 
    meta(charset='UTF-8') 
    meta(name='viewport', content='width=device-width, minimum-scale=1.0, maximum-scale=1.0') 
    link(rel='stylesheet', href='css/vendor/simple-line-icons.css') 
    link(rel='stylesheet', href='css/vendor/tooltipster.css') 
    link(rel='stylesheet', href='css/vendor/owl.carousel.css') 
    link(rel='stylesheet', href='css/style.css') 
    //- favicon 
    link(rel='icon', href='favicon.ico') 
    title Random | Home 
body(ng-controller="AppController") 
    block content 
    include content 
    include angularJS 

答えて

3

親指ルールフロントエンドとバックエンド上のG:

バックエンドルーティング:/更新データをフェッチするために定義 ルート。

フロントエンドルーティング: ユーザーに表示されるページごとに定義されたルート。

だから我々は2つのページ、ホームページやプロフィールページ

ので、フロントエンドのルートがあります2つのページ

「/ホーム」搭載のホーム・ページ 「/プロファイル」搭載プロファイルを持って言うことができます

今のページのそれぞれに、あなたがルートを作るいるHTMLページ内の一部のデータを表示する必要があります:

「/ getHomeP ageData」いくつかのニュースフィードを返すために、ルート(言うことができます) 『/ getProfilePageData』ルート一部のユーザー関連情報

を返すためには、今、各ページに、サーバーのルート呼び出しの成功の上に、あなたはにHTMLでそれらのデータを渡す必要がありますそれをユーザーに示します。

賛成票を使ってコンパイル済みのページ(データが埋め込まれたページ)を送信するような例外/規則があります。

関連する問題