本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容,打算在整个angular教程结束后再单独介绍。

0. 安装所需要的插件及配置插件

  1. 安装bootstrap

    进入项目目录,使用以下命令安装:

    cd media
    npm install bootstrap --save

    然后在angular.json配置文件中添加样式的引用。

    "styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]
  2. 安装jquery

    cd media
    npm install jquery --save

    在angular.json中引入jquery:

    "scripts": ["./node_modules/jquery/dist/jquery.min.js"]

1. angular中新建一个组件

现在我们在项目中新建一个名称为article的组件,由于手动创建组件比较麻烦,所以我们使用angular提供的angular cli工具来创建(手动创建的方法附在文末,不感兴趣的童鞋不用看),命令如下:

ng generate component article

也可使用命令的简写方式:

ng g c article

src/app目录下会多出一个article文件夹,里面angular cli工具帮我们创建的4个文件,article.component.css, article.component.html,article.component.spec.ts, article.component.ts。同时,还会更新ng.modules.ts这个文件。

2. 引用组件

在根组件的模板文件app.component.html中加入<app-article></app-article>即可引用我们刚刚新建的article组件,app.component.html代码:

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<!-- 下面是对article组件的引用 -->
<app-article></app-article>

显示效果如下:

表明我们的article组件引用成功。

3. 组件的嵌套引用

新建一个operator组件,然后在article组件中引入operator。article.component.html模板文件内容:

<p>
article works!
</p>
<!-- 引用operator组件 -->
<app-operator></app-operator>

页面刷新后显示如下:

引用关系如下: 根组件(app)引用了article,article又引用了operator.

4.组件选择器的其它定义方式

组件选择器的定义还可以通过属性和类的方法来定义,如下所示:

@Component({
//selector: 'app-article',
//selector: '[app-article]', //属性方式
selector: '.app-article',//类方式
templateUrl: './article.component.html',
styleUrls: ['./article.component.css']
})

则引用组件的方式也需要发生改变:

<!--属性方式来引用-->
<div app-article></div> <!--类方式引用-->
<div class="app-article"></div>

5. 数据模型定义以及数据绑定

将业务逻辑中的数据通过插值表达式显示在模板文件,即html页面上,或者将html页面上的事件传输到业务逻辑。

  1. 插值表达式

    首先我们在article页面上添加需要显示的内容:

    <p>
    本篇文章的ID是{{id}},标题是{{title}}
    </p>

    同时我们在article.component.ts中定义id和title。

    export class ArticleComponent implements OnInit {
    id:number = 1;
    title:string = "第一篇文章";
    }

    页面显示效果如下:

  2. 属性绑定

    在article.component.html中定义如下内容:

    文章ID:<input type="text" [value]="id" >
    文章标题:<input type="text" [value]="title">

    页面显示效果如下:

  3. 插值运算

    article.component.html代码:

    {{ 5 + 3}}, {{ "a" + "b"}}

    页面显示效果:

  4. 事件绑定

    article.component.ts中设置一个状态,然后新建一个函数供页面调用,在函数中改变这个状态。

    export class ArticleComponent implements OnInit {
    status = "隐藏状态";
    changeStatus(){
    this.status = "显示状态";
    }
    }

    article.component.html中定义一个按钮并绑定changeStatus()这个函数。

    {{status}}
    <button class="btn btn-info btn-sm" (click)="changeStatus()">改变状态</button>

    按钮单击前和单击后页面显示效果分别如下:

  5. 事件绑定传递数据

    现在我们实现当我们在input框中输入内容的时候,内容同时显示在输入框的下面,article.component.html文件内容:

    <input type="text" (keyup) = "updateContent($event)"><br>
    {{content}}

    article.component.ts中共定义变量以及函数:

    content = "";
    updateContent(event:any){
    this.content = event.target.value;
    }

    页面显示效果:

延伸阅读: 手动创建组件

  1. 组件创建

在app目录下新建一个文件夹,名字叫article.在article目录下新建article.componnent.ts的空白文件,注意文件名字的命名,article是组件名称,component表示类型,即组件,.ts则是文件的后缀名,文件内容如下所示:

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

@Component({
selector: 'app-article',
templateUrl:'./article.component.html'
}) export class ArticleComponent{ }

文件内容说明:

第一行从@angular/core中引入Component装饰器,然后建立一个普通的类ArticleComponent,并用@Component装饰它,在@Component中,分别定义组件的选择器名称和模板文件。

然后在article中新建模板文件article.component.html文件内容与普通html文件无异。

  1. 组件的注册

打开app目录下的app.modules.ts文件,文件内容如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

文件内容的说明:

  1. 上面import部分是模块以及装饰器的引入。
  2. declarations部分是声明模块的内部成员。
  3. imports部分是导入其它模块。
  4. providers指定应用程序根级别需要使用的service。
  5. bootstrap是app启动的根组件。
  6. export控制将那些内部成员暴露给外部使用。

修改文件内容,添加import {ArticleComponent} from './article/article.component';将模块引入,然后在declarations中添加ArticleComponent. 修改后的内容如下所示:

