CODEWITHSUNDEEP
javascripthtmlangularjs
Zain
Zain

Reputation: 81

Blank page being shown- Angular JS

The console shows no errors yet the page displays nothing. Here's my code.

The code basically contains an angular module and a controller. I've tried running the code without the inclusion of the angular.js script file, the page display is as expected as it outputs only the Html components. However, after the inclusion of the Angular JS components the page results in a clean slate.

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

<head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head
         content must come *after* these tags -->
    <title>Ristorante Con Fusion: Menu</title>
        <!-- Bootstrap -->
    <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">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="container">
        <div class="row row-content">
            <div class="col-xs-12">
            <ul>
            <li class="media" ng-repeat="dish in myctrl.dishes">
                    <div class="media-left media-middle">
                        <a href="#">
                        <img class="media-object img-thumbnail"
                         ng-src={{dish.image}} alt="Uthappizza">
                        </a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading">{{dish.name}}
                         <span class="label label-danger">{{dish.label}}</span>
                         <span class="badge">{{dish.price | currency}}</span></h2>
                          <p>{{dish.description}}</p>
                        <p>Comment: {{dish.comment}}</p>
                        <p>Type your comment:
                         <input type="text" ng-model="dish.comment"></p>
                    </div>
                </li>
                </ul>
            </div>
            </div>
        </div>

<script src="bower_components/angular/angular.min.js"></script>
<script>
        var app = angular.module('myApp',[]);
       app.controller('myctrl',function(){
                        var dishes=[
                         {
                           name:'Uthapizza',
                           image: 'images/uthapizza.png',
                           category: 'mains',
                           label:'Hot',
                           price:'4.99',
                           description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                           comment: ''
                        },
                        {
                           name:'Zucchipakoda',
                           image: 'images/zucchipakoda.png',
                           category: 'appetizer',
                           label:'',
                           price:'1.99',
                           description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
                           comment: ''
                        },
                        {
                           name:'Vadonut',
                           image: 'images/vadonut.png',
                           category: 'appetizer',
                           label:'New',
                           price:'1.99',
                           description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
                           comment: ''
                        },
                        {
                           name:'ElaiCheese Cake',
                           image: 'images/elaicheesecake.png',
                           category: 'dessert',
                           label:'',
                           price:'2.99',
                           description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
                           comment: ''
                        }
                        ];

            this.dishes = dishes;

        });

    </script>
</body>

</html>

Upvotes: 1

Views: 1118

Answers (4)

Abhishek Pandey
Abhishek Pandey

Reputation: 310

Firstly, you will need to assign a controller to your template using the ng-controller attribute. Also, you pass $scope as an argument to your controller so that anything defined on the $scope will be directly accessible as a $scope variable. 

app.controller('myctrl',function($scope){
    $scope.example = [];
});

Also,I would encourage you to use the module-array syntax while declaring dependencies.

app.controller('myctrl',['$scope', function($scope){
    $scope.example = [];
}]);

You can directly access the variable example now from a template where you have defined myctrl as the controller. I made the following changes to make your code work -

javascript

var app = angular.module('myApp',[]);
   app.controller('myctrl',function($scope){
       $scope.dishes=[];
});

html

<div class="container" ng-controller="myctrl">
    <li class="media" ng-repeat="dish in dishes">
    </li>
</div>

Hope it helped.

Upvotes: 1

aru007
aru007

Reputation: 380

Make following changes:

  1. Include ng-controller in your html page.

  2. Pass $scope in controller function as - app.controller('myctrl',function($scope){...}

  3. And assign dishes to $scope.dishes $scope.dishes = dishes;

This Works.

Upvotes: 1

Muhammad Subhan Naeem
Muhammad Subhan Naeem

Reputation: 11

You have put your javascript code in your html code which is technically fine. You also have created your controller in your javascript code which is good.

app.controller('myctrl',function(){......

However, you need to make a in your function which is solely dedicated to 'myctrl' controller.

So in your html code somewhere you have to include this angularjs directive in the following way

<div ng-controller="myctrl"> <h1> {{myvariable}} </h1> </div>

This line of code in your html will connect your controller to the html view. In this specific case the 

{{myvariable}}

is a variable that can be defined in your controller. For example, you can say in your controller 

$scope.myvariable="Hello World";

Then, when you run your whole code in the browser, you will see a h1 heading saying hello world.

So the bottom line is that you have to define a controller in your javascript file(which you already did). You also have to define a in your html that has the ng-controller="myctrl" directive.

Hope that solves your problem. ! Cheers :)

Upvotes: 1

Srijith
Srijith

Reputation: 1444

You need to add ng-controller on your div following the body like

<body>
 <div ng-controller="myctrl as myctrl">
  <REST OF YOUR HTML>
 </div>
</body>

Upvotes: 1

Related Questions