角度ng-view不起作用
[英]Angular ng-view not working
問題描述
我一直在遵循以下教程（ http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application ）嘗試學習構建MEANapps。 在設置應用程序時，我的視圖未在ng-view div中顯示。
我的應用程序的結構如下：
- app
----- routes.js
- config
----- db.js
- node_modules <!-- created by npm install -->
- public <!-- all frontend and angular stuff -->
----- css
----- js
---------- controllers <!-- angular controllers -->
---------- services <!-- angular services -->
---------- app.js <!-- angular application -->
---------- appRoutes.js <!-- angular routes -->
----- img
----- libs <!-- created by bower install -->
----- views
---------- home.html
---------- nerd.html
---------- geek.html
----- index.html
- .bowerrc <!-- tells bower where to put files (public/libs) -->
- bower.json <!-- tells bower which files we need -->
- package.json <!-- tells npm which packages we need -->
- server.js <!-- set up our node application -->
我的index.html看起來像這樣：
<!DOCTYPE HTML>
<html ng-app="myApp" lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>Starter Node and Angular</title>
<!-- CSS -->
<link rel="stylesheet" href="css/sidebarindex.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700">
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,700,900' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/jquery/dist/jquery.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/controllers/GeekCtrl.js"></script>
<script src="js/services/GeekService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="NerdController">
<!-- ANGULAR DYNAMIC CONTENT -->
<div id="wrapper" ng-view>
</div>
</body>
</html>
我的app.js：
angular.module('myApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService', 'GeekCtrl', 'GeekService']);
我的appRoutes.js：
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// nerds page that will use the NerdController
.when('/nerds', {
templateUrl: 'views/nerd.html',
controller: 'NerdController'
})
//
.when('/geeks', {
templateUrl: 'views/geek.html',
controller: 'GeekController'
});
$locationProvider.html5Mode(true);
}]);
我的Server.js：
// server.js
// modules =================================================
var express = require('express');
var app = express();
var mongoose= require('mongoose');
// configuration ===========================================
// config files
var db = require('./config/db');
var port = process.env.PORT || 5000; // set our port
// mongoose.connect(db.url); // connect to our mongoDB database (uncomment after you enter in your own credentials in config/db.js)
app.configure(function() {
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(express.logger('dev')); // log every request to the console
app.use(express.bodyParser()); // have the ability to pull information from html in POST
app.use(express.methodOverride()); // have the ability to simulate DELETE and PUT
});
// routes ==================================================
require('./app/routes')(app); // configure our routes
// start app ===============================================
app.listen(port); // startup our app at http://localhost:8080
console.log('Magic happens on port ' + port); // shoutout to the user
exports = module.exports = app; // expose app
在Chrome中，運行我的應用程序時，控制台看起來像這樣： http : //imgur.com/GT1LiP8
有人知道為什么我的意見無法正確顯示嗎？ 我的設置有問題嗎？
3 個解決方案
解決方案1
0 2014-06-29 21:40:45
在這里看看。 這似乎適合您的問題。 顯然，在同一目錄中提供視圖和靜態內容是不好的。
解決方案2
0 2015-01-26 19:50:09
我之前曾有過這樣的結構在Chrome中拋出錯誤：
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {...}])
嘗試將以上行更改為：
angular.module(function($routeProvider, $locationProvider){...})
解決方案3
0 2015-02-01 06:23:05
從https://i.imgur.com/GT1LiP8.png中的錯誤看起來像我的app.js中有html（而不是javascript）
ng-view在Angular中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.