각도 및 익스프레스 라우팅

각도 및 익스프레스 라우팅

앵글 익스프레스 씨도 많이 겪어봤고 어떻게 작동하는지 알아냈죠문제가 발생하고 있는 것은:1)입니다.템플릿 작성에 ejs-local을 사용하고 싶다.2 )서버측과 클라이언트측의 루팅을 올바르게 설정하는 방법.또한 다음과 같은 URL을 입력할 때/about, 에러를 생성하지 않습니다.cannot /get

angular app.timeout에는 다음이 포함됩니다.

// angular stuff

$routeprovider.when('/', {
 templateUrl: 'index',
 controller: IndexCtrl
});
$routeprovider.when('/about', {
 templateUrl: 'partials/about',
 controller: IndexCtrl
});

express app, express 내용:

app.get('/', routes.index);
app.get('/about', routes.about);

routes 폴더에 'index.delays'가 포함되어 있습니다.

exports.index = function(req, res){
  res.render('index',{name:"Hello"});
};

exports.about = function (req, res) {
  res.render('partials/about');
};

보기 폴더에 포함됨index.ejs:

<!--HTML head/navigation bar here-->
<div ng-view></div>

내부 뷰 폴더는partials폴더: (보기/부분/)

index.ejs:

 <h1>Index</h1>

개요:

<h1>About</h1>

이러한 경로를 익스프레스 서버에 추가합니다.

app.get('/partials/:filename', routes.partials);
app.use(routes.index);

그럼 인routes.js

exports.partials = function(req, res){
  var filename = req.params.filename;
  if(!filename) return;  // might want to change this
  res.render("partials/" + filename );
};

exports.index = function(req, res){
  res.render('index', {message:"Hello!!!"});
};

이렇게 하면 express는 다음에 요청을 할 때 렌더링된 템플릿을 반환합니다.partials/index그리고.partials/about.

요지는 다음과 같습니다.https://gist.github.com/4277025

그렇게 했어요.Jade를 사용하지만 Ejs도 비슷합니다.

app.module

// Routes
app.get('/', routes.index);
app.get('/partials/:name', routes.partials);

템플릿은 /views/partials에 저장됩니다.

app.set('views', __dirname + '/views');

클라이언트측에서 angular의 $routeProvider를 사용하여 파셜을 로드할 수 있게 되었습니다.

/*global define */

define([
   'angular',
   'controllers/aController',
   'controllers/bController'],
   function (angular, aController, bController) {
    'use strict';

    return angular.module('controllers', [], ['$controllerProvider', '$routeProvider',
        function ($controllerProvider, $routeProvider) {
            $controllerProvider.register('AController', ['$scope', aController]);
            $controllerProvider.register('BController', ['$scope', bController]);
            // routes
            $routeProvider.when('/A', {templateUrl: 'partials/A', controller: aController});
            $routeProvider.when('/B', {templateUrl: 'partials/B', controller: bController});
            $routeProvider.otherwise({redirectTo: '/A'});
        }]);
    }
);

옥과 앵글을 사용하는 데 어려움을 겪었는데, 이게 효과가 있었어요.

디렉토리 구조:

public
  |-js
  |-css
  |-views
    |-main
      -main.jade
    |-auth
      -login.jade
server
  |-includes
    -layout.jade
  |-views
    -index.jade
server.js

다음으로 server.js 의 라우팅 설정은 다음과 같습니다.

app.configure(function(){
    app.set('views', __dirname + '/server/views');
    app.set('view engine', 'jade');
})
// server side route for the partials files
app.get('/views/*', function(req, res){
    res.render('../../public/views/' + req.params);
})

// everything handled by this route
app.get('*', function(req, res){
    res.render('index');
})

다음으로 각도 경로는 다음과 같습니다.

$routeProvider.when('/', {
    templateUrl: '/views/main/main',    // gets main.jade from server
    controller: 'mainCtrl'
})

나의index.jade다음과 같습니다.

extends ../includes/layout

block main-content
    .navbar.navbar-inverse.navbar-fixed-top
        div(ng-include="'/views/account/navbar-login'")
    section.content
        div(ng-view)

이런 걸 시도해 볼 수도 있고

const path = require("path");

/* For serving static HTML files */
app.use(function(req, res, next) {
    res.sendFile(path.resolve(__dirname + '/dist/index.html'));
});

/* For ejs, jade/pug engines */
app.use(function(req, res, next) {
    res.render(path.join(__dirname, '/dist/index.pug'));
});

언급URL : https://stackoverflow.com/questions/13860899/angular-and-express-routing