端端舝

巨件正奈皿仿奶朮煦珧匹及灍犛插紳眶喝梭硃娶斑釦
2014/11/5

赻撩畿賡
摽枘餜ㄗ@balmychanㄘ
絁宒頗扦左伕
CakePHP, Rails, iOS, Android卅升及Web炵﹜失皿伉炵及忳�嶱逃
模逜砃仃迡淩僕衄扔奈申旦nicori 及蕾切奻仆﹜嶱逃
弁仿它玉奪燴頗�ZAC Enterprise 及嶱逃

醴腔
Who
仇木井日𦲀�扑旦氾丞匹AngularJS及爀⻌毛蕉尹化中月源﹝
What
斜扦匹及嶱逃及�傖支霜木午﹜TypeScript匹及末奈旦瞰﹜
𦲀�扑旦氾丞匹丐月丐月卅辻夔及灍蚾瞰卞勾中化﹜畿賡仄引允﹝
Why
AngularJS互𦲀�扑旦氾丞匹妏歹木化中月弗奈旦及ロ�反屾卅中及匹﹜ロ�蝠𡥼匹五木壬

ㄠㄝ嶱逃�砓支极秶﹜爀⻌及五勻井仃﹜嶱逃白伕奈﹜白巧伙母�傖卅升及掊隴
ㄡㄝ乒斥亙奈伙﹜戊件玄伕奈仿奈﹜扔奈申旦﹜犯奴伊弁氾奴皮﹜田伉犯奈扑亦件卅升及掊隴
ㄢㄝ公及坻Tips

ㄠㄝ羲逃�砓﹜凳傖卞勾中化

嶱逃�砓衙猁
嶱逃�砓
ZAC Enterpriseㄗ奪燴頗�扑旦氾丞ㄘ
嶱逃极秶
゜掛3~4靡
漆俋ㄗ矛玄瓜丞ㄘ1靡
↗蔚懂腔卞反﹜20~30靡及巨件斥瓦失互嶱逃允月砑隅
撮胍�傖
弁仿奶失件玄扔奶玉AngularJS + TypeScript
扔奈田奈扔奶玉ASP.NET + ASP.NET Web API 2 + SQL Server

What is ZAC?
偶璃?皿伕斥尼弁玄矛奈旦匹﹜仫奻支埻�及奪燴毛俴丹
緙磁倰價聡𦲀�扑旦氾丞ㄗERP由永弗奈斥匹允ㄘ
?�仫奪燴
?�惁奪燴
?婓𤪕奪燴
?マ窗奪燴
?馱杅奪燴
?磊愐奪燴
?and more...
http://www.oro.co.jp/zac/
https://www.oro.co.jp/reforma-psa/ ㄗ苤�耀砃仃及ReformaPSA午中丹扔奈申旦手10堎井日旦正奈玄仄引仄凶ㄘ
兮夫仍𨈘�毛ㄐㄐ

爀⻌及五勻井仃
戊奈玉講毛𦑩日仄凶中↙ data binding
UI毛緙珨仄凶中↙ directive
弁仿奶失件玄�及嶱逃毛﹜嗣�杅嶱逃匹�薹方仁俴中凶中↙ 白伙旦正永弁
𨈘�毛嶱宎仄凶及反﹜2013爛10堎仍欠
瞳蚚反﹜2014爛5堎仍欠井日

AngularJS及�傖
乒斥亙奈伙
伙奈氾奴件弘ㄗui.routerㄘ反妏蚚六內﹜angular-translate午﹜directive及僕籵戊件禾奈生件玄趙﹜
service及申斥生旦伕斥永弁及僕籵趙﹜灍蚾源宒及僕籵趙毛�月凶戶卞爀⻌
犯奴伊弁氾奴皮
廣50�ㄗ氾件皿伊奈玄測歹曰支﹜陔仄中奶件正奈白尼奈旦ㄘ
扔奈申旦
廣40�ㄗ扔奈田奈扔奶玉井日及犯奈正龰腕支僕籵�I燴毛引午戶月ㄘ
白奴伙正奈
廣15�

