Angularjs組件式開發(fā)，現(xiàn)在我們基于https://github.com/AngularClass/NG6-starter 這個(gè)項(xiàng)目來講解。
在這個(gè)教程，將會(huì)使用weui樣式，來制作一個(gè)簡(jiǎn)單的對(duì)話框組件
1.安裝weui膛腐，并且在app.js 中引入weui
npm install weui
引入weui
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';
import 'normalize.css';
const weui=require('weui');
angular.module('app', [
uiRouter,
Common,
Components
])
.config(($locationProvider) => {
"ngInject";
// @see: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
// #how-to-configure-your-server-to-work-with-html5mode
$locationProvider.html5Mode(true).hashPrefix('!');
})
.component('app', AppComponent,weui);
2.先在控制臺(tái)中創(chuàng)建組件
npm run component -- --name dialog
可以看到組件應(yīng)該有的文件都自動(dòng)創(chuàng)建出來了
3.制作組件。我們將以面向?qū)ο蠓绞絹碓O(shè)計(jì)我們的組件鼎俘，組件里面各種屬性哲身，父組件只通過改變一個(gè)類的屬性就可以改變我們?cè)O(shè)計(jì)的組件的變量。那么我們?cè)赿ialog文件夾中添加dialogApi.js文件
export default class dialogApi{
constructor() {
"use strict";
//對(duì)話框是否顯示
this.dialogState=false;
//對(duì)話框主題內(nèi)容
this.content="";
//按鈕文字
this.buttonText="知道了";
}
getDialogState(){
"use strict";
return this.dialogState;
}
/**
* 顯示對(duì)話框
*/
showDialog(){
"use strict";
this.dialogState=true;
}
/**
* 關(guān)閉對(duì)話框
*/
closeDialog(){
"use strict";
this.dialogState=false;
}
/**
* 按鈕取消事件
*/
onCancel(){
this.closeDialog();
"use strict";
}
}
在dialog.html 中粘貼這段代碼,在代碼里面而芥，我們已經(jīng)把各種變成類的屬性律罢。
<div class="js_dialog" ng-show="$ctrl.dialog.getDialogState()" >
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__bd">{{$ctrl.dialog.content}}</div>
<div class="weui-dialog__ft">
<a ng-click="$ctrl.dialog.onCancel()" class="weui-dialog__btn weui-dialog__btn_primary">{{$ctrl.dialog.buttonText}}</a>
</div>
</div>
</div>
接著在 dialog.component.js 中 ,寫好從父組件傳入的對(duì)象名稱
import template from './dialog.html';
import controller from './dialog.controller';
import './dialog.scss';
let dialogComponent = {
bindings: {
dialogApi:"<"
},
template,
controller
};
export default dialogComponent;
最后在components.js 中，將我們寫好的組件加入進(jìn)去
import angular from 'angular';
import Home from './home/home';
import About from './about/about';
import Dialog from './dialog/dialog'
let componentModule = angular.module('app.components', [
Home,
About,
Dialog
])
.name;
export default componentModule;
到這里棍丐，組件已經(jīng)設(shè)計(jì)完畢。我們可以到其他組件中去使用它了沧踏，
我們?cè)赼bout組件中來使用它, 引入 dialog標(biāo)簽 歌逢，在標(biāo)簽寫入 屬性dialog-api，這里遇到大寫字母要變小寫翘狱，并且加-秘案。之后，用按鈕來顯示它
<navbar></navbar>
<h1>{{ $ctrl.name }}</h1>
<section>
About us.
</section>
<span ng-click="$ctrl.show()">出來吧對(duì)話框</span>
<dialog dialog-api="$ctrl.dialogApi"></dialog>
在about.controller.js ，要引入dialogApi.js阱高，并且new 一個(gè)新對(duì)象赚导。用這個(gè)對(duì)象，我們就可以實(shí)現(xiàn)對(duì)對(duì)話框的屬性控制
import DialogApi from '../dialog/dialogApi.js'
class AboutController {
constructor() {
this.name = 'about';
this.dialogApi=new DialogApi();
this.dialogApi.content="你好";
this.show=function(){
"use strict";
this.dialogApi.showDialog();
}
}
}
export default AboutController;
最后運(yùn)行項(xiàng)目
npm start
在瀏覽器輸入 http://localhost:3000 就可以看到我們項(xiàng)目了
