第一个 Angular 项目 - 静态页面

第一个 Angular 项目 - 静态页面

之前的笔记：

  • [Angular 基础] - Angular 渲染过程 & 组件的创建

  • [Angular 基础] - 数据绑定(databinding)

  • [Angular 基础] - 指令(directives)

这是在学完了上面这三个内容后能够完成的项目，目前因为还没有学到数据在不同组件之前的传输，因此只会有一个 UI 的渲染，而不会涉及到事件的实现

业务需求

wireframe 如下：

在这里插入图片描述

简单的说起来就是当前页面需要包含一个 Header，一个部分列举出所有的食谱(recipe)，另外一个部分则列举出对应食谱的购物清单(shopping list)

虚线边框框起来的则是我认为的组件构成，将其转化成 Venn Diagram 则如下：

在这里插入图片描述

ingrident 和 recipe 为 Model，也就是 MVVM 中一直没讨论的部分(之前一直讨论的都是 VM 层和 V 层之间的互动)

根据需求也就可以开始下一步的实现了

创建项目

主要通过 bash 实现：

❯ ng new recipe-book --no-strict --standalone false --routing false
❯ cd recipe-book
# 在 angular.json 中配置对应的 bootstrap CSS 文件，第一篇笔记中有提
❯ npm i bootstrap@3
❯ ng g c header --skip-tests
❯ ng g c recipes --skip-tests
❯ ng g c recipes/recipe-list --skip-tests
❯ ng g c recipes/recipe-list/recipe-item --skip-tests
❯ ng g c shopping-list --skip-tests
❯ ng g c shopping-list/shopping-edit --skip-tests

# 这是当前目录的结构
❯ tree src/app/
src/app/
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── header
│   ├── header.component.css
│   ├── header.component.html
│   └── header.component.ts
├── recipes
│   ├── recipe-detail
│   │   ├── recipe-detail.component.css
│   │   ├── recipe-detail.component.html
│   │   └── recipe-detail.component.ts
│   ├── recipe-list
│   │   ├── recipe-item
│   │   │   ├── recipe-item.component.css
│   │   │   ├── recipe-item.component.html
│   │   │   └── recipe-item.component.ts
│   │   ├── recipe-list.component.css
│   │   ├── recipe-list.component.html
│   │   └── recipe-list.component.ts
│   ├── recipes.component.css
│   ├── recipes.component.html
│   └── recipes.component.ts
└── shopping-list
    ├── shopping-edit
    │   ├── shopping-edit.component.css
    │   ├── shopping-edit.component.html
    │   └── shopping-edit.component.ts
    ├── shopping-list.component.css
    ├── shopping-list.component.html
    └── shopping-list.component.ts

8 directories, 26 files

component 的创建主要则是根据上面提到的业务需求进行实现，目前还没有创建对应 Model 对应的文件

实现功能

这里会用 bootstrap 内置的 class 实施不少功能，而 bootstrap 的部分不会细谈，主要还是针对 Angular 的学习

添加骨架

修改的部分为这里的 V 层：

src/app/
├── app.component.html

修改内容如下：

<app-header></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <app-recipes></app-recipes>
      <app-shopping-list></app-shopping-list>
    </div>
  </div>
</div>

这里主要提供的是一个结构，并且展示三大组件：header, recipe 和 shopping list

header

修改的部分为这里的 V 层：

src/app/
├── header
│   ├── header.component.html

实现如下：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Recipe Book</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Recipes</a></li>
        <li><a href="#">Shopping List</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a
            href="#"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Manage <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Save Data</a></li>
            <li><a href="#">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

这里全都是 bootstrap 就不多赘述了，实现后效果如下：

在这里插入图片描述

recipe

recipe 部分的结构通过上面的文件结构也能看出来了，简化一下如下：

├── recipes
│   ├── recipe-detail
│   ├── recipe-list
│   │   ├── recipe-item
│   ├── recipe.model.ts # 即将创建的 model
recipes V 层

这个文件就是 recipes.component.html 这个文件，实现比较简单，只是导入 recipe-list 和当前选中的 recipe-detail：

<div class="row">
  <div class="col-md-5">
    <app-recipe-list></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipe-detail></app-recipe-detail>
  </div>
</div>

这个会让 recipe-list 和 recipe-detail 出现在同一行

接下来就可以处理细节了

recipe model

这里主要就是定义了 recipe 应该有的数据，实现如下：

export class Recipe {
  constructor(
    public name: string,
    public description: string,
    public imagePath: string
  ) {}
}

