一、安装开发环境

npm install -g typescript
npm install -g @angular/cli

二、创建hello-world项目

创建项目

ng new angular2-hello-world

查看新建项目的目录结构

cd angular2-hello-world
sudo apt install tree
tree -F -L 1
.
├── angular.json
├── karma.conf.js
├── node_modules/
├── package.json
├── package-lock.json
├── README.md
├── src/
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json 2 directories, 8 files

查看src目录里的结构

cd src
tree -F

启动应用,可以在http://localhost:4200查看运行结果

ng serve

创建hello-world组件

ng-generate component hello-world

在hello-world.component.ts中定义新的组件

//导入依赖
import { Component, OnInit } from '@angular/core'; //通过注解声明控件的选择器和相关的文件url
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
}) //组件的数据模型
export class HelloWorldComponent implements OnInit { constructor() { } ngOnInit(): void {
} }

在hello-world.component.html中定义模板

<p>mango, hello-world works!</p>

为了使用新增加的组件,我们把标签添加到app.component.html中。

<h1>
<app-hello-world></app-hello-world>
</h1>

执行 ng serve查看执行效果

三、创建展示用户的user-item指令

生成指令组件

mango@mango:~/angular2-hello-world$ ng generate component user-item
CREATE src/app/user-item/user-item.component.css (0 bytes)
CREATE src/app/user-item/user-item.component.html (24 bytes)
CREATE src/app/user-item/user-item.component.spec.ts (641 bytes)
CREATE src/app/user-item/user-item.component.ts (286 bytes)
UPDATE src/app/app.module.ts (585 bytes)

为组件声明并初始化一个name字段

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

@Component({
selector: 'app-user-item',
templateUrl: './user-item.component.html',
styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
name: string, constructor() {
this.name = 'mango';
} ngOnInit(): void {
} }

在模板中显示变量name的值

<p>
{{name}} welcome into Angular world.
</p>

将app-user-item添加到app.component.html中,查看浏览器执行结果。

四、创建用户列表user-list指令

创建新组件

mango@mango:~/angular2-hello-world$ ng generate component user-list
CREATE src/app/user-list/user-list.component.css (0 bytes)
CREATE src/app/user-list/user-list.component.html (24 bytes)
CREATE src/app/user-list/user-list.component.spec.ts (641 bytes)
CREATE src/app/user-list/user-list.component.ts (286 bytes)
UPDATE src/app/app.module.ts (677 bytes)

在组件中声明并初始化names数组

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

@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
names: string[];
constructor() {
this.names = ['mango', 'pear', 'grap', 'apple'];
} ngOnInit(): void {
} }

在组件的模板中递归遍历names数组

<ul>
<li *ngFor="let name of names">Hello {{name}}</li>
</ul>

将组件添加app.component.html中,查看浏览器执行结果。

五、组合使用user-item和user-list

修改user-item的name参数使用外部输入

import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'app-user-item',
templateUrl: './user-item.component.html',
styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
@Input()
name!: string; constructor() { } ngOnInit(): void {
} }

修改user-list的模板

<ul>
<app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>

保存查看浏览器执行情况。

六、启动过程分析

ng会首先从angular.json中查找程序的main入口为src/main.ts

{
"outputPath": "dist/angular2-hello-world",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}

查看main.ts文件,发现启动的Module是AppModule,位于app/app.module.ts中

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; if (environment.production) {
enableProdMode();
} platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

在app.module.ts中可以看到,通过NgModule标注声明了本模块中的组件以及依赖的外部Module及作为顶层组件启动的AppComponent;

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

Angular环境搭建及简单体验的更多相关文章

  1. android Jni NDK开发环境搭建及其简单实例的编写

    android  Jni  NDK开发环境搭建及其简单实例的编写 由于工作需要,需要采用开发想要的JNI,由于之前没有接触过安卓的开发,所以更加网上的帖子,学习了下.遇到了些问题,然后总结下学习过程中 ...

  2. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

  3. Django开发web环境搭建的简单方法(CentOS6.5环境)

    这几天跟Linux下的Python + Django环境搭建卯上了.经过几天的琢磨,找到了一条自己认为给力的路径. 这里给出命令行,过程如下: 首次登陆,切换管理员: [web@bogon ~]$ s ...

  4. 【SSH】 之 Struts2环境搭建及简单应用开发

    在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要 ...

  5. Maven仓库—Nexus环境搭建及简单介绍

    1.    环境搭建 1.1  下载 http://www.sonatype.org/nexus/ NEXUS OSS [OSS = Open Source Software,开源软件--免费] NE ...

  6. robot framework环境搭建和简单示例

    环境搭建 因为我的本机已经安装了python.selenium.pip等,所以还需安装以下程序 1.安装wxPythonhttp://downloads.sourceforge.net/wxpytho ...

  7. Maven仓库-Nexus环境搭建及简单介绍

    1.    环境搭建 1.1  下载 http://www.sonatype.org/nexus/ NEXUS OSS [OSS = Open Source Software,开源软件——免费] NE ...

  8. Angular环境搭建

    Angular4 随笔(一)----环境搭建 1.下载node.js 第一步:在浏览器中搜索node.js官网(https://nodejs.org/zh-cn/),根据自己系统下载相应版本,下载完成 ...

  9. Java Web开发SpringMVC和MyBatis框架开发环境搭建和简单有用

    1.下载SpringMVC框架架包,下载地址: 点击下载 点击打开地址如图所看到的.点击下载就可以 然后把相关的jar拷贝到lib下导入 2.MyBatis(3.4.2)下载 X-Amz-Algori ...

随机推荐

  1. prometheus入门介绍及相关组件、原理讲解

    1:介绍 Prometheus 是由 SoundCloud 开源监控告警解决方案. prometheus是由谷歌研发的一款开源的监控软件,目前已经被云计算本地基金会托管,是继k8s托管的第二个项目. ...

  2. Java on Visual Studio Code的更新 – 2021年3月

    欢迎来到Java的VS Code更新.在过去的几个月中,我们的工程师一直在专注于一些非常重要的工作.现在,是时候揭开面纱了,开始吧. 类型层次结构(Type hierarchy) VS Code已经支 ...

  3. JAVAEE_Servlet_01_Servlet基础概念

    Servlet 基础概念 Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间 ...

  4. Day17_100_IO_FileWriter文件字符输入流

    FileWriter文件字符输入流 继承结构 Java.lang.Object - java.io.Writer; 抽象类 java.io.OutputStreamWriter; <转换流: 将 ...

  5. Salesforce 集成篇零基础学习(一)Connected App

    本篇参考: https://zhuanlan.zhihu.com/p/89020647 https://trailhead.salesforce.com/content/learn/modules/c ...

  6. Python脚本破解压缩文件口令(zipfile)

    环境:Windows python版本2.7.15 Python中操作zip压缩文件的模块是 zipfile . 相关文章:Python中zipfile压缩文件模块的使用 我们破解压缩文件的口令也是用 ...

  7. XML / HTML / XHTML 的区别

    目录 HTML XML XHTML HTML HTML(HyperText Markup Language):超文本标记语言,是一种用于创建网页的标准标记语言,是用来格式化并显示数据的 用HTML语法 ...

  8. Securecrt 在win7下 字体太少问题

    用WIN7,觉得securecrt里面可用的字体太少了.很多都没有,比如lucida console,经过一番查找,终于找到解决问题的方法了. 原因就是win7里面的很多字体都被设置为隐藏了,所以se ...

  9. (9)MySQL进阶篇SQL优化(InnoDB锁-记录锁)

    1.概述 InnoDB行锁是通过给索引上的索引项加锁来实现的,这一点MySQL与Oracle不同,后者是通过在数据块中对相应数据行加锁来实现的.InnoDB这种行锁实现特点意味着:只有通过索引条件检索 ...

  10. [re模块、json&pickle模块]

    [re模块.json&pickle模块] re模块 什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则 ...