使用angular.js路由空白頁
[英]Routing with angular.js Blank page
問題描述
我很想讓您解決這個小問題。 我正在關注有關angular js的教程，但是我對路由的工作方式有所了解。
您能幫我了解為什么主頁空白嗎？
謝謝你們的關注！
http://plnkr.co/edit/Bt7ThaM5lXmC80Td3lZ0?p=info
文件結構：index.html | 局部 | comments.html | | home.html的
index.html：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head >
<body ng-app="angularForm">
<div ng-view></div>
<script src="angular/angular.js"></script>
<script src="angular/angular-route.js"></script>
<script>
var app = angular.module('angularForm', ['ngRoute']);
//Mise en place du routing
app.config(function ($routeProvider) {
$routeProvider
.when("/", {templateUrl: "partials/home.html",})
.when("/comments", {templateUrl: "partials/comments.html"})
.otherwise({redirectTo: "/"});
});
//Mise en place du controlleur pour les comments
angular.module('angularForm', [])
.controller('CommentsController',
function CommentsController($scope) {
this.comments = [
{
"username": "Sandoval",
"email": "sandovalrodriguez@sequitur.com",
"content": "Eiusmod ad enim laboris ut culpa qui duis pariatur."
},
{
"username": "Tara",
"email": "tararodriguez@sequitur.com",
"content": "Dolore anim labore eu ut mollit sunt incididunt sint occaecat mollit adipisicing."
},
{
"username": "Emilia",
"email": "emiliarodriguez@sequitur.com",
"content": "In amet ipsum anim excepteur ut excepteur nulla exercitation laborum culpa."
},
{
"username": "Gina",
"email": "ginarodriguez@sequitur.com",
"content": "Enim duis cupidatat enim reprehenderit."
},
{
"username": "Graves",
"email": "gravesrodriguez@sequitur.com",
"content": "Laborum excepteur duis elit anim mollit duis labore voluptate dolore aliquip."
},
{
"username": "Gallegos",
"email": "gallegosrodriguez@sequitur.com",
"content": "Ullamco fugiat do exercitation reprehenderit magna pariatur aliqua dolor cillum eiusmod cillum id consequat."
}
];
});
</script>
</body>
</html>
comments.html：
<div ng-controller="CommentsController as comctrl">
<input type="text" ng-model="query.content">
<h1>Recherche : {{ query.content}}</h1>
<select ng-model="order">
<option value="username">Organise par Nom</option>
<option value="content">Organise par content</option>
</select>
<div ng-repeat="comment in comctrl.comments| filter: query | orderBy: order">
<p>
<strong>{{comment.username}}</strong><br>
{{comment.content}}
</p>
</div>
</div>
home.html的：
<h1>Article #1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales nulla at nunc molestie, sollicitudin ornare arcu porttitor. Maecenas vel ultricies dui, vel consectetur felis. Suspendisse sagittis fringilla placerat. Praesent turpis diam, maximus et fermentum quis, hendrerit et risus. Vivamus turpis eros, placerat eget facilisis sit amet, malesuada at ante. Donec ac egestas magna, in varius quam. Quisque imperdiet leo a dolor ullamcorper, sed sollicitudin dui malesuada. Pellentesque a leo eget lacus convallis rhoncus. Donec sit amet nisl vel turpis venenatis varius. Praesent varius dignissim molestie. Proin ante tortor, gravida dignissim odio vitae, lacinia mattis diam. Vestibulum quis tellus dolor.
</p>
<h2> x commentaires</h2>
<a href="#/comments">Voir les commentaires</a>
1 個解決方案
解決方案1
4 已采納 2015-02-19 15:24:32
嘿，我發現了你的錯誤。
var app = angular.module('angularForm', ['ngRoute']);
//Mise en place du routing
app.config(function ($routeProvider) {
$routeProvider
.when("/", {templateUrl: "home.html"})
.when("/comments", {templateUrl: "comments.html"})
.otherwise({redirectTo: "/"});
});
//Mise en place du controlleur pour les comments
angular.module('angularForm', [])
.controller('CommentsController',
function CommentsController($scope) {
this.comments = [
變
var app = angular.module('angularForm', ['ngRoute']);
//Mise en place du routing
app.config(function ($routeProvider) {
$routeProvider
.when("/", {templateUrl: "home.html"})
.when("/comments", {templateUrl: "comments.html"})
.otherwise({redirectTo: "/"});
});
//Mise en place du controlleur pour les comments
app.controller('CommentsController',
function CommentsController($scope) {
this.comments = [
因為您試圖聲明兩個模塊，所以第一個模塊不起作用。
Angular.js路由
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.