CODEWITHSUNDEEP
javascriptangularjs
Andres Quintero
Andres Quintero

Reputation: 253

Angular not working

I'm new to angular and want to start practicing some code. I created a simple app but the angular expression is not evaluating in the browser. My

{{inventory.product.name}}

prints to the browser as {{inventory.product.name}}; however, if I go to view page source my angular.min file is loaded. Can someone please tell me what I'm doing wrong, thanks.

HTML CODE 

  <title>Angular Practice</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  </head>

  <body ng-app="inventory">

  <div ng-controller="InventoryController as inventory">
  <h1>{{inventory.product.name}}</h1>
  <h2>Product Amount</h2>
  <p>Product description</p>
  </div>

  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  </body>
  </html>

ANGULAR CODE

  (Function(){
      var app = angular.module('inventory', []);

      app.controller('InventoryController', function(){
         this.product = item;
      });

      var item = {
      name: 'Test Item',
      amount: 10,
      description: 'This is the first test item',
      }
  })();

Upvotes: 0

Views: 442

Answers (1)

Rahul Desai
Rahul Desai

Reputation: 15501

In your JS code, Function() should be function(). Note that Javascript is case sensitive.

Working code snippet:

(function() {
  var app = angular.module('inventory', []);

  app.controller('InventoryController', function() {
    this.product = item;
  });

  var item = {
    name: 'Test Item',
    amount: 10,
    description: 'This is the first test item',
  }
})();
<body ng-app="inventory">

  <div ng-controller="InventoryController as inventory">
    <h1>{{inventory.product.name}}</h1>
    <h2>Product Amount</h2>
    <p>Product description</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</body>

Upvotes: 2

Related Questions