[AngularJS]2. Controller, ng-controller

時間 2019-11-17

標籤 angularjs controller 欄目 AngularJS 简体版

原文原文鏈接

1. Add a controller named StoreController to our gemStore application.javascript

2. Attach the StoreController to the <body> tag. Be sure to alias it asstore.css

3. In app.js, we've added a gem object to represent one of the products in our gemStore. Assign it to the product property ofStoreController so we can use them in the page.html

4. Display the name of the product inside the <h3> tag.java

5. Display the price of the product inside the <em> tag.bootstrap

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body ng-controller="StoreController as store">  <!-- 2. StoreController, 'S' Should be captical, 'as' keyword, 'store' use thsi later  -->
    <div class="product row">
      <h3>
        {{store.product.name}}  <!-- 4 -->
        <em class="pull-right">{{store.product.price}}</em> <!-- 5 -->
      </h3>
    </div>
  </body>
</html>

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []);
  
  app.controller('StoreController', function(){  //1
      this.product=gem; //3
  });
})();

相關標籤/搜索

angularjs2

controller

ionic2+angularjs2

springboot+angularjs2

controller+service+dao

AngularJS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。