Question

我正在学习使用express框架在节点js中设置应用程序。我在如何在ng-view中传递html页面时遇到问题。我想知道我是否缺少任何关于如何将html传递到ng-view的链接或任何配置。

这是代码

应用程序/路由/ 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)
})

公共/控制器/ 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

我能够提供一个带有ng-view的index.html，但是我无法在该视图中放置login.html页面，这就是我想要的。请让我知道我在这里缺少什么，以便提供login.html。感谢

Answer 1

在你的public / routes / routes.js中包含ngRoute：

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

如何在ng-view中传递html页面

1 个答案: