CodeMix使用教程3：创建Angular组件

在上两期我分享了Angular创建的方法和clis原理，本期将继续分享Angular编程里面最重要的一个环节——组件。

如果你对CodeMix使用教程想有一个层次的了解，你可以从我分享的第一篇开始->点击这里。或者从Myeclipse中文网大纲开始看起。

组件是Angular应用程序的组成部分。新的Angular CLI 组件向导提供了一种创建组件的快速方法。

Angular组件概述

在着手制作组件之前，有必要了解什么是组件。在最基本的形式，它是用户界面组件的封装，包括控制器和接口元素。Angular 组件可以是仪表板上使用一组子组件的页面，也可以是用于删除项目列表的自定义小部件。

例如，此示例显示使用特定控件制作下拉日历。把它像任何其他输入窗体控件一样，因为它将呈现 UI 并提供支持逻辑。

<dd-calendar dd-height=”400px” dd-width=”600px”
      [dataset]=”calData.EVENTS”
      (selection)=”onSelection($event)”>
</dd-calendar>

Angular 组件模板文件中的此 HTML 代码段允许属性作为输入，本例中为”选项”并发出输出事件。在 TypeScript 文件中，将定义类似的元素。

@Component({
    selector: 'dd-calendar',
    templateUrl: 'dd-calendar.component.html',
    styleUrls: ['dd-calendar.component.css'],
    providers: [CalendarDatasourceService]
})
export class DDCalendarComponent implements OnInit {
    @Input('dataset') dataSet;
    // Logic
}

在文件中，指定描述 dd-calendar 小部件支持的输入。@Component

创建Angular组件

Angular 团队在确保用户遵循框架最佳实践方面取得了重大进展。为此，他们为Angular创建了一个 CLI，在命令行上运行。该命令允许生成组件以及其他重要步骤，如运行服务器。ngng

若要创建Angular组件，请选择”文件>新>组件”以打开”New Angular CLI Component”向导。如果看不到”Component”选项，请切换到”Angular”透视或选择”其他”并打开”Angular”文件夹。该向导提供了一种了解 CLI 功能以及简化添加新组件的方法。

创建新组件

或者，您可以单击”新”按钮，并在”Angular”文件夹中选择”组件”;或者从资源管理器右键单击并选择 New>Component。

在”Angular组件”向导中，指定组件的名称，并可以选择到生成组件的位置的路径。

关于组件的一个重要说明是，应遵循特定的约定。文件名与my-calendar.component.ts一样小写，它将具有名为 的 TypeScript 类。请注意，组件后缀由生成器自动添加。MyCalendarComponent

使用向导添加新组件

在填写组件名称时，Angular IDE 中的向导将自动为此提供上下文。

为组件生成的命令

在 my Angular示例中，将自动生成三个文件。

my-angular.component.ts= 包含组件的 TypeScript 类声明。

my-angular.component.html= 包含组件的 HTML 结构。

my-angular.component.css= 包含呈现组件时要使用的任何额外样式。

接下来，在应用程序的其他区域开始使用组件的元素声明，然后前往学习中心的调试器区域以启动服务器并查看应用在运行中。

====================================================================

Angular编辑器还是有那么几个，但是我还是推荐用CodeMix来做开发，因为——在该扩展里面可以开发PHP、PYthon、Vue、React等等，的确是很方便的，点击这里看看CodeMix还能干什么！