Angularjs組件式開發(fā)，現(xiàn)在我們基于https://github.com/AngularClass/NG6-starter 這個項目來講解。
在這個教程，將會使用weui樣式，來制作一個簡單的對話框組件

6ADD39CD-C116-4C27-8761-C41DCE674B44.png

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.先在控制臺中創(chuàng)建組件

npm run component -- --name dialog 

可以看到組件應(yīng)該有的文件都自動創(chuàng)建出來了

圖1.png

3.制作組件。我們將以面向?qū)ο蠓绞絹碓O(shè)計我們的組件，組件里面各種屬性，父組件只通過改變一個類的屬性就可以改變我們設(shè)計的組件的變量。那么我們在dialog文件夾中添加dialogApi.js文件

export default class dialogApi{


  constructor() {
    "use strict";
    //對話框是否顯示
    this.dialogState=false;

    //對話框主題內(nèi)容
    this.content="";
    //按鈕文字
    this.buttonText="知道了";



  }

  getDialogState(){
    "use strict";
    return this.dialogState;
  }

  /**
   * 顯示對話框
   */
  showDialog(){
    "use strict";
    this.dialogState=true;
  }

  /**
   * 關(guān)閉對話框
   */
  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 中 ,寫好從父組件傳入的對象名稱

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è)計完畢。我們可以到其他組件中去使用它了，
我們在about組件中來使用它, 引入 dialog標(biāo)簽 ，在標(biāo)簽寫入 屬性dialog-api，這里遇到大寫字母要變小寫，并且加-。之后，用按鈕來顯示它

<navbar></navbar>
<h1>{{ $ctrl.name }}</h1>
<section>
  About us.
</section>

<span ng-click="$ctrl.show()">出來吧對話框</span>
<dialog  dialog-api="$ctrl.dialogApi"></dialog>

在about.controller.js ，要引入dialogApi.js，并且new 一個新對象。用這個對象，我們就可以實現(xiàn)對對話框的屬性控制

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;

最后運行項目

npm start

在瀏覽器輸入 http://localhost:3000 就可以看到我們項目了