//...省略部分代码...
import { AppComponent } from './app.component';
import {ArticleComponent} from './article/article.component'; //step1 引入 @NgModule({
declarations: [
AppComponent,
ArticleComponent //step2 声明
]
})
//...省略部分代码...

Angular7教程-03-Angular常用操作(上)的更多相关文章

  1. python对redis的常用操作 上 (对列表、字符串、散列结构操作)

    这里的一切讨论均基于python的redis-py库. 安装使用: pip install redis 然后去获取一个redis客户端: redis_conn = redis.Redis(host=R ...

  2. Angular7教程-05-搭建项目环境

    1. 本节说明 本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍,项目使用前端框架是bootstrap.版本v3.3.7,另外需要安装jquery.关于bootstrap ...

  3. Angular7教程-06-页面与数据交互

    1. 本节说明 本节的内容会在上期搭建的框架基础上进行数据的填充,顺便回顾之前介绍过的插值表达式,属性绑定等知识,本节的数据只是在组件中模拟数据,后面会有专门的章节讲解如何从服务器获取数据. 2. 轮 ...

  4. Angular7教程-04-Angular常用操作(下)

    6. 数据双向绑定 视图和数据,只要一方发生变化,另一方跟着变化. 好处是不需要在代码中手动更新视图,简化开发,增加代码内聚性,代码可读性更强. 缺点是当绑定的数据层次深.数据量大时,会影响性能. 双 ...

  5. 屌炸天实战 MySQL 系列教程(二) 史上最屌、你不知道的数据库操作

    此篇写MySQL中最基础,也是最重要的操作! 第一篇:屌炸天实战 MySQL 系列教程(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:屌炸天实战 MySQL 系列教程(二) 史上最屌.你不 ...

  6. String 类上的常用操作

    java 中String 类上的常用操作: 首先创建对象  String line = new String("String demo"); String line2 = new ...

  7. 版本控制工具——Git常用操作(上)

    本文由云+社区发表 作者:工程师小熊 摘要:用了很久的Git和svn,由于总是眼高手低,没能静下心来写这些程序员日常开发最常用的知识点.现在准备开一个专题,专门来总结一下版本控制工具,让我们从git开 ...

  8. SFTP上传下载文件、文件夹常用操作

    SFTP上传下载文件.文件夹常用操作 1.查看上传下载目录lpwd 2.改变上传和下载的目录(例如D盘):lcd  d:/ 3.查看当前路径pwd 4.下载文件(例如我要将服务器上tomcat的日志文 ...

  9. ubuntu的学习教程(常用操作)

    摘要 最近在学习linux,把自己学习过程中遇到的常用操作以及一些有助于理解的内容记录下来.我主要用的是ubuntu系统 命令提示符 '~' 这个是指用户的家目录,用户分为root用户和普通用户,ro ...

随机推荐

  1. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  2. Difference between scipy.fftpack and numpy.fft

    scipy.fftpack 和 numpy.fft 的区别 When applying scipy.fftpack.rfft and numpy.fft.rfft I get the followin ...

  3. Python库安装注意事项

    由于一些python库依赖其它库或者其它组件,因此,在使用pip3命令安装python库的时候,经常会报错,告知缺失哪些组件. 但是, 开启VPN后,就没有再碰到类似错误,相关组件都是自动被安装. 因 ...

  4. EditView插入qq表情,可删除表情或文字

    代码如下: 代码如下: package com.push.notif; import java.lang.reflect.Field; import java.util.Random; import ...

  5. 浏览器缓存(Web Cache/ Http Cache)

    浏览器缓存(Web Cache/ Http Cache)是前端性能优化中很重要的组成部分. 缓存策略 浏览器的缓存策略是: 1.如果本地没有缓存,则发送非条件性请求. 2.如果本地有缓存,则判断本地缓 ...

  6. python 反射 动态导入模块 类attr属性

    1.反射 hasattr getattr delattr setattr 优点:事先定义好接口,接口只有在被完成后才能真正执行,这实现了即插即用,这其实是一种“后期绑定”,即先定义好接口, 然后是再去 ...

  7. 读取本地IP地址和子网页码

    #region 读取本地IP地址和子网页码 //读取本地IP地址和子网页码 NetworkInterface[] nics = NetworkInterface.GetAllNetworkInterf ...

  8. python字典的排序

    # -*- coding:UTF-8 -*- def dict_sort(): # 按照value的值从大到小的顺序进行排序 dic = {'a': 31, 'bc': 5, 'c': 3, 'asd ...

  9. ASP.net Substitution 页面缓存而部分不缓存的实现方法

    在ASP.NET中要实现部分内容非缓存,而其它的都需要缓存输出,可以使用Substitution控件实现. <%@ Page Language="C#" AutoEventW ...

  10. Java学习---Pinyin4j使用手册

    一般用法 pinyin4j的使用很方便,一般转换只需要使用PinyinHelper类的静态工具方法即可: String[] pinyin = PinyinHelper.toHanyuPinyinStr ...