AngularJS – 视图不会在我的浏览器中呈现？
我正在导航到我在angular度应用程序中设置的路线“/login”。 当我尝试导航到我创build的视图时，使用angular度路由，我只能看到我的页面上的导航栏，而在ng-view内没有任何东西。 在我的chrome控制台的networking选项卡中，它显示视图正在成功请求并发送到客户端，但它不是在视图源中为我呈现。 另外我想指出，我的路线为“/”正在纠正。 控制台中没有错误。
我正在使用NodeJS + ExpressJS作为我的networking服务器。 这是SPA。 另外我正在使用RequireJS进行模块加载。
server.js
var express = require('express'), app = express(), path = require('path'), apiRouter = require('./app/routes/api'), mongoose = require('mongoose'), compression = require('compression'); app.use(compression()); app.use(express.static('public')); app.use('/api', apiRouter); app.use('*', function(req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); mongoose.connect('mongodb://localhost/triviaattack'); var db = mongoose.connection; db.on('error', console.error.bind(console, 'connection error:')); db.once('open', function() { //Connected to DB successfully. }); app.listen(1337); 的index.html
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!-- Place favicon.ico in the root directory --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> --> <script data-main="js/main" src="js/vendor/require.js"></script> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <nav class="navbar navbar-inverse navbar-fixed-top" ng-controller="navCtrl"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><button class="btn btn-default navbar-btn" ng-click="login()">Login</button></li> <li><button class="btn btn-info navbar-btn" ng-click="register()">Register</button></li> </ul> </div><!--/.navbar-collapse --> </div> </nav> <div ng-view></div> </body> </html>
main.js
require.config({ paths: { 'angular': 'vendor/angular', 'domReady': 'vendor/domready', 'angularRoute': 'vendor/angular-route', 'bootstrapCss': 'vendor/bootstrap-css' }, shim: { 'angular': { exports: 'angular' }, 'angularRoute': { deps: ['angular'], exports: 'angularRouter' } }, deps: ['./bootstrap'] });
bootstrap.js
require([ 'angular', 'angularRoute', 'app', 'services/loginSvc', 'controllers/navCtrl', 'controllers/homeCtrl', 'controllers/loginCtrl', 'routes' ], function (angular, angularRoute, app) { 'use strict'; angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); }); });
app.js
define([ 'angular', 'angularRoute' ], function(angular, angularRoute) { 'use strict'; var app = angular.module('myApp', ['ngRoute']); return app; });
routes.js
define(['app'], function(app) { 'use strict'; app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'js/views/home.html', controller: 'homeCtrl' }) .when('/login', { templateUrl: 'js/views/login.html', controller: 'loginCtrl' }); }); });
我想你是直接在浏览器中input/loginpath。 如果您正在手动input路由到您的浏览器，那么当您键入http://myapp.com/myapp/ ，ng-route将跟随/路由。 但是，如果您inputhttp://myapp.com/myapp/login ，则不会遵循login路线。 这是因为ng-route期望在#之后的路由。
尝试键入http://myapp.com/myapp/#/login ，显然用您的应用程序的适当pathreplacemyapp部分。
另外，这可能有助于创build/home路由，然后使用$routeProvider的.otherwise()函数来创build它加载的默认路由。 这样，如果尝试点击不存在的路线，它将默认为/home路线，而不是显示空白模板。
以下是你将如何实现：
app.config(function($routeProvider) { $routeProvider .when('/home', { templateUrl: 'js/views/home.html', controller: 'homeCtrl' }) .when('/login', { templateUrl: 'js/views/login.html', controller: 'loginCtrl' }) .otherwise({ redirectTo: '/home' }); });
编辑：
在使用ng-view时，请始终使用浏览器的元素检查器。 浏览器中的“查看源代码”选项不会显示加载的模板代码，因为页面的实际源代码只包含<div ng-view></div> ，而不是模板代码。
我的观点实际上是渲染。 但是因为我使用的是固定的导航栏，所以它被显示在后面（所以它是隐形的）。我可以在我的ng-view div的顶部添加一个页边距，非常简单的修复。