使用Angular创建杂货店列表管理器，第1部分：添加和显示项目

最新推荐文章于 2024-10-10 18:18:43 发布

cunjie3951

最新推荐文章于 2024-10-10 18:18:43 发布

阅读量142

点赞数

文章标签： vue python java html js ViewUI

Angular应用程序由组件组成。在Angular应用程序中，组件由HTML模板和组件类组成。从官方文档：

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

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

入门

您需要Node version> 6.9.x和Node Package Manager（npm）>3.xx。一旦拥有两者，请尝试使用npm安装Angular CLI。

npm install -g @angular/cli

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

ng new AngularGrocery --skip-npm

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

cd AngularGrocery
npm install

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

ng serve

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

应用结构

上图显示了我们的杂货清单管理器的应用程序结构。 src文件夹包含默认应用程序的源代码。 src文件夹内的app文件夹包含TypeScript代码。 src文件夹中的index.html是呈现所创建的Angular组件的主要HTML文件。

创建添加项目视图

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

从angular-core导入Component模块。

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的模板。在src/app文件夹中创建一个名为app.grocery.html的文件。将以下代码添加到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';

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

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

现在，您都可以使用index.html页面中的Grocery组件。从index.html页面中删除默认组件，并添加以下HTML代码：

<app-grocery>Loading...</app-grocery>

保存以上更改，然后重新启动服务器。将浏览器导航到http：// localhost：4200 / ，将显示Grocery组件。

添加项目

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

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

每次在输入文本框中输入一些文本时， task变量都会相应更新。定义task的内部变量GroceryComponent在app.grocery.ts文件。添加一个名为tasks的变量，以保留输入的任务集合。

task: string;
  tasks = [];

单击“确定”按钮后，该任务将被添加到您在GroceryComponent内部定义的tasks集合列表中。在GroceryComponent内定义一个onClick方法以处理OK按钮的单击。外观如下：

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

将点击事件添加到“确定”按钮，如下所示：

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

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

保存以上更改，并在输入task并单击“确定”按钮后，将该任务添加到tasks集合中。要显示任务集合，请在app.grocery.html添加一个跨度。

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

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

这是完整的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元素和跨度。完整的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 /并输入任务，然后按确定按钮。每个添加的任务将显示在下面的列表中。