如何在ng-view中提供html頁面

我正在學習使用express框架在節點js中設置應用程序。我在如何在ng-view中提供html頁面時遇到問題。我想知道如果我錯過了任何鏈接或任何配置如何使該html被傳遞到ng視圖。如何在ng-view中提供html頁面

下面是代碼

應用程序/路由/ routes.js

'use strict'; 

var clientDir = path.join(__dirname, '../../public') 

module.exports = function(app){ 

    app.get('/', function (req, res) { 
     res.send('Hello World!') 
    }) 

    app.get('/login', function(req, res){ 
     res.sendFile(path.join(clientDir, 'index.html')) 
    }) 
}

公共/ index.html中

<!doctype html> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Login Test</title> 

<script src="/bower_components/angular/angular.js"></script> 
<script src="/routes/routes.js"></script> 

<div ng-app="MyApp"> 
    <div ng-view> 

    </div> 
</div>

公共/路線/ routes.js

var MyApp = angular.module('MyApp', ['ngResource']) 

MyApp.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', {controller: LoginCtrl, templateUrl: '../templates/login.html'}) 
    .otherwise({redirectTo: '/'}) 
    $locationProvider.html5Mode(true) 
})

public/controllers/LoginCtrl .js文件

'use strict' 
function LoginCtrl ($scope) { 

}

公共/模板/ login.html的

<div class="login-panel panel panel-default" style="margin-top: 40%;"> 
    <div class="panel-heading"> 
     <h3 class="panel-title" style="color: #666;">Please Sign In</h3> 
    </div> 
    <div class="panel-body"> 
     <br/> 
     For admins only, <br/><br/> 
     <div class="login-btn"> 
      <i class="fa fa-google-plus"></i> Login with Google 
     </div> 
    </div> 
</div>

MyApp的/ app.js

if (!process.env.NODE_ENV) process.env.NODE_ENV='development' 

var express = require('express') 
var app = express() 
    path = require('path') 
    colors = require('colors') 
    require("./app/routes/routes")(app) 

app.set('port', process.env.PORT || 3000) 

var server = app.listen(app.get('port'), function() { 

    var host = server.address().address 
    var port = server.address().port 

    console.log('Example app listening in %s on port %s', colors.red(process.env.NODE_ENV), app.get('port')) 

})

文件夾結構：

MyApp 
app 
    routes 
    routes.js 
bower_components 
node_modules 
public 
    index.html 
    routes 
    routes.js 
    controllers 
    templates 
app.js 
package.json

我能夠交付一個index.html，它有一個ng-view，但我不是能夠在該視圖中放置login.html頁面，這就是我所想要的。請讓我知道我在這裏丟失了什麼，以便提供login.html。由於

來源

2014-10-31 Deepak

在公開/路由/ routes.js包括ngRoute：

var MyApp = angular.module('MyApp', ['ngResource', 'ngRoute'])

來源

2014-10-31 21:52:30 smoothgrips

我試過，但沒有運氣。我懷疑，如果裝載這個是一個問題，因爲我看到它無法在index.html中獲取這個腳本..我是否以正確的方式給出routes.js的路徑？我試着用正確的方式獲取腳本，但它說GET失敗了。 – Deepak 2014-11-01 08:37:30

如何在ng-view中提供html頁面

回答

相關問題