白巧伙母�傖
/b 暫湔及扑旦氾丞午僕湔匹五月蚚﹜白巧伙母毛煦仃凶
/Content ASP.NET及�傖卞𨃨�
/css
/common 僕籵及css白央奶伙ㄗsass毛仇仇卞⻌木化﹜VisualStudio匹赻�戊件由奶
伙ㄘ
/directives directive蚚及css, sass白央奶伙
/Script
/vendor AngularJS掛极支﹜跪意皿仿弘奶件
/zac
/common 暫湔及仿奶皮仿伉卅升
/directives directive掛极互⻌月
/services service掛极互⻌月
/UI
/Views 矛奈旦HTML互⻌月
/directives directive蚚及HTML白央奶伙
/services
/UI UI毛圈丹service蚚及HTML白央奶伙
/project 跪辻夔賒醱ㄗ仇木反﹜瞰午仄化偶璃奪燴ㄘ
/views 偶璃奪燴辻夔及心匹妏蚚允月﹜HTML白央奶伙ㄗ�蚚
directive蚚手⻌月ㄘ
/directives 偶璃奪燴辻夔及心匹妏蚚允月﹜directive掛极互⻌月
project.ts 伙奈氾奴件弘蚚及白央奶伙
project-controller.ts AngularJS蚚及戊件玄伕奈仿奈
index.cshtml HTML白央奶伙ㄗ珨窒ASP.NET及氾件皿伊奈玄毛妏蚚ㄘ
/approval
~~~ /project 午肮元�傖~~~

hotfix_YYMMD master
D
feature_XXX develop release
皮仿件民
timeline

矛奈旦HTML
釬傖
戊件玄伕奈仿
奈釬傖
API釬傖
ㄗ扔奈田奈扔奶
玉ㄘ
API卞�𡛟允
月
扔奈申旦
釬傖
乒犯伙弁仿旦
釬月
HTML卞⺧葆
仃毛仄化中仁
HTML毛犯奴
伊弁氾奴皮趙
允月
斛猁卅日白奴
伙正奈手釬月
俇傖ㄐ
AngularJS毛笢陑卞擂尹凶�磁及﹜賒醱嶱逃及霜木
↗T4 Template匹﹜C#�及乒
犯伙毛党淏允月午﹜
TypeScript�及乒犯伙及戊奈
玉手赻�匹苂仁方丹卞卅勻化
引允
隴日井卅�磁反﹜犯奴伊弁氾
奴皮卞煦仃化釬曰宎戶引允
伐奶乩奈
釬傖
犯扒奶件
釬傖
HTML
乒永弁釬傖

切卅心卞﹜癶僇及羲逃互博勳莽喝硃梭釦喧喝餃勳棗午中丹源中日勻仄扎中引允井ˋ

VisualStudio + TypeScript + AngularJS匹倷六卞卅木引允ㄐ

VisualStudio
Visual Studio 2013 Express for Web互剠蹋
WebEssentials毛⻌木月午﹜sass及戊件由奶伙支minify手仿弁仿弁
TypeScript及塋𨫆毛郔湮癹忳仃日木月
TypeScript
Visual Studio 2013 Update 2井日version 1.0互伉伉奈旦
Express for Web匹手妏尹月
AngularJS
郔陔及1.3.1手NuGet匹允什⻌月

AngularJS毛妏勻化中月午犯奴伊弁氾奴皮支﹜扔奈申旦﹜DI﹜伎〝卅衙癩互腎�仄引允﹝
公及𤩸五源毛TypeScript毛蝠尹化畿賡仄化中五引允﹝

TypeScript卞勾中化切斤勻午分仃
TypeScript反Microsoft庨及altJS匹﹜ECMAScript 6及枑偶毛嗣仁怳烔仄﹜暫湔及JavaScript午髦婓仄化妏蚚允月仇午互褫夔匹允﹝
JavaScript卞弁仿旦﹜奶件正奈白尼奈旦﹜蹈伃倰﹜斥尼生伉弁旦﹜仿丞母宒﹜噙腔倰葆辻夔毛樓尹凶手及匹允﹝
VisualStudio毛妏丹午﹜戊奈玉娗俇支隅膽啋尺及斥乓件皿手仿弁仿弁﹝
// 弁仿旦隅膽
class Hoge {
public title;
public get() {
}
}
TypeScript // 噙腔倰葆
TypeScript
var a:number;
a = "hoge"; // 仇木反巨仿奈
a = <any>"hoge"; // 中介午卅勻凶日any互妏尹月互﹜云俴�x反謎仁卅中
// 蹈伃倰
enum Type {
One = 1,
Two,
};
TypeScript // 仿丞母宒ㄗthis互鋤厥今木月及匹﹜弁仿旦隅膽囀匹妏丹午晞瞳ㄘ
(a: number, b: string) => {
}
TypeScript

