我很想让您解决这个小问题。我正在关注有关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": "[email protected]",
"content": "Eiusmod ad enim laboris ut culpa qui duis pariatur."
},
{
"username": "Tara",
"email": "[email protected]",
"content": "Dolore anim labore eu ut mollit sunt incididunt sint occaecat mollit adipisicing."
},
{
"username": "Emilia",
"email": "[email protected]",
"content": "In amet ipsum anim excepteur ut excepteur nulla exercitation laborum culpa."
},
{
"username": "Gina",
"email": "[email protected]",
"content": "Enim duis cupidatat enim reprehenderit."
},
{
"username": "Graves",
"email": "[email protected]",
"content": "Laborum excepteur duis elit anim mollit duis labore voluptate dolore aliquip."
},
{
"username": "Gallegos",
"email": "[email protected]",
"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>
嘿,我发现了你的错误。
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 = [
因为您试图声明两个模块,所以第一个模块不起作用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句