使用Angular创建杂货清单管理器：添加和显示项目

angular 应用程序由组件组成。在 Angular 应用程序中，组件由 html 模板和组件类组成。来自官方文档：

组件是 Angular 应用程序中 UI 的最基本构建块。Angular 应用程序是 Angular 组件树。Angular 组件是指令的子集。与指令不同，组件总是有一个模板，并且模板中的每个元素只能实例化一个组件。

在本教程中，您将学习如何开始使用 Angular 创建购物清单管理器。

入门

您需要节点版本 > 6.9.x 和节点包管理器 (npm) > 3.xx 两者都具备后，尝试使用npm.

npm install -g @angular/cli

安装 Angular CLI 后，尝试使用它创建一个项目。

ng new AngularGrocery --skip-npm

上面的命令将创建项目结构。导航到项目目录并安装所需的依赖项。

cd AngularGrocery
npm install

要启动应用程序 Web 服务器，请键入以下命令：

ng serve

应用程序服务器启动后，将浏览器指向 http://localhost:4200/ ，您将能够查看默认应用程序。

应用结构

使用Angular创建杂货清单管理器：添加和显示项目第1张

上图显示了我们的购物清单管理器的应用程序结构。该src文件夹包含默认应用程序的源代码。app文件夹内的文件src夹包含打字稿代码。index.html文件夹内src是渲染创建的 Angular 组件的主要 HTML 文件。

创建添加项目视图

默认情况下，应用程序有一个app-root组件。让我们创建一个名为app-grocery创建我们的杂货店经理应用程序的新组件。在 app 文件夹中，创建一个名为app.grocery.ts.

从. Component_ angular-core

import { Component } from '@angular/core';

您将使用 Bootstrap 来设计组件。从官方网站下载并包含 Bootstrap 包。将文件保存在文件夹中。src/assets

让我们在app.grocery.ts文件中定义组件。该组件将具有三个属性：selector、template和styleUrls。selector指示组件的使用方式。template定义使用特定选择器时将呈现的 HTML。styleUrls定义组件中使用的样式的 URL。

在里面app.grocery.ts，一旦组件模块被导入，定义app-grocery组件，如下所示：

@Component({
    selector: 'app-grocery',
	templateUrl: './app.grocery.html',
	styleUrls: [
        '../assets/css/bootstrap.min.css'
    ]
})

如上面的代码所示，该组件使用了一个名为app.grocery.html. app.grocery.html在文件夹内创建一个名为的src/app文件。将以下代码添加到 app.grocery.html文件中：

<div>
    <h2> Grocery list manager </h2>

    <div class="row">
        <div class="col-xs-6 col-md-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="enter grocery items" id="txtSearch" />
                <div class="input-group-btn">
                    <button class="btn btn-primary" type="button">
        <span class="glyphicon glyphicon-ok"></span>
        </button>
                </div>
            </div>
        </div>
    </div>

</div>

在app.grocery.ts文件中，添加 GroceryComponent要导出的类。

export class GroceryComponent {

}

您需要先将新创建的组件导入其中，app.module.ts然后才能使用它。导入. GroceryComponent_app.module.ts

import { GroceryComponent } from './app.grocery';

在文件中声明并引导新创建的 Grocery 组件app.module.ts。

@NgModule({
  declarations: [
    GroceryComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [GroceryComponent]
})

现在您已准备好在index.html页面内使用 Grocery 组件。从index.html页面中删除默认组件并添加以下 HTML 代码：

<app-grocery>加载中...</app-grocery>

保存上述更改并让服务器恢复正常。将浏览器导航到 http://localhost:4200/ ，您将显示 Grocery 组件。

使用Angular创建杂货清单管理器：添加和显示项目第2张

添加项目

在输入文本框中输入项目后，您需要阅读该项目并将其保存在列表中。要读取输入，您将使用ngModel将其绑定到变量。添加ngModel到输入文本框。

<input type="text" class="form-control" placeholder="enter grocery items" id="txtSearch" [(ngModel)]="task" />

每次在输入文本框中输入一些文本时，task变量都会相应地更新。在文件中定义task变量。添加一个名为以保持输入的任务集合的变量。GroceryComponentapp.grocery.tstasks

 task: string;
  tasks = [];

单击确定按钮后，任务将添加到tasks您在GroceryComponent. 在内部定义一个 onClick方法GroceryComponent来处理 OK 按钮的单击。这是它的外观：

  onClick(){
      this.tasks.push({name: this.task});
  	this.task = '';
  }

将点击事件添加到OK按钮，如图：

<button class="btn btn-primary" type="button" (click)="onClick()">
   <span class="glyphicon glyphicon-ok"></span>
</button>

单击确定按钮后，新任务将添加到tasks集合列表中。该 task变量也被重置以清除输入文本框。

保存上述更改，并在输入task并单击 OK 按钮时，将任务添加到tasks集合中。要显示任务集合，请在 app.grocery.html.

<span>
    {{tasks | json}}
</span>

在输入框中输入任务，然后按确定按钮。您将tasks在页面上将变量显示为 JSON。

使用Angular创建杂货清单管理器：添加和显示项目第3张

这是完整的app.grocery.ts文件：

import { Component } from '@angular/core';

@Component({
    selector: 'app-grocery',
	templateUrl: './app.grocery.html',
	styleUrls: [
        '../assets/css/bootstrap.min.css'
    ]
})

export class GroceryComponent {
  task: string;
  tasks = [];

  onClick(){
  	this.tasks.push({name: this.task});
  	this.task = '';
  }
}

显示添加的项目

现在，由于您在 tasks变量中添加了项目，您可以使用它来显示任务。您将使用该 NgFor指令来迭代tasks集合并动态创建用于显示任务的 HTML。您将在 UL 元素内显示任务并使用NgFor指令重复 LI。这是它的外观：

<ul class="list-group">
    <li *ngFor="let task of tasks" class="list-group-item">
        <span> {{ task.name }} </span>
    </li>
</ul>

如上面的代码所示，您遍历tasks变量并动态创建 LI 元素和 span。以下是完整app.grocery.html 模板文件的外观：

<div>
    <h2> Grocery list manager </h2>

    <div class="row">
        <div class="col-xs-6 col-md-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="enter grocery items" [(ngModel)]="task" />
                <div class="input-group-btn">
                    <button class="btn btn-primary" type="button" (click)="onClick()">
        <span class="glyphicon glyphicon-ok"></span>
        </button>
                </div>
            </div>
        </div>
    </div>

    <br />

    <ul class="list-group">
        <li *ngFor="let task of tasks" class="list-group-item">
            <span> {{ task.name }} </span>
        </li>
    </ul>

</div>

保存上述更改并重新启动服务器。将浏览器指向 http://localhost:4200/ 并输入任务并按OK按钮。每个添加的任务都将显示在下面的列表中。

使用Angular创建杂货清单管理器：添加和显示项目第4张