Advanced Interdisciplinary Projects Lab(AIPLab) 討論區

Please login or register.

請輸入帳號, 密碼以及預計登入時間

新聞:

[慶賀]恭喜張清貿醫師升任北榮傳醫科主治醫師-20170201

作者 主題: AngularJS練習(1): AngularJS & Firebase  (閱讀 873 次)

admin

  • 管理員
  • Hero Member
  • *****
  • 文章: 1721
    • 檢視個人資料
AngularJS練習(1): AngularJS & Firebase
« 於: 七月 14, 2015, 11:11:25 am »
Step 1: AngularJS: MVC & Web application
http://www.w3schools.com/angular/
程式碼: [Select]
!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

Step 2: Firebase tutorial
https://www.firebase.com/tutorial/#gettingstarted
程式碼: [Select]
<!doctype html>
<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
  </head>
  <body>
    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://dw54ufakbft.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });
      myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>
  </body>
</html>

Step 3: AngularFire: officially supported AngularJS binding for Firebase
https://www.firebase.com/docs/web/libraries/angular/quickstart.html

« 最後編輯時間: 七月 14, 2015, 11:40:37 am 由 admin »
已記錄

admin

  • 管理員
  • Hero Member
  • *****
  • 文章: 1721
    • 檢視個人資料
已記錄
 

SimplePortal Classic 2.0.5