这代表着 Recipe 对象会有名字、描述和图片三个属性

recipe list VM 层

VM 层目前的逻辑也比较简单，它只需要存储一个 recipes 的数组，让 V 层可以渲染即可，代码如下：

import { Component } from '@angular/core';
import { Recipe } from '../recipe.model';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrl: './recipe-list.component.css',
})
export class RecipeListComponent {
  recipes: Recipe[] = [
    {
      name: 'Recipe 1',
      description: 'Description 1',
      imagePath: 'http://picsum.photos/200/200',
    },
    {
      name: 'Recipe 2',
      description: 'Description 2',
      imagePath: 'http://picsum.photos/200/200',
    },
  ];
}

这里没用 new Recipe() 创建也不会报错，本质上来说 TS 的类型检查是检查数据是否对的上，而不是真的会检查 a instanceof A，而是做 a 有 name, a 有 description, a 有 imagePath -> a 是 A ✅ 这样一个检查

⚠️：picsum.photos 是我在 placeimg.com 上找到的代替网站。placeimg.com 于去年年中正式关站了(🕯️)

recipe list V 层

这一层要做的也比较简单，主要就是跑一个 ngFor 去渲染当前 list 中包含的数据，并且正确的渲染 recipe.name, recipe.description 和 recipe.imagePath 即可，这里主要用到的还是 string interpolation 和 property binding

实现代码如下：

<div class="row">
  <div class="col-xs-12">
    <button class="btn btn-success">New Recipe</button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
      <div class="pull-left">
        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
        <p class="list-group-item-text">{{ recipe.description }}</p>
      </div>
      <span class="pull-right">
        <img
          [src]="recipe.imagePath"
          [alt]="recipe.name"
          class="image-responsive"
          style="max-height: 50px"
        />
      </span>
    </a>
  </div>

  <app-recipe-item></app-recipe-item>
</div>

完成后的效果：

在这里插入图片描述

⚠️：这里的 ngFor + 输出所有的数据在 ngFor 是因为还没有实现跨组件交流，否则直接在 ngFor 中渲染 app-recipe-item，并传递对应对象即可

recipe detail V 层

同样因为跨组件交流还没实现，目前只会渲染一个静态且不会动的 V 层：

<div class="row">
  <div class="col-sx-12">
    <img [src]="" [alt]="" class="img-responsive" style="max-height: 300px" />
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <h1>Recipe Name</h1>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle">
        Manage Recipe <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">To Shopping List</a></li>
        <li><a href="#">Edit Recipe</a></li>
        <li><a href="#">Delete Recipe</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sx-12">Description</div>
</div>

<div class="row">
  <div class="col-sx-12">Ingredients</div>
</div>

完成后效果：

在这里插入图片描述

至此 recipe 部分结束

shopping-list

shopping-list 的实现和 recipe 差不多，也是创建 model，随后填充 VM 层

ingredient model

这个 model 在的目录不太一样：

src/app/
├── shared
│   └── ingredient.model.ts

个人的话，大概便好创建一个新的 src/app/model 用来存放所有的 model 吧，不过这种有点看个人便好/项目规定了。实现如下：

export class Ingredient {
  constructor(public name: string, public amount: number) {}
}
shopping-list VM 层

这个和 recipe VM 层差不多，添加 Ingredient[] 即可

import { Component } from '@angular/core';
import { Ingredient } from '../shared/ingredient.model';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrl: './shopping-list.component.css',
})
export class ShoppingListComponent {
  ingredients: Ingredient[] = [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10),
  ];
}
shopping-list V 层

这里的实现也和上面 recipe list 的实现对应：

<div class="row">
  <div class="col-xs-10">
    <app-shopping-edit></app-shopping-edit>
    <hr />
    <ul class="list-group">
      <a
        class="list-group-item"
        style="cursor: pointer"
        *ngFor="let ingredient of ingredients"
      >
        {{ ingredient.name }} ({{ ingredient.amount }})
      </a>
    </ul>
  </div>
</div>

实现后效果如下：

在这里插入图片描述

shopping-list edit V 层

出于同样的原因，这里只有 V 层，实现如下：

<div class="row">
  <div class="col-xs-12">
    <form>
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Name</label>
          <input type="text" id="name" class="form-control" />
        </div>
        <div class="col-sm-2 form-group">
          <label for="amount">Amount</label>
          <input type="number" id="amount" class="form-control" />
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="btn-toolbar">
            <button class="btn btn-success mr-2" type="submit">Add</button>
            <button class="btn btn-danger mr-2" type="button">Delete</button>
            <button class="btn btn-primary" type="button">Edit</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

