angularjs实例

0 whitelist 白名单

<div class="whitelist-padding">
	<div class="whitelist-flex">
		<label class="p-form-field-label whitelist-address">{{ ADDRESS_TYPE_LABEL | translation }}</label>
		<mat-radio-group class="whitelist-radio" [(ngModel)]="ipType">
			<mat-radio-button value="isIPv4">{{ IPV4 | translation }}</mat-radio-button>
			<mat-radio-button value="isIPv6">{{ IPV6 | translation }}</mat-radio-button>
		</mat-radio-group>
	</div>

	<div class="whitelist-ip">
		<label class="p-form-field-label whitelist-ip-label"> {{ IP_LABEL | translation }} </label>
		<div class="whitelist-ip-input"  *ngIf="ipType === 'isIPv4'">
			<input class="field-input" type="text" [(ngModel)]="newIPv4" placeholder="255.255.255.255/24"
				   (ngModelChange)="onCheckValidIPv4($event)"/>
			<div class="p-form-field-alert-info error whitelist-ip-error" *ngIf="!isValidIPv4">
				{{ VALID_IPV4 | translation }}
			</div>
		</div>
		<div class="whitelist-ip-input" *ngIf="ipType === 'isIPv6'">
			<input class="field-input" type="text" [(ngModel)]="newIPv6" placeholder="0:0:0:0:0:0:0:0/128"
				   (ngModelChange)="onCheckValidIPv6($event)"/>
			<div class="p-form-field-alert-info error whitelist-ip-error" *ngIf="!isValidIPv6">
				{{ VALID_IPV6 | translation }}
			</div>
		</div>

		<button class="button-action whitelist-add-button" type="button"
				[disabled]="addDisabled"
				(click)="addIPToWhiteList()">{{ ADD | translation }}
		</button>
	</div>
	<div class="whitelist-ip-table">
		<ip-table  [(listIPs)]="listIPs" (ipListChanged)="updateIPList($event)"></ip-table>
	</div>
</div>
		
    onCheckValidIPv4(event: any): void {
        if (IPv4Utils.isValidIPv4(event)) {
            this.isValidIPv4 = true;
            this.addDisabled = false;
        } else {
            this.isValidIPv4 = false;
            this.addDisabled = true;
        }
    }
	
    addIPToWhiteList(): void {
        if (this.ipType === 'isIPv4') {
            if (this.ipExistInWhiteList(this.newIPv4)) {
                this._msgSvc.setMessage(this.IP_ALREADY_EXISTED, 'error');
                return;
            }
            this.listIPs.push({ ip: this.newIPv4, type: 'IPv4' });
        } else {
            if (this.ipExistInWhiteList(this.newIPv6)) {
                this._msgSvc.setMessage(this.IP_ALREADY_EXISTED, 'error');
                return;
            }
            this.listIPs.push({ ip: this.newIPv6, type: 'IPv6' });
        }

        this.listIPs = Array.from(this.listIPs);
        this.addDisabled = true;
    }

    private ipExistInWhiteList(ip: string): boolean {
        for (let i = 0; i < this.listIPs.length; i++) {
            if (StringUtils.isMatch(this.listIPs[i].ip, ip)) {
                return true;
            }
        }
        return false;
    }
	
	updateIPList(updatedIPs: IpAddressObject[]): void {
        this.listIPs = updatedIPs;
    }
	

1 :    html中自定义控件progressBar ，双向绑定变量。并且使用class中的变量_progressBarWidth

<ng-template #audioBar>//自定义控件
   <div #progressBarContainer class="plcm-field-row flex-container-row-left plcm-progress-bar-container">
       <span #progressBar class="plcm-audio-progress-bar" [style.width.%]="_progressBarWidth"></span>
   </div>
</ng-template>

notes: class使用html的东东，比如 ng-template，需要用ViewChild加载.html使用class中的变量，则可以直接使用.

2     //html中的东西，必须在class中加载一下，class才能用        

export class AudioPage implements OnInit, AfterViewInit, OnDestroy {                
   @ViewChild('audioBar') audioBar: TemplateRef<any>;
   ngOnit() {
             this._progressBarWidth =50;
            }
}

3 

//inputFormItem is all controller
inputFormItem: PFormItem[];
let inputFormItem = [
    //PFormConfigItem is each controller. 
    new PFormConfigItem({
         label: 'name',
         key: 'audio.in' + i.toString() + '.name',
         fieldType: PFormFieldType.DISPLAY
    }),
    //pform load define controller
    new PFormItem({
            template: this.audioBar,
    })
    ......
 ]

4  

//p-form is page or subform: include control and button ,header etc
<p-form [subHeader]="i"
        [topBorder]="false"
        [items]="inputFormItem"
        [saveButton]="false">
</p-form>

other： windows:修改界面控件属性，vc通过控件属性面板adjust len，width，height etc。 或者通过 msdn找 api。
angularjs：html控件,css 调节控件属性;第三方lib primeng，eg：p-calendar;
查看第三方控件的css
ui\web.angular2\node_modules\primeng\resources\components\calendar\calendar.css 

5 前端与后端
ts 是page 的class，html是网页。
mainactively.java是andriod 的前端，DBhelper.class 是后端。
mainactively.java call DBhelper.java 处理db。两个class在一个package，组合使用。 

1) 前端是html解析出控件的样式，比如FormFieldType.TEXT or FormFieldType.CHECKBOX,
后端是key: 'sourceman.camera.brightness' , 比如save value(比如19), don;t care 前台输入是slider的19 or text输入的19

new PFormConfigItem({
    label: this.slideBrightLabel,
    key: 'sourceman.camera.brightness',
    fieldType: PFormFieldType.TEXT,
    showIf: true
}),

2) 前端save value到后端.
save 发送httpPostJson 到后台.
save 是根据key 保存的. key绑定control.
save 将value存到对应的key上(理解为map[key]=value),控件是前端用什么显示这个value
3)
前端---configManager---后台
后台logic，listen key，然后onNext 做具体工作,比如addWhiteLis.

configSub = configObservable.distinctUntilChanged()
            .subscribe(new Observer<ConfigData>() {//subscribe(listen) keys
                public void onNext(ConfigData data) { //deal with respond
                    agentInstance.addWhiteListTargets(snmpTargetMIB); //do logic
                }