摘要:[AngularJS]範例:珠寶商店-展示第一個產品
文章內容出自:http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
寶石商店
有一間珠寶商店,需要使用AngularJS來做為網站的前台,需要展示珠寶的名稱;價錢;描述。
-
咱們先來嘗試展示一顆名為Dodecahedron的珠寶。js如下:
var gem= { name:'Dodecahedron', price:2.95, description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.' }
-
建立angular.module。js如下:
app = angular.module('store', [ ]);
-
於module內建立 controller。js如下:
app.controller('StoreController', function() { this.product=gem; });
-
js部分組合完成。js如下:
//建構 AppConstructor() //將你的JavaScipt 放在一個閉包裡是一個好的習慣 function AppConstructor() { app = angular.module('store', [ ]); app.controller('StoreController', function() { this.product=gem; }); var gem= { name:'Dodecahedron', price:2.95, description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.' } }
-
現在來開始建構Html畫面呈現部分--module
-
將module匹配到html某個區塊,表示在區塊內為module的有效範圍,在這個範例將他放在html 的標籤內。(也可放到body標籤上,那作用範圍就只有body)
-
<html ng-app="store" >
-
-
建構Html畫面呈現與controller屬性連結--controller
- 將controller匹配到html某個區塊,表示在區塊內為controller的有效範圍。有一點要記住controller的放置位置必須是位於module內 (module>controller)。
- 花括弧("{{controller.變數}}"),是AngularJS,變數連結的方法。
-
<body ng-controller="StoreController as store"> <div> <h1> {{store.product.name}} </h1> <h2> ${{store.product.price}} </h2> <p> {{store.product.description}} </p> </div> </body>
-
html建構完成。
-
<!DOCTYPE html> <html ng-app="store" > <head lang="en"> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.min.js" /> <meta charset="UTF-8"> <title></title> </head> <body ng-controller="StoreController as store"> <div> <h1> {{store.product.name}} </h1> <h2> ${{store.product.price}} </h2> <p> {{store.product.description}} </p> </div> </body> </html>
Result: