0

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?

Suffii
  • 5,694
  • 15
  • 55
  • 92

5 Answers5

1
<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;
     });

})();
Kushal
  • 1,360
  • 6
  • 16
  • Hi Kushal, can you please let me know why you used `$scope` instead of `this` – Suffii Aug 14 '15 at 04:44
  • Dependency injection is the most important feature in angularjs and as for the "this" sometimes the function may not run in the context that you were expecting it to run in angular .. so to make sure your code always work in the controllers scope .. $scope is injected and used accordingly – Kushal Aug 14 '15 at 04:49
  • Thanks but after using the `$scope` agian not getting any thing on the page ! it was working with `this`, however (after correcting the `

    {{store.item.name}}>

    `) !     – Suffii Aug 14 '15 at 05:17
  • Try it this way then

    {{item.name}}>

     – Kushal Aug 14 '15 at 05:19
  • yeah it works now but does this mean we do not need store allies in `
    ` any more?
     – Suffii Aug 14 '15 at 05:22
  • Aliases as supported in latest angularjs only .. if its available in yours then it should have worked – Kushal Aug 14 '15 at 05:24
1

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>
Juned Lanja
  • 1,466
  • 10
  • 21
  • Hi Jugnu, can you please let me know why you used `$scope` instead of `this` ? – Suffii Aug 14 '15 at 04:47
  • $scope is an object that refers to the application model.We need to insert dependency for $scope service inside controller and assign value to scope and these scope values will be available in html snippet having that controller. – Juned Lanja Aug 14 '15 at 04:52
  • have a look at https://docs.angularjs.org/guide/scope hope so it will clear your concept about scope. – Juned Lanja Aug 14 '15 at 04:52
  • 1
    Thanks but after using the `$scope` again not getting any thing on the page ! it was working with `this`, however (after correcting the `

    {{store.item.name}}>

    `) !     – Suffii Aug 14 '15 at 05:16
  • it must be working with $scope but you might have done

    like this so it will be assigned as attribute to h1 tag instead of h1 content. you can see by inspecting element.     – Juned Lanja Aug 14 '15 at 05:25
  • yes one more point this work with controller alias so store.item.name will work with MovieStore as store, for using $scope remove alias for controller. Have a look at http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification – Juned Lanja Aug 14 '15 at 05:40
0

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>

SuperVeetz
  • 2,128
  • 3
  • 24
  • 37
0
<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;
     });

})();
atinder
  • 2,080
  • 13
  • 15
0

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,
}

})();

Anil kumar
  • 930
  • 7
  • 18