倰ロ�卞勾中化
TypeScript毛妏勻化中月�磁﹜倰ロ�毛隅膽仄凶白央奶伙互斛猁匹允﹝ㄗ戊件由奶伙巨仿奈卞卅曰引允ㄘ
狟�井日妏蚚仄凶中倰ロ�互𤩸井木凶白央奶伙毛母它件伕奈玉仄統桽今六引允﹝
http://definitelytyped.org/
VisualStudio毛妏勻化中月�磁﹜NuGet匹龰腕允月仇午手褫夔匹允﹝
declare module ng {
// not directly implemented, but ensures that constructed class implements $get
interface IServiceProviderClass {
new (...args: any[]): IServiceProvider;
}
interface IServiceProviderFactory {
(...args: any[]): IServiceProvider;
}
// All service providers extend this interface
interface IServiceProvider {
$get: any;
}
angular.d.ts

啦聆梯梗釦釵娶勳梯喧及戊奈玉毛庄賡仄化中五引允

乒斥亙奈伙
var app = angular.module("app", ["ui.router", "ui.bootstrap", "ui.sortable"]); JavaScript
app.config(["$stateProvicer", function($stateProvider) {
// provider及場ヽ趙�I燴卅升
});
var app = angular.module("app", ["ui.router", "ui.bootstrap", "ui.sortable"]);
app.config(["$stateProvider", ($stateProvider: ng.ui.IStateProvider) => {
// provider及場ヽ趙�I燴卅升
});
TypeScript
引內反乒斥亙奈伙毛釬傖允月
杻卞湮五卅綃中反丐曰引六氏互﹜DI允月左皮斥尼弁玄卞手倰毛硌隅褫夔

戊件玄伕奈仿奈
戊件玄伕奈仿奈反﹜眻諉正弘卞硌隅允月倛午﹜伙奈氾奴件弘匹偞隅允月倛ㄗ踏隙反﹜ui router毛妏勻化中引允ㄘ
<body ng-controller="myController">
</body>
HTML
OR
$stateProvider.state("hoge", {
url: "/hoge",
templateUrl: "index.cshtml",
caseInsensitiveMatch: false,
controller: "myController"
})
JavaScript

app.controller("myController", ["$scope", "serviceA", function($scope, serviceA) {
$scope.title = "hoge";
}]);
JavaScript
module Controllers {
'use strict';
export interface IMyControllerScope extends ng.IScope {
title: string;
}
export class MyController {
public static $inject = ["$scope", "serviceA"];
constructor($scope: IMyControllerScope , serviceA: Services.ServiceA) {
$scope.title = "hoge";
}
}
angular.module("app").controller("myController", MyController);
}
TypeScript
JavaScript及�磁
TypeScript及�磁

犯奴伊弁氾奴皮
<hoge-directive title="hoge" max-count="5" />
angular.module("app").directive("hogeDirective", ["serviceA", "serviceB", function(serviceA, serviceB) {
return {
restrict: "EA",
require: "?ngModel",
scope: {
"title": "?=",
"max-count": "?="
},
templateUrl: this.serviceB.RootPath + "/HogeDirective.html",
link: function(scope, element, attrs, ctrls, transclude) {
element.find("span.title").text(scope.title);
serviceA.do(function(result) {
});
}
};
}]);
HTML
JavaScript
title午max-count毛龰月方丹卅�g�卅犯奴伊弁氾奴皮

module Directives {
'use strict';
export interface HogeDirectiveScope {
title: string;
maxCount: number;
}
export class HogeDirective {
public restrict = "EA";
public require = "?ngModel";
public templateUrl = this.serviceB.RootPath + "/HogeDirective.html"; // template毛硌隅允月仇午手丐曰引允
public static $inject = ["serviceA", "serviceB"]; // $injector毛妏丹凶戶﹜仇仇匹DI允月乒斥亙奈伙毛隅膽仄化中月
constructor(private serviceA: ServiceA, private serviceB: ServiceB) {
// 戊件旦玄仿弁正卞private卅升及失弁本旦党�赽毛勾仃月午﹜劐杅互赻�匹隅膽今木引允
}
public link = (scope: HogeDirectiveScope, element: JQuery, attrs: ng.IAttributes) {
element.find("span.title").text(scope.title);
serviceA.do((result) => {
});
};
}
angular.module("app").directive("hogeDirective", ["$injector", ($injector) => {
return $injector.instantiate(HogeDirective);
}]);
// Directives.addDirective(HogeDirective); // 灍蕣反仇丹中勻凶目伙由奈毛蚚砩仄化中引允
}
TypeScript

扔奈申旦
angular.module("app").service("zacCookie", function() {
return {
read: function(name) {
return jQuery.cookie(name);
},
write: function(name, value, options) {
jQuery.cookie(name, value, options);
},
remove: function(name, options) {
return jQuery.removeCookie(name, options);
}
}
});
JavaScript
jQuery cookie毛仿永皿允月扔奈申旦ㄗ犯白巧伙玄及angularjs及cookie仿奶皮仿伉反﹜path互劐尹日木木卅中凶戶
JavaScript及�磁

module Services {
'use strict';
export class ZacCookie {
public read(name: string): any {
return jQuery.cookie(name);
}
public write(name: string, value: any, options?: any): void {
jQuery.cookie(name, value, options);
}
public remove(name: string, options? : any) : boolean {
return jQuery.removeCookie(name, options);
}
}
angular.module('app.services').ser
vice("zacCookie", function () {
return new ZacCookie();
});
}
TypeScript
TypeScript及�磁

API午窣觓允月扔奈申旦
API�井日犯奈正毛龰勻化仁月扔奈申旦毛釬月�磁﹜$resource毛妏勻化中引允ㄗ囀窒匹$http毛妏丹倛匹手謎中井午佷中引允ㄘ
angular.module("app").service("projectService", ["$resource", function($resource) {
return $resource('/Project', {}, {
'get': {
url:"/Projects/:id',
method: 'GET',
cache: true
},
'query': {
method: 'GET',
url: "/Projects"
params: { /* 犯白巧伙玄�互丐木壬偞隅*/ }
cache: true,
isArray: true
},
'check': { // Restful匹卅中丟末永玉手袚樓褫夔
method: 'GET'
params: {}
url: "/Projects/Check/:id
}
}
}]);
JavaScript

module Services {
'use strict';
export interface IProjectService extends ng.resource.IResourceClass<Models.ProjectItem> {
check(params?: Object, success?: Function, error?: Function): ng.IPromise<Models.ProjectItem>;
}
export function ProjectService($resource: ng.resource.IResourceService) {
return $resource<Models.ProjectItem>("/Project', {}, {
'get': {
url:"/Projects/:id',
method: 'GET',
cache: true
},
'query': {
method: 'GET',
url: "/Projects"
params: { /* 犯白巧伙玄�互丐木壬偞隅*/ }
cache: true,
isArray: true
},
'check': { // Restful匹卅中丟末永玉手袚樓褫夔
method: 'GET'
params: {}
url: "/Projects/Check/:id
}
}]);
}
ProjectService.$inject = ["$resource"];
angular.module("app").factory("projectService", ProjectService);
}
TypeScript
TypeScript及�磁

白奴伙正奈
瞰午仄化﹜�g�卞偶璃楓瘍及珂螹卞"#"毛葆仃月白奴伙正奈
<div class="project-number">{{ project.id | projectNumber}}</div> HTML

module Filters {
'use strict';
export function ProjectNumber(serviceA: Services.ServiceA) {
return function (input) {
if (angular.isUndefined(input) || input == null) return "";
return "#" + input;
}
}
angular.module("app").filter("projectNumber", ProjectNumber);
}
TypeScript
angular.module("app").filter("projectNumber", ["serviceA, function(serviceA) {
return function(input) {
if (angular.isUndefined(input) || input == null) return "";
return "#" + input;
}
}]);
JavaScript
JavaScript及�磁
TypeScript及�磁

白巧奈丞
<form ng-form name="myForm">
<input type="text" name="title" ng-model="title" ng-maxlength="5">
<div ng-if="myForm.title.$error.maxlength">5恅趼毛閉尹化中引允</div>
</form>
HTML
暫湔及白巧奈丞及𤩸五源反﹜杻卞劐歹曰反卅中匹允ㄗ公曰扎公丹分???ㄘ

市旦正丞奶件皿永玄http://plnkr.co/edit/AWlyEIldDBYB8rKSnF3d
黃赻及市旦正丞奶件皿永玄毛釬月�磁ㄗ凶午尹壬﹜庌靡毛⻌薯允月奶件皿永玄毛犯奴伊弁氾奴皮趙ㄘ
<form ng-form name="myForm">
<fullname-input></fullname-input>
<button ng-click="reset()">伉本永玄</button>
</form>
HTML

app.controller('myController', ['$scope', function($scope) {
$scope.name = "taro yamada";
$scope.reset = function() {
$scope.name = "taro yamada";
$scope.myForm.$setPristine();
};
}]);
app.directive("fullnameInput", [function() {
return {
restrict: "EA",
require: ["?ngModel", "?^form"],
scope: {},
replace: true,
template: "<div><input type='text' ng-model='firstName'><input type='text' ng-model='lastName'></div>",
var ngModelCtrl = ctrls[0];
var ngFormCtrl = ctrls[1];
if (ngFormCtrl) {
// 㻢𨃨及input猁匼午反�e匹﹜袨颷互劐歹月紱釬互丐木壬﹜隴尨腔卞ngFormCtrl.$setDirty();毛網少
ngFormCtrl.$setDirty();
}
JavaScript
JavaScript及�磁

JavaScript
replace: true,
template: "<div><input type='text' ng-model='firstName'><input type='text' ng-model='lastName'></div>",
var ngModelCtrl = ctrls[0];
var ngFormCtrl = ctrls[1];
if (ngFormCtrl) {
// 㻢𨃨及input猁匼午反�e匹﹜袨颷互劐歹月紱釬互丐木壬﹜隴尨腔卞ngFormCtrl.$setDirty();毛網少
ngFormCtrl.$setDirty();
}
if (ngModelCtrl) {
ngModelCtrl.$render = function() {
var value = ngModelCtrl.$modelValue || ngModelCtrl.$viewValue;
if (angular.isUndefined(value) || value === null) {
// 弁伉失�I燴
scope.firstName = "";
scope.lastName = "";
} else {
// �毛element卞偞隅允月�I燴
var names = value.split(" ");
scope.firstName = (0 < names.length) ? names[0] : "";
scope.lastName = (1 < names.length) ? names[1] : "";
}
}
}

JavaScript
}
function setViewValue() {
var name = scope.firstName + (scope.lastName ? " " : "") + scope.lastName;
ngModelCtrl.$setViewValue(name);
}
scope.$watch("firstName", function(newValue) {
setViewValue();
});
scope.$watch("lastName", function(newValue) {
setViewValue();
});
}
};
}]);

