Question

我这样做就是请你帮我解决这个小问题。我跟随关于角度js的tuto，但我仍然坚持理解路线的工作方式。

请帮助我理解为什么主页是空白的？

感谢您的关注！

http://plnkr.co/edit/Bt7ThaM5lXmC80Td3lZ0?p=info

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>

Answer 1

嘿，我发现了你的错误。

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进行路由空白页面

1 个答案: