Angularjs 面向对象设计组件

Angularjs组件式开发，现在我们基于https://github.com/AngularClass/NG6-starter 这个项目来讲解。
在这个教程，将会使用weui样式，来制作一个简单的对话框组件

6ADD39CD-C116-4C27-8761-C41DCE674B44.png
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.先在控制台中创建组件

npm run component -- --name dialog 

可以看到组件应该有的文件都自动创建出来了

图1.png

3.制作组件。我们将以面向对象方式来设计我们的组件，组件里面各种属性，父组件只通过改变一个类的属性就可以改变我们设计的组件的变量。那么我们在dialog文件夹中添加dialogApi.js文件

export default class dialogApi{


  constructor() {
    "use strict";
    //对话框是否显示
    this.dialogState=false;

    //对话框主题内容
    this.content="";
    //按钮文字
    this.buttonText="知道了";



  }

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

  /**
   * 显示对话框
   */
  showDialog(){
    "use strict";
    this.dialogState=true;
  }

  /**
   * 关闭对话框
   */
  closeDialog(){
    "use strict";
    this.dialogState=false;
  }


  /**
   * 按钮取消事件
   */
  onCancel(){
    this.closeDialog();
    "use strict";

  }

}

在dialog.html 中粘贴这段代码,在代码里面，我们已经把各种变成类的属性。

<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 中，将我们写好的组件加入进去

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;

到这里，组件已经设计完毕。我们可以到其他组件中去使用它了，
我们在about组件中来使用它, 引入 dialog标签 ，在标签写入 属性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 一个新对象。用这个对象，我们就可以实现对对话框的属性控制

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 就可以看到我们项目了