ng-view not working in Angular

Question

I am working on a single page application using angular and bootstrap. But ng-view is not attaching to the index.html

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Ristorante Con Fusion</title>    

    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <link href="styles/bootstrap-social.css" rel="stylesheet">
    <link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->

       </head>

<body>

    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8">
                    <h1>Ristorante con Fusion</h1>
                    <p style="padding:40px;"></p>
                    <p>We take inspiration from the World's best cuisines, and create
                     a unique fusion experience. Our lipsmacking creations will 
                     tickle your culinary senses!</p>
                </div>
                                </div>
        </div>
    </header>

    <ng-view></ng-view>
    <footer class="row-footer">

        </div>
    </footer>

<!-- build:js scripts/main.js -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/angular-route/angular-route.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/services.js"></script>
<!-- endbuild -->

</body>

</html>

Here's my app.js

'use strict';

angular.module('confusionApp', ['ngRoute']){

    .config(function($routeProvider){
        $routeProvider

        .when('/contactUs',{
            templateUrl:'contactUs.html'
            controller :'ContactController'
        })

        .when('/menu',{
             templateUrl:'menu.html'
            controller :'MenuController'
        })

       .when('/menu/:id',{
         templateUrl:'dishdetail.html'
        controller :'DishDetailController'
        })

        .otherwise('/contactUs');

    })

};

Here's my controller.js

 .controller('DishDetailController', ['$scope','menuFactory','$routeParams', function($scope,menuFactory,$routeParams) {

             $scope.dish= menuFactory.getDish(parseInt($routeParams.id,10));

        }])

        .controller('DishCommentController', ['$scope', function($scope) {

            //Step 1: Create a JavaScript object to hold the comment from the form

            $scope.isSelected=function(checkStar){
                console.log(checkStar==5);
                return checkStar==5;
            };

            $scope.stars=stars;

            $scope.comment={name:"",rating:"5",textComments:"",date:""};

        }])

Here's my service.js

'use strict';

angular.module('confusionApp')
    .service('menuFactory',function(){

           var dishes=[
                         {
                          _id=0,


                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables, living in conFusion!",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },

                                                                          ]
                        },
                        {
                             _id=1,
                                                                                    comments: [
                                                                 {
                                   rating:4,
                                   comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                                   author:"Paul McVites",
                                   date:"2014-09-05T17:57:28.556094Z"
                               },
                                                                                            {
                                   rating:2,
                                   comment:"It's your birthday, we're gonna party!",
                                   author:"25 Cent",
                                   date:"2011-12-02T17:57:28.556094Z"
                               }                                                          ]
                        }];
  this.getDishes = function(){
                                        return dishes;
                                    };
                    this.getDish = function (index) {
                                        return dishes[index];
                };

    }
);

;

And in my index.html I gave to attach my code to the same

That is one big wall of code! I would reduce that to a mcve. And if you haven't found the issue by then, you're much more likely to attract a good answer here (and your question will be more useful for future visitors) I'm not going to dig my way trough ll that code, that's for sure... — Pevara
– Pevara, Commented Jun 16, 2016 at 20:06
first step before coming to SO and even googling : open your browser's debug console. That will help you and if you can't resolve it, giving us the message will help us too. — Walfrat
– Walfrat, Commented Jun 16, 2016 at 21:41

JMatthews · Accepted Answer · 2016-06-16 20:15:09Z

2

Possible cause is that you don't have a comma between the templateUrl and controller in your config. i.e. templateUrl:'contactUs.html', controller :'ContactController'

answered Jun 16, 2016 at 20:15

JMatthews

662 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JMatthews Over a year ago

Are you getting any console errors? Also, are you using local files as the template sources without localhost? If so, you may be having a cross origin request issue. You also have a few other general code errors in the dishes object in your service. Here's a plunk i had success with, although I used template: instead of templateUrl for testing and modified layout: plnkr.co/edit/ScoLQwAWr3tEv6gWmRip?p=preview

LowCool Over a year ago

got my problem thanks @JMatthews. I was not using server and ya code I have given as error due to I edited that to make compact.

Suicide Bunny Over a year ago

what server? I had the same problem, could you provide more details about the server? Thanks.

Collectives™ on Stack Overflow

ng-view not working in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related