ngModelController互囀窒卞厥勾�毛�月午﹜$viewValue, $modelValue午中丹媼勾及�互丐曰引允﹝
仇及砢賃毛挹今六化云仁及互﹜黃赻及市旦正丞奶件皿永玄毛釬月奻匹笭猁匹允﹝$render手公及丹切及珨勾匹允﹝
data binding匹﹜俋窒井日劐載今木凶�磁
$modelValue $formatters
$viewValue
交奈扒奈紱釬匹﹜劐載今木凶�磁
$viewValue $parsers $modelValue
$viewValue互劐載今木月午$render互網壬木月﹝公仇匹element毛載陔允月
$render
$viewValue互劐載
element及載陔�I
燴卅升
伉本永玄�I燴卞勾中化
$setPristine卅升及�I燴反﹜丐仁引匹手旦正奶
伙及劐載卞及心妏蚚允月
伉本永玄�I燴反﹜ng-model毛籵仄化俴丹
ㄗ$modelValue互undefined支null及�磁﹜伉本
永玄午心卅仄﹜DOM毛載陔允月ㄘ

田伉犯奈扑亦件http://plnkr.co/edit/o4WYlrbiKwH4ql6TNVoB?p=info
<form name="myForm">
<input type="text" name="name" custom-maxlength="5" ng-model="name">
<div ng-if="myForm.name.$error.customMaxlength">5恅趼毛閉尹化中引允</div>
</form>
HTML
ng-maxlength毛黃赻卞灍蚾仄化心月

app.directive("customMaxlength", function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attrs, ngModelCtrl) {
var maxlength = attrs['customMaxlength'];
if (maxlength) {
ngModelCtrl.$validators['customMaxlength'] = function(modelValue, viewValue) {
var value = modelValue || viewValue;
if (angular.isUndefined(value) || value === null) return true;
return value.length <= maxlength;
}
}
}
}
}
});
JavaScript
JavaScript及�磁

module Directives {
'use strict';
export class CustomMaxlength {
public restrict = "A";
public require = "ngModel";
constructor() {
}
public link = (scope:ng.IScope, element: JQuery, attrs: ng.IAttributes, ngModelCtrl: ng.INgModelController) {
var maxlength: number = attrs['customMaxlength'];
if (maxlength) {
ngModelCtrl.$validators['customMaxlength'] = function(modelValue, viewValue) {
var value = modelValue || viewValue;
if (angular.isUndefined(value) || value === null) return true;
return value.length <= maxlength;
}
}
};
}
angular.module("app").directive("customMaxlength", ["$injector", ($injector) => {
return $injector.instantiate(CustomMaxlength);
}]);
}
TypeScript
TypeScript及�磁

準肮ヽ田伉犯奈扑亦件
<form name="myForm">
<input type="text" name="projectCode" check-project-code ng-model="projectCode">
<div ng-if="myForm.projectCode.$error.checkProjectCode">剠�卅戊奈玉匹允</div>
</form>
HTML
扔奈田奈�匹戊奈玉民尼永弁毛俴中凶中﹜午中丹及反方仁丐曰引允﹝
check-project-code毛灍蚾仄化心月

app.directive("checkProjectCode", ["$q", "projectService", function($q, projectService) {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attrs, ngModelCtrl) {
var deferred =$q.defer();
projectService.get(function(project) {
// 卅氏日井及袚樓及民尼永弁毛仇仇匹俴丹
deferred.resolve(project);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
}
}]);
JavaScript
JavaScript及�磁
↗準肮ヽ田伉犯奈扑亦件及�磁﹜promise毛殿允﹝衄�卅�及�磁反resolve﹜剠�卅�及�磁反﹜reject毛網太堤允
扔奈申旦互promise毛殿允方丹卞卅勻化中月�磁ㄗ$http.get卅升ㄘ公及引引殿仄化手謎中

module Directives {
'use strict';
export class CheckProjectCode {
public require = "ngModel";
public static $inject = ["$q", "projectService"];
constructor($q: ng.IQService, projectService: Services.Project) {
}
public link = (scope:ng.IScope, element: JQuery, attrs: ng.IAttributes, ngModelCtrl: ng.INgModelController) {
var deferred = this.$q.defer();
this.projectService.get((project) => {
deferred.resolve(project);
}, (error) => {
deferred.reject(error);
});
return deferred.promise;
};
}
angular.module("app").directive("checkProjectCode", ["$injector", ($injector) => {
return $injector.instantiate(CheckProjectCode );
}]);
}
TypeScript
TypeScript及�磁

仇仇井日反﹜AngularJS午反眻諉憝�S卅中
𦲀�扑旦氾丞匹斛猁卞卅月辻夔毛珨窒仍畿賡

伊奶失它玄秶郘
奪燴賒醱匹伊奶失它玄毛劐尹木月方丹卞允月午井﹜方仁丐曰引允方友
痜癹秶郘
交奈扒奈及痜癹卞方勻化�醴及桶尨/準桶尨毛秶郘
市旦正穴奶朮�𡛟
瞳蚚交奈扒奈仍午ㄗ�扦ㄘ仍午卞煦嶊允月凶戶及陑腕

伊奶失它玄
<custom-layout="Layout1">
<div ng-repeat="layout in layouts">
<span>{{ layout.name }}</span>
</div>
</custom-layout>
HTML
�g�卅伊奶失它玄ㄗng-repeat匹靜曰殿允ㄘ
煦嶊毛圈丹伊奶失它玄
<custom-layout="Layout2">
<div ng-repeat="layout in layouts">
<div ng-if="layout.type == 'hoge'">
</div>
<div ng-if="layout.type == 'fuga'">
</div>
<layout-item item="layout" /> 
</div>
</custom-layout>
HTML

伊奶失它玄
module Directives {
export interface ICustomLayoutScope extends ng.IScope {
layouts:LayoutItem[]; // �e匹隅膽仄凶﹜乒犯伙弁仿旦犯奈正ㄗASP.NET�午DSL毛妏勻化乒犯伙弁仿旦及旦平奈穴反
僕衄仄化中引允ㄘ
}
export class CustomLayout {
public static $inject = ["layoutService"];
public scope = {};
public transclude = true;
public template = "<div ng-transclude></div>";
constructor(private layoutService: Services.LayoutService) {
}
public link = (scope: ng.IScope, element: JQuery, attrs: ng.IAttributes) {
var layoutName = attrs["zacLayout"];
if (layoutName) {
layoutService.get(layoutName, function(layouts) {
scope.layouts = layouts;
});
}
}
}
}
TypeScript

痜癹
<div class="a" has-permission="permissionA"></div>
<div class="b" has-permission="permissionB"></div>
<div class="c" has-permission="permissionC"></div>
HTML
痜癹及衄剠卞方勻化﹜桶尨/準桶尨毛ピ曰杸尹月
瞰尹壬﹜�卞方勻化仫奻犯奈正毛�六凶仁卅中午中丹�磁互丐月﹝
API�匹反犯奈正毛秶郘仄﹜AngularJS�匹反桶尨毛秶郘允月

module Directives {
export interface IHasPermission {
show: boolean;
};
export class HasPermission {
public static $inject = ["permissionService"];
constructor(permissionService: Services.Permission) {
}
public link = (scope:IHasPermission, element: JQuery, attrs: ng.IAttributes) => {
element.hide();
var typePermission= attrs["hasPermission"] || "";
if (typePermission == "") return;
this.permissionService.get(typePermission, (hasPermission) => { // 扔奈田奈井日痜癹ロ�毛龰腕
if (hasPermission) {
element.show(); // 痜癹互丐木壬﹜element毛桶尨允月
}
});
};
}
}
TypeScript
�g�卞﹜扔奈田奈井日痜癹ロ�毛龰腕仄化﹜桶尨毛秶郘允月

<permission-manager>
<div class="a" has-permission="permissionA"></div>
<div class="b" has-permission="permissionB"></div>
<div class="c" has-permission="permissionC"></div>
</permission-manager>
HTML
灍蕣反﹜��e卞龰腕允月午笭中及匹ㄗAngularJS毛妏勻化月午﹜𠸎勿仁午準肮ヽ�I燴互湮講卞卅曰互切匹允ㄘ
笒犯奴伊弁氾奴皮毛袚樓仄化﹜赽犯奴伊弁氾奴皮午窣觓仄﹜引午戶化龰腕允月方丹卞仄化中引允

export class HasPermission {
// 吽謹
public require = "?^PermissionManager";
public template = "<div ng-if="show" ng-transclude></div>";
constructor(permissionService: Services.Permission) {
}
public link = (scope: IHasAuthority, element: JQuery, attrs: ng.IAttributes, ctrl: PermissionManagerCtrl) => {
var get = ctrl ? ctrl.get || permissionService.get; // PermissionManager互中凶日﹜公勻切及get毛妏丹
get(typePermission, (hasPermission) => {
if (hasPermission) {
element.show(); // 痜癹互丐木壬﹜element毛桶尨允月
}
});
};
}
TypeScript

export class PermissionManagerCtrl {
public queue: any = [];
public get = (typePermission: string, success: (hasPermission: boolean) => void) => {
this.queue.push({
typePermission:typePermission,
success: success
});
};
public processAllQueues = () => {
// ㄠㄝ扔奈田奈井日痜癹ロ�ㄗqueue及笢旯毛妏勻化ㄘ毛引午戶化龰腕允月ㄗAPI毛蚚砩仄化云
仁ㄘ
// ㄡㄝqueue囀及success毛公木冗木網太堤允
}
}
TypeScript
赽犯奴伊弁氾奴皮井日失弁本旦允月凶戶及戊件玄伕奈仿奈毛蚚砩

export class PermissionManager {
public transclude = true;
public template = "<div ng-transclude></div>";
public controller = PermissionManagerController;
constructor() {
}
public link = (scope: IHasPermission, element: JQuery, attrs: ng.IAttributes) => {
this.controller.processAllQueues();
};
}
TypeScript
link匹反processAllQueues毛網太堤允

市旦正穴奶朮�𡛟
5勾及陑腕
ㄠㄝController反滔湮趙今六卅中ㄗscope匹傾允分仃卞�癩今六月ㄘ �扦匹賒醱毛釬曰眻允午五卞﹜幻午氏升婬瞳蚚匹五卅仁卅曰引允
ㄡㄝView�手﹜犯奴伊弁氾奴皮毛妏勻化由奈汁趙毛筳戶月奻午肮元
ㄢㄝ虐噫仍午及�𡛟反﹜Controller午View毛釬曰眻仄凶幻丹互﹜戊旦玄互腴仁卅月煦嶊萸互丐月ㄗ悵忐及戊旦玄手醀心化ㄘ
Controller互滔湮趙仄化中卅仁﹜View互犯奴伊弁氾奴皮趙今木化中木壬﹜陔仄中賒醱毛釬月及反㜭匹允
ㄣㄝ賒醱毛釬曰眻允幻升匹反卅中﹜嗣屾及煦嶊毛升丹仄化手⻌木凶中�磁﹜犯奴伊弁氾奴皮毛煦仃化煦嶊允月
ㄤㄝ公手公手�扦黱卞市旦正丞仄卅中匹𦤦戈方丹卞釬月

Tips
白奴伙正奈�I燴反﹜扔奈田奈or 弁仿奶失件玄扔奶玉升勻切匹允月屯五井
☆扔奈田奈扔奶玉反API及心及灍蚾卞仄引仄斤丹﹝★午中丹�反方仁�五引允互﹜
白巧奈穴永玄�I燴卅升反升切日卞允木壬中中及ˋ午疶�卞佷丹仇午互丐曰引允﹝
�W及民奈丞匹反﹜白奴伙正奈�I燴反扔奈田奈扔奶玉匹俴勻化中引允﹝
嗣晟惤�𡛟手蕉尹月午﹜API�匹褫夔卅癹曰晟惤手晟惤仍午及白巧奈穴永玄毛仄化井日﹜殿允屯五分井日匹允﹝
升丹手弁仿奶失件玄�卞伎〝�I燴毛手凶六方丹午仄化﹜伎〝白奴伙正奈毛釬勻化仄引丹及匹允互﹜
公木反弁仿奶失件玄�匹允月屯五井蕉尹引仄斤丹ㄐ白奴伙正奈�I燴反仍湔眭及籵曰﹜笭中匹允﹝
庲偩摽及庲偩ロ�ㄗ瞰尹壬交奈扒奈ID卅升ㄘ反升仇卞厥凶六化云仁屯五井
仇木反﹜ZAC匹反head及meta匹厥凶六化中引允﹝ㄗ謎中支曰源午反佷勻化中引六氏互ㄘ
API�反OAuth庲偩脹匹弁仿奶失件玄午煦褩仄化庲偩匹五月屯五井午佷中引允﹝
公及笢匹﹜AngularJS�匹本永扑亦件毛奪燴允月扔奈申旦毛釬曰﹜交奈扒奈ロ�毛龰腕允月方丹卞允月午謎中﹜午佷中引
允﹝
失皿伉+ API及�傖匹失皿伉毛釬勻化中月午﹜赻內午伕弘奶件ロ�毛龰腕允月API毛釬曰﹜
失皿伉�匹伕弘奶件ロ�毛平乓永扑亙允月午佷中引允互﹜蕉尹源反失皿伉毛釬傖允月媆午肮元匹允﹝

?VisualStudio + TypeScript + AngularJS匹﹜Windows庭匹手爀⻌褫夔
白伙旦正永弁匹倰本奈白卅及反﹜嗣�杅嶱逃卞手衄瞳匹允
?TypeScript及扔件皿伙反屾卅中匹允互﹜JS午及誑𡥼俶互詢中
AngularJS及乒斥亙奈伙及蕉尹源午源砃俶互丐勻化中月
?價聡扑旦氾丞嶱逃卞卅月午﹜痜癹奪燴支恚螝卅奶件皿永玄
湮講犯奈正桶尨卅升﹜籵都及Web嶱逃匹反絞凶日卅中�觳互嗣中互
AngularJS毛妏蚚允月午﹜旦穴奈玄卞賤𢜪匹五月
扔奈申旦﹜犯奴伊弁氾奴皮﹜戊件玄伕奈仿奈﹜白奴伙正奈毛丹引仁妏中仇卅允
引午戶

矛旦玄皿仿弁氾奴旦匹反卅仁﹜耀坰笢及窒煦互嗣中匹允
兮夫﹜ロ�蝠𡥼今六化仁分今中
郔摽卞

陔逑﹜笢芴�歹內
郔摽卞ㄗ由奈玄ㄡㄘ
巨件斥瓦失笯嶲躁摩笢匹允
倓庤丐曰引仄凶日云汒互仃仁分今中ㄐㄐ

丐曰互午丹仍介中引仄凶﹝

端端舝

巨件正奈皿仿奶朮煦珧匹及灍犛插紳眶喝梭硃娶斑釦

More Related Content

巨件正奈皿仿奶朮煦珧匹及灍犛插紳眶喝梭硃娶斑釦

Editor's Notes