最终结果：

在这里插入图片描述

下个章节开始数据传输之类的，也就是让页面动起来的部分

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/378235.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【服务器数据恢复】HP EVA虚拟化磁盘阵列数据恢复原理方案

【服务器数据恢复】HP EVA虚拟化磁盘阵列数据恢复原理方案

EVA存储结构&原理&#xff1a; EVA是虚拟化存储&#xff0c;在工作过程中&#xff0c;EVA存储中的数据会不断地迁移&#xff0c;再加上运行在EVA上的应用都比较繁重&#xff0c;磁盘负载高&#xff0c;很容易出现故障。EVA是通过大量磁盘的冗余空间和故障后rss冗余磁盘动态…
阅读更多...
数据结构第十一天（栈）

数据结构第十一天（栈）

目录 前言 概述 源码&#xff1a; 主函数&#xff1a; 运行结果&#xff1a; ​编辑 前言 今天简单的实现了栈&#xff0c;主要还是指针操作&#xff0c;soeasy! 友友们如果想存储其他内容&#xff0c;只需修改结构体中的内容即可。 哈哈&#xff0c;要是感觉不错&…
阅读更多...
Python（21）正则表达式中的“元字符”

Python（21）正则表达式中的“元字符”

大家好&#xff01;我是码银&#x1f970; 欢迎关注&#x1f970;&#xff1a; CSDN&#xff1a;码银 公众号&#xff1a;码银学编程 获取资源&#xff1a;公众号回复“python资料” 在本篇文章中介绍的是正则表达式中一部分具有特殊意义的专用字符&#xff0c;也叫做“元…
阅读更多...
以“防方视角”观JS文件信息泄露

以“防方视角”观JS文件信息泄露

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 案例概述02 攻击路径03 防方思路 01 案例概述 这篇文章来自微信公众号“黑白之道”&#xff0c;记录的某师傅从js文件泄露接口信息&#xff0c;未授权获取大量敏感信息以及通过逻辑漏洞登录管理员账…
阅读更多...
2022年通信工程师初级 实务 真题

2022年通信工程师初级 实务 真题

文章目录 三、第3章 接入网&#xff0c;接入网的功能结构&#xff0c;无线频段及技术四、第4章 互联网&#xff0c;网络操作系统的功能&#xff0c;IP地址五、第6章 移动通信系统&#xff0c;FDD、TDD 三、第3章 接入网&#xff0c;接入网的功能结构&#xff0c;无线频段及技术…
阅读更多...
Redis篇之过期淘汰策略

Redis篇之过期淘汰策略

一、数据的过期策略 1.什么是过期策略 Redis对数据设置数据的有效时间&#xff0c;数据过期以后&#xff0c;就需要将数据从内存中删除掉。可以按照不同的规则进行删除&#xff0c;这种删除规则就被称之为数据的删除策略&#xff08;数据过期策略&#xff09;。 2.过期策略-惰…
阅读更多...
Web后端开发：登录认证案例

Web后端开发：登录认证案例

登录功能 需求分析 在登录界面中&#xff0c;输入用户的用户名以及密码&#xff0c;然后点击 “登录” &#xff0c;服务端判断用户输入的用户名和密码是否都正确。如果正确&#xff0c;则返回成功结果&#xff0c;前端跳转至系统首页面&#xff1b;否则报错&#xff0c;停留在…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ScrollBar组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ScrollBar组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之ScrollBar组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、ScrollBar组件 鸿蒙&#xff08;HarmonyOS&#xff09;滚动条组件ScrollBar&…
阅读更多...
Unity类银河恶魔城学习记录4-8 P61 Player‘s Counter Attack源代码

Unity类银河恶魔城学习记录4-8 P61 Player‘s Counter Attack源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic;…
阅读更多...
类和对象 第六部分第三小节：继承中的对象模型

类和对象 第六部分第三小节：继承中的对象模型

问题&#xff1a;从父类继承过来的成员&#xff0c;有哪些属于子类对象中 代码案例&#xff1a; #include<iostream> using namespace std; class Base { public:int m_A; protected:int m_B; private:int m_C; //私有成员只是被隐藏了&#xff0c;但是还是会继承下去 };…
阅读更多...
LeetCode Python - 3.无重复字符的最长子串

LeetCode Python - 3.无重复字符的最长子串

