[AngularJS]範例:珠寶商店-展示第一個產品

  • 1246
  • 0
  • 2014-07-09

摘要:[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:




 

By-藍小伙