Routing with angular.js Blank page

Question

I did this plunk to ask you to help me with that little problem. I'm following a tuto about angular js but i'm stuck with the comprehension of how routes are working.

Can you, please help me to understand why the home page is blank ?

Thanks for your attention guys !

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>

the plunkr link is broken and please, show some code in your question — manzapanza, Feb 19 '15 at 15:19

score 4 · Accepted Answer · answered Feb 19 '15 at 15:24

Hey I've found your mistake.

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 = [

Becomes

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 = [

Because you tried to declare two modules the first one wasn't working.

Routing with angular.js Blank page

1 Answers1