文章目录 题目答案运行结果 题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为 3。 示例 2: 输入: s “bbbbb” 输出: 1 解释:…
阅读更多...
[office] Excel自带的编辑函数求和方法 #其他#媒体

[office] Excel自带的编辑函数求和方法 #其他#媒体

Excel自带的编辑函数求和方法 今天小编为大家分享Excel自带的编辑函数求和方法&#xff0c;方法很简单的&#xff0c;对于不是很熟悉excel表格的朋友可以参考一下&#xff0c;希望能对大家有所帮助 很多同学以及上班族需要大量使用Excel这款表格编辑器&#xff0c;当表格中有大…
阅读更多...
使用SM4国密加密算法对Spring Boot项目数据库连接信息以及yaml文件配置属性进行加密配置（读取时自动解密）

使用SM4国密加密算法对Spring Boot项目数据库连接信息以及yaml文件配置属性进行加密配置（读取时自动解密）

一、前言 在业务系统开发过程中，我们必不可少的会使用数据库，在应用开发过程中，数据库连接信息往往都是以明文的方式配置到yaml配置文件中的，这样有密码泄露的风险，那么有没有什么方式可以避免呢？方案当然是有的，就是对数据库密码配置的时候进行加密，然后读取的时候再…
阅读更多...
MacOS 查AirPods 电量技巧：可实现低电量提醒、自动弹窗

MacOS 查AirPods 电量技巧：可实现低电量提醒、自动弹窗

要怎么透过macOS 来查询AirPods 电量呢&#xff1f;当AirPods 和Mac 配对后&#xff0c;有的朋友想通过Mac来查询AirPods有多少电量&#xff0c;这个里有几个技巧&#xff0c;下面我们来介绍一下。 透过Mac 查AirPods 电量技巧 技巧1. 利用状态列上音量功能查询 如要使用此功能…
阅读更多...
three.js 箭头ArrowHelper的实践应用

three.js 箭头ArrowHelper的实践应用

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div></div></el-main></…
阅读更多...
npm 上传一个自己的应用(4) 更新自己上传到NPM中的工具版本 并进行内容修改

npm 上传一个自己的应用(4) 更新自己上传到NPM中的工具版本 并进行内容修改

前面 npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM 我们讲了将自己写的一个函数发送到npm上 那么 如果我们想到更好的方案 希望对这个方法进行修改呢&#xff1f; 比如 我们这里加一个方法 首先 我们还是要登录npm npm login然后 根据要求填写 Username 用…
阅读更多...
1978-2022年地级市全要素生产率数据

1978-2022年地级市全要素生产率数据

1978-2022年地级市全要素生产率数据 1、时间&#xff1a;1978-2022年 2、来源&#xff1a;城市统计年鉴以及各省市的统计年鉴 3、指标&#xff1a;省份、地区、年份、OLS、FE、RE、DGMM、SGMM、SFA1、SFA2、SFA3、SFA3D、TFE、非参数法 4、范围&#xff1a;421地区 5、参考…
阅读更多...
【Linux】基于UDP协议的“聊天室”

【Linux】基于UDP协议的“聊天室”

目录 预备知识 基本思路 服务端设计 重要接口详解 服务端核心代码 服务端运行代码 客户端设计 预备知识 UDP协议&#xff08;User Datagram Protocal用户数据报协议&#xff09; 传输层协议无连接不可靠传输面向数据报 基本思路 如下是我们设计的一个简单的“聊天室…
阅读更多...
使用Arduino UNO硬件平台制作智能小车

使用Arduino UNO硬件平台制作智能小车

目录 概述 1. 硬件组成 1.1 电机驱动模块 1.2 控制板 1.3 遥控器模块 2 机械结构 2.1 底盘介绍 2.2 转向功能实现 3 软件实现 4 运行测试 4.1 红外解码测试 4.2 电机运行测试 概述 本文主要介绍使用整体结构小车底盘&#xff0c;外加Arduion控制板和LN298N控制板…
阅读更多...
【Linux】文件的软硬链接

【Linux】文件的软硬链接

文章目录 一、文件和目录的一些命令ls 命令stat 命令 二、链接的概念三、软链接&#xff08;symbolic link&#xff09;创建和删除软链接的示例软链接的特性软链接的应用使用 find 查找链接文件 四、硬链接&#xff08;hard link&#xff09;创建和删除硬链接的示例硬链接的特性…
阅读更多...
最新文章

Copyright @ 2022~2023