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

Answer 1

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

ng-view not working in Angular

Question

1 answers

solution1
2 2016-06-16 20:15:09

ng-view not working in Angular

Question

1 answers

solution1 2 2016-06-16 20:15:09

solution1
2 2016-06-16 20:15:09