2015年8月11日 星期二

我的AngularJS初學筆記(三) Filters

利用AngularJS過濾器(Filters)
可以將資料轉換成大寫、小寫、貨幣格式
或達成排序、過濾篩選資料等效果


以下是我的練習範例
See the Pen AngularJS 練習範例3 Filters by AllenYu (@allenyjs) on CodePen.
張貼者： 於 沒有留言:
標籤：

2015年8月8日 星期六

我的AngularJS初學筆記(二) Controllers

練習用AngularJS透過Controllers來控制網頁
並且透過$scope物件做雙向設定
在網上有許多介紹$scope物件的文章
http://www.dotblogs.com.tw/blackie1019/archive/2013/09/21/119101.aspx
http://ithelp.ithome.com.tw/question/10133017

以下是我練習的範例
See the Pen AngularJs練習範例2 by AllenYu (@allenyjs) on CodePen.
張貼者： 於 沒有留言:
標籤：

我的AngularJS初學筆記(一) Expressions 與 Directives

在使用前必須先載入angular.js 在官網上可以下載
第一步在需要設為AngularJS管轄區域的html tag上加上 屬性data-ng-app
例如<body data-ng-app=""> 或 <div data-ng-app="">
以往用Javascript或Jquery需要數行的程式碼
用AngularJS只要做些簡單的屬性設定就可以完成

以下是我了練習範例
See the Pen angular練習範例1 by AllenYu (@allenyjs) on CodePen.
張貼者： 於 沒有留言:
標籤：

2015年8月4日 星期二

我的requireJS初學練習筆記

練習範例1

  • test1.html

    在HTML檔案中引入require.js並將data-main設為js資料夾中的common檔案，由於requireJS預設副檔名為js所以可以省略

              <html>
            <head>
              <script data-main="js/common" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>
  • js(Folder)
    • common.js 
                require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone'
              }
          });
          require(['test1']);
    • test1.js 
                define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

  • 1. JQuery版本:2.1.4
  • 2. Backbone版本:1.2.1
  • 3. underscore版本:1.8.3

練習範例2

  • test2.html

    在HTML檔案中引入require.js並將data-main設為js資料夾中的test2檔案，由於requireJS預設副檔名為js所以可以省略

              <html>
            <head>
              <script data-main="js/test2" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>
  • js(Folder)
    • common2.js 
                require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone',
                  myTestFunc: 'myTestFunc'
              }
          });
          require(['test1']);
    • test2.js 
                require(['common2'], function (common){
            require(['myTestFunc']);
          });
    • myTestFunc.js 
                define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

  • 1. JQuery版本:2.1.4
  • 2. Backbone版本:1.2.1
  • 3. underscore版本:1.8.3
張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)