//app/asset/javascript/app.js

//angular.module
//Where we write pieces of our Angular application.
//Makes our code more maintainable, testable, and readable. 
//Where we define dependencies for our app.

var app = angular.module('app', //設定 module 名稱，只能有一個
  [ 'ui.router',                //Dependency Injection 其他 module
    'angularFileUpload'
  ])

//#字號前面為原本的 router，後面則為 ui-router，也可以透過 HTML5mode 來把 # 字號去除掉，但就要小心不要跟原本的 router 衝到。

http://localhost:3000/#/posts/list

app
.config(['$httpProvider', function($httpProvider){
  
  //防止 CSRF，rails 預設都必須帶 token，才可以發 post，防止外來的攻擊
      var headers = $httpProvider.defaults.headers.common;
      token_tag = document.querySelector("meta[name=csrf-token]");
      if( token_tag ){ headers['X-CSRF-TOKEN'] = token_tag.content; };
      headers['X-Requested-With'] = 'XMLHttpRequest';
      
      //另一種方式
      //$httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content');
}])
.config(
  [      '$stateProvider', '$urlRouterProvider',
  function($stateProvider,  $urlRouterProvider) {

  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/home");

  // Now set up the states
  $stateProvider
    .state('posts', {
      abstract: true,
      url:"/posts",
      template: "<ui-view></ui-view>",
    })
    .state('posts.list', {
      url: "/list", //http://localhost:3000/#/posts/list
      templateUrl: "/posts/index.html",
      controller: 'PostIndexCrtl'
    })
    .state('posts.show', {
      url: "/show/:id", //http://localhost:3000/#/posts/show/1
      templateUrl: "/posts/show.html",
      controller: 'PostShowCrtl'
    })
}])

//app/asset/javascript/Post/PostIndexCrtl.js
app
.controller('PostIndexCrtl', //設定 controller 名稱，只能有一個
  [       '$scope', '$http', //注入這個 controller 會用到的模組
  function($scope, $http){   //這裏在要注入一次到這個 function 裡面

      //定義一個 function 可以透過 $http 發 get 拿回 json
    var getPost = function(){
        $http.get('/posts').success(function(data){
              //定義變數 post = 傳回來的dat
                $scope.posts = data;
        });
    };
     //也可這樣寫
     //$http({ method: "GET",
             //url: "/posts",
             //data: {
                //name: foo
            //}
      //}).success(function(data){
            //$scope.posts = data;
      //});

    //這裏馬上執行，因為一定要有 data 才能做其他事
    getPost()

   //排序
   $scope.sortKey = 'id';
   $scope.sort = function(keyname){
      $scope.sortKey = keyname;
      $scope.reverse = !$scope.reverse; //加驚嘆號可以將值變成 boolean
  }
  
  //checkboxs
  var selection = []
  var fruits = [
        '蘋果','西瓜','香蕉'
    ];

   //當點擊 checkbox 將值丟到 selection，取消則刪除
   var toggleSelection = function toggleSelection(fruit) {
          //indexOf()找出目前點擊的位置，若沒有則為 -1
        var idx = $scope.selection.indexOf(fruit);
        if (idx > -1) {
          //splice(位置，刪除第幾個，新增資料)
          $scope.selection.splice(idx, 1);
        } else {
          $scope.selection.push(fruit);
        }
      };

      //也可以將所有變數定義在最後面，方便管理
   $scope.selection = selection;
   $scope.fruits = fruits
   $scope.toggleSelection = toggleSelection
}])

<!--public/posts/index.html-->
<div class="box">
  <div class="box-header">
    <div class='pull-right'>
      <!-- ng-model 綁定 data 用來篩選-->
      <label>Any: <input ng-model="search.$"></label>
      <label>ID: <input ng-model="search.id"></label>
    </div>
  </div>
  <div class="box-body">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <!-- ng-clik 觸發 controller 裡的 sort() function 並帶參數進去 -->
          <th ng-click="sort('id')" class='pointer'>ID
          <!-- ng-show true 顯示 flase 隱藏，相反為 ng-hide -->
          <span class="glyphicon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>
          <th>名稱</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
          <!-- ng-repeat 展開取回來的 array data -->
          <!-- filter 篩選 -->
          <!-- orderBy 排序 -->
        <tr ng-repeat="video in videos | filter:search:strict | orderBy:sortKey:reverse">
          <td></td>
          <td></td>
          <td></td>
        </tr>
    </tbody>
    </table>
  </div>
</div>

<!--checkbox 多選項-->
<label ng-repeat="fruit in fruits">
  <input type="checkbox" name="selectedFruits[]" value="" ng-checked="selection.indexOf(fruit) > -1"
    ng-click="toggleSelection(fruit)" >
    
</label>

<pre></pre>

<p ng-repeat="post in posts">.</p>

$index – 取出陣列中的index。(從0開始)
$first – 如果是第一個項目，就傳回true、否則為false。
$middle – 如果不是第一個和最後一個項目，就傳回true、否則為false。
$last – 如果是最後一個項目，就傳回true、否則為false。

ng-true-value="YES" ng-false-value="NO"
可搭配這兩個設定 ture 和 false 時的值

<select ng-model="Select1" ng-options="post.name for post in posts">
  <option value="">-- 請選擇 --</option>
</select>

<ng-include src="'/templates/search_bar.html'"></ng-include>

$watch、ng-change、ng-click的比較

範例中$watch和ng-change的結果相同，
但使用$watch指令，watch的值還會傳回newValue,oldValue，
提供“改變的新數值”和“前一次改變的舊數值”。

$watch和ng-change是在改變內容值的時候，觸發事件，ng-click則只會在點擊輸入框時被執行。

currency  貨幣符號
date      將 Date 轉成指定格式的日期
filter    可以篩選陣列中的內容
json      json
limitTo   限制陣列或字串裡面的字元個數
number    可以為數值或指定小數以下位數
lowercase 將英文字串轉成英文小寫
uppercase 將英文字串轉成英文大寫
orderBy   可以將資料作排序