[JS] AngularJS Tutorial 4

Step_04_篇

第四篇的教學，算是加強之前的觀念。重點 Model 與 View 的綁定關係。最後順便實做一下 ASP.NET PartialView 與 Angular 。

主頁面只做產生畫面及載入相關 css 的動作，InitDialog 則為註冊共用 controller 給 Partial，而過瀘器的部份如果有練習過前幾章節，應該是可以快速上手。

@section scripts{
 @Styles.Render("~/Content/themes/base/css")

 <script src="~/Scripts/angular.js"></script>
 <script src="~/Scripts/MyLibs/Tutorial_04/A001.js"></script>
 @Scripts.Render("~/bundles/jqueryui")

 <script type="text/javascript">
  $(function () {
   //建立 jquery UI
   InitDialog("My.Helpers.A001");
   //註冊 Angular
   angular.bootstrap(this);
  })
 </script>
 
}

<div ng-controller="My.Helpers.A001">
 <input ng-model="query">
 <select ng-model="sel">
  <option value="Date">ByDate</option>
  <option value="Todo">ByTodo</option>
 </select>

 <ul ng-repeat="item in History | filter:query | orderBy:sel">
  <li>{{item.Date}}/{{item.Todo}}</li>
 </ul>
</div>

@{
 Html.RenderPartial("~/Views/Home/common/DialogView.cshtml");
}

在 Partial 部份，則使用 jQuery 來為元素增加屬性。

<script src="~/Scripts/MyLibs/Dialog.js"></script>
<script type="text/javascript">
 function InitDialog(controller) {

  $("#DialogView").attr("ng-controller", controller);

  var m = new My.Helpers.Dialog( "#DialogView" );
  m.SetTitle("Show");
  m.Open();
 }
</script>

<div id="DialogView">
 <p>{{ForPart}}</p>
 <ul ng-repeat="item in History">
  <li>{{item.Date}}/{{item.Todo}}</li>
 </ul>
</div>

Controller 類，僅產生物件。

 function toLog(obj: any) {
 console.log(obj);
}

module My.Helpers {
 export interface I001 {
  History: M001[];
  //Partial Tip
  ForPart: string;
  //Init Dialog
  InitDialog: () => void;
 }
 export class M001 {
  Date: string;
  Todo: string;
  constructor(pDate:string, pTodo:string) {
   this.Date = pDate;
   this.Todo = pTodo;
  }
 }

 export class A001 {
  constructor($scope: I001) {
   console.log($scope);

   $scope.History = [];
   $scope.History.push(new M001("01", "A"));
   $scope.History.push(new M001("02", "B"));
   $scope.History.push(new M001("03", "C"));
   $scope.History.push(new M001("04", "D"));
   $scope.History.push(new M001("05", "E"));
   $scope.History.push(new M001("00", "Z"));
   
   $scope.ForPart = "Angular to Partial";
  }
 }
}

Partial View 控制 UI 類

function toLog(obj: any) {
 console.log(obj);
}

declare var $;

module My.Helpers {
 export class Dialog {
  Name: string;

  SetTitle(pTitle: string): void {
   $(this.Name).dialog({"title":pTitle});
  }

  Open(): void {
   $(this.Name).dialog("open");
  }

  constructor(pName: string) {
   this.Name = pName;

   $(this.Name).dialog({ autoOpen: false });
  }
 }
}