CODEWITHSUNDEEP
javascriptangularjs
Suffii
Suffii

Reputation: 5784

Angular js Not Returning any thing on Controller

I have a simple Angular js script like below it is not returning any thing in page and also no error on console

the index.html is like 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <title>Angular Starting</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- 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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.4.4/angular.min.js"></script>
    <script src="app.js"></script>
  <div ng-controller="MovieStore as store">
      <h1 {{store.item.name}}></h1>
  </div>
  </body>
</html>

and the app.js is like 

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        this.item = movies;
     });

    var movies ={
        name :'Cinema Paradiso',
        price: 333,
    }
})();

can you please let me know what I am doing wrong?

Upvotes: 0

Views: 61

Answers (5)

Juned Lanja
Juned Lanja

Reputation: 1484

you need to assign value in scope so change your app.js to :

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        var movies = {
            name :'Cinema Paradiso',
            price: 333,
        }
        this.item = movies;
     });
})();

correct your html by changing 

<h1 {{store.item.name}}></h1>

to 

<h1> {{store.item.name}}></h1>

Upvotes: 1

Anil kumar
Anil kumar

Reputation: 928

In your app.js file write

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        var item=this; //please write this line and check it
        this.item = movies;
     });

var movies ={
    name :'Cinema Paradiso',
    price: 333,
}

})();

Upvotes: 0

Kushal
Kushal

Reputation: 1360

<div ng-controller="MovieStore as store">
   <h1> {{store.item.name}}></h1>
</div>

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function($scope){
        var movies ={
          name :'Cinema Paradiso',
          price: 333,
        };
        $scope.item = movies;
     });

})();

Upvotes: 1

atinder
atinder

Reputation: 2090

<div ng-controller="MovieStore">
   <h1> {{item.name}}></h1>
</div>

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        var movies ={
          name :'Cinema Paradiso',
          price: 333,
        };
        this.item = movies;
     });

})();

Upvotes: 0

SuperVeetz
SuperVeetz

Reputation: 2136

I believe that with AngularJS, you need to have something "serve the page up" if you are trying to launch the page locally on your machine.

I use a nifty code editor brackets.io that does this automatically for me.

and also the h1 tag should probably be <h1>{{store.item.name}}</h1>

Upvotes: 0

Related Questions