AngularJS 實作留言板

2016-05-10

最近因為面試，被對方主管要求以AngularJS 實作留言板，對於JavaScript不熟的我，還要用Angular....

硬著頭皮答應對方，藉此機會了解這是什麼東西。

先是在男丁格爾的Angular教學

學習一些觀念及語法的使用

了解到AngularJS是以Model觀念撰寫程式

跟以前JQuery的函式方式的使用不太一樣

以下是實作的檔案

index.html

<!DOCTYPE html>
<html ng-app="MyFirstAngular">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/angular.min.js"></script>    
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">


    <script src="scripts/date.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/messagecontroller.js"></script>
</head>
<body>
    <!--留言框-->
    <div class="span7" style="margin-top:20px;" ng-controller="MessageController">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <td>Title</td>
                    <td>Message</td>
                    <td>Leave Time</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="message in messagelist">
                    <td>{{ message.title }}</td>
                    <td>{{ message.message }}</td>
                    <td>{{ message.leavetime }}</td>
                </tr>
            </tbody>
        </table>
        <br>
        <!--訊息輸入-->
        <div>
            Title
            <br>
            <input type="text" ng-model="title" name="title" placeholder="input title" />
        </div>
        <br>
        <div>
            Message :
            <br>
            <input type="text" ng-model="message" name="message" placeholder="input message" />
        </div>
        <br>
        <button class="btn btn-default" type="button" ng-click='AddMessage()'>Leave Message</button>
    </div>
</body>
</html>

app.module.js

var app = angular.module("MyFirstAngular", []);

messagecontroller.js

app.controller('MessageController', ['$scope', '$http', function ($scope, $http) {

    // initial
    $scope.messagelist = [];   

    $scope.AddMessage = function () {

        // check input 
        if ($scope.title == null) {
            alert('Please input title');
            return;
        }

        if ($scope.message == null) {
            alert('Please input message');
            return;
        }

        var message = new Object();
        message.title = $scope.title;
        message.message = $scope.message;
        message.leavetime = Date.today().setTimeToNow().toString('yyyy/MM/dd H:mm:ss');

        $scope.messagelist.push(message);
    }
}]);

index.html是顯示的網頁

app.modulge.js是angularjs 定義application的檔案

messagecontroller.js是controller內容實作的檔案

首先include angular.min.js, app.modulge.js, messagecontroller.js檔案

開始撰寫angularJS

在 html標籤中以ng-app="MyFirstAngular" 宣告作用範圍(更多ng-app)

在div中以 ng-controller="MessageController" 宣告以哪個controller來控制

在留言框中以底下程式碼來顯示所有在messagelist裡的資訊

<tr ng-repeat="message in messagelist">
      <td>{{ message.title }}</td>
      <td>{{ message.message }}</td>
      <td>{{ message.leavetime }}</t>
</tr>

messagelist 對應到controller裡的 $scope.messagelist

一開始是空的$scope.messagelist = []

當輸入留言的時候，建立一個message物件，物件屬性包含title, message, leavetime

再將此物件push到messagelist陣列裡

angularjs 因為two way data binding 所以顯示的資訊也會更新

在訊息輸入的部分

以ng-model榜定title, message這2個輸入

<input type="text" ng-model="title" name="title" placeholder="input title" />

<input type="text" ng-model="message" name="message" placeholder="input message" />

在controller中再以 $scope.title $scope.message讀取輸入值

這樣簡單的留言板就完成了...

在javascript抓取時間的部分

以date.js來處理。

回首頁