当我在各种浏览器或使用节点的本地主机上运行时，我无法在我的 Angular 应用程序的 ng-view 中呈现模板。控制台没有抛出任何错误。我已经阅读了我可以在网上找到的关于这个问题的所有内容，但没有一个能解决我的问题。我正在使用带有 El Capitan OS 的 macbook pro。我想知道在过去的一年里，作为一名初学者编码员，我是否通过 sudo 安装东西并在没有虚拟环境的情况下运行东西，对我的计算机做了一些有趣的事情。或者可能这里有一些愚蠢的明显错误，我在尝试我能想到的每一种排列时都忽略了。
这是我的 index.html 文件:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body ng-app="OIApp">
<nav id="mainnav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<h1>My App</h1>
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#/">Home</a>
</li>
<li>
<a href="#/about">About</a>
</li>
<li>
<a href="#/blog">Blog</a>
</li>
<li>
<a href="#/products">Products</a>
</li>
</ul>
</div>
</nav>
<div ng-controller="OIController1">
<div ng-view>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="OIController.js"></script>
<script src="OIApp.js"></script>
<script src="config.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
App.js 看起来像这样:
var app = angular.module("OIApp", ["ngRoute", "myControllers"])
Controller.js 是这样的:
angular.module('myControllers', [])
.controller('OIController1', function($scope, $route) {
$scope.names = [
{name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
{name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
{name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
{name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."}
];
});
配置文件:
angular.module('myRoutes', ['ngRoute', 'myControllers'])
.config('$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "/index.html",
controller : "OIController1",
})
.when("/about", {
templateUrl : "/about.html",
controller : "OIController1"
})
.otherwise({
redirectTo:'/'
});
});
这是我试图在 ngView 中呈现的 about.html:
<div class="col-sm-2" ng-repeat="x in names">
{{x.name}}
{{x.blurb}}
</div>
最佳答案
有几个问题:
//------------------------------------
//Let say, it's a app.router.js
//------------------------------------
angular.module('myRoutes', ['ngRoute', 'myControllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.html",
controller : "OIController1",
})
.when("/about", {
templateUrl : "about.html",
controller : "OIController1"
})
.otherwise({
redirectTo:'/'
});
}]);
//------------------------------------
//Let say, it's a app.module.js
//------------------------------------
angular.module("OIApp", ["ngRoute", "myRoutes", "myControllers"]);
//------------------------------------
//Let say, it's a app.controller.js
//------------------------------------
angular.module('myControllers', [])
.controller('OIController1', function($scope) {
$scope.names = [
{name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
{name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
{name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
{name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."}
];
});
我希望这能奏效
关于javascript - ngView 不呈现模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40103567/