gpt4 book ai didi

javascript - ngView 不呈现模板

转载 作者:行者123 更新时间:2023-11-29 14:39:51 25 4
gpt4 key购买 nike

当我在各种浏览器或使用节点的本地主机上运行时,我无法在我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com