Angular 应用的外壳 原
你首先需要使用 Angular CLI 来创建一个初始化的应用。随后,你将对你已经初始化的应用进行修改来让你构建出 Tour of Heroes app(英雄指南) 这个应用。
在教程的本部分,你需要完成下面的操作:
- 设置的你的环境。
- 创建一个新的工作区(workspace)和初始化应用项目。
- 启动应用服务器。
- 对应用进行修改。
设置你的环境
希望对你的开发环境进行设置,请参考下面的链接中的指南:Getting started:
你不需要按照 Getting started 页面中说明的内容从头到尾的进行一次,你只需要完成上面提示的 2 个部分就可以将环境设置好了。
继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。
创建一个新工作区并且初始化应用
Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。 在本教程中,你将创建一个新的工作区。
希望创建一个新工作区并且初始一个应用项目,你需要:
- 确保你现在没有位于 Angular 工作区的文件夹中。例如,在前面的教程中,你已经创建了 Getting Started workspace(开始使用工作区),请回到上级目录中。
- 运行 CLI 命令
ng new
然后提供空间的名字angular-tour-of-heroes,
完整的命令如下显示:ng new angular-tour-of-heroes
-
ng new
命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。
Angular CLI 会安装必要的 Angular npm
包和其它依赖项。这可能需要几分钟。
它还会创建下列工作区和初始项目的文件:
- 新的工作区,其根目录名叫
angular-tour-of-heroes
。 - 一个最初的骨架应用项目,同样叫做
angular-tour-of-heroes
(位于src
子目录下)。 - 一个端到端测试项目(位于 e2e 子目录下)。
- 相关的配置文件。
初始应用项目是一个简单的 "欢迎" 应用,随时可以运行它。
启动应用服务器
进入工作区目录,并启动这个应用。
cd angular-tour-of-heroes
ng serve --open
ng serve
命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。
--open
标志会打开浏览器,并访问 http://localhost:4200/
。
你会发现,这个应用已经启动了,并且可以通过浏览器进行访问了。
Angular 组件
你所看到的这个页面就是application shell(应用的外壳)。 这个外壳是被一个名叫 AppComponent
的 Angular 组件(component)控制的。
Components(组件) 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。
对应用进行修改
用你喜欢的编辑器或 IDE 打开这个项目,并访问 src/app
目录,来对这个起始应用做一些修改。
你会在这里看到 AppComponent
外壳的三个实现文件:
-
app.component.ts
— 组件的类代码,这是用 TypeScript 写的。 -
app.component.html
— 组件的模板,这是用 HTML 写的。 -
app.component.css
— 组件的私有 CSS 样式。
修改应用的标题
打开组件的类文件 (app.component.ts
),并把 title
属性的值修改为 'Tour of Heroes' (英雄指南)。
title = 'Tour of Heroes';
打开组件的模板文件 app.component.html
并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容:
<h1>{{title}}</h1>
双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title
属性的值绑定到 HTML 中的 h1
标记
浏览器自动刷新,并且显示出了新的应用标题。
添加应用样式
大多数应用都会努力让整个应用保持一致的外观。 因此,CLI 会生成一个空白的 styles.css
文件。 你可以把全应用级别的样式放进去。
打开 src/styles.css
并把下列代码添加到此文件中。
/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[type="text"], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; } |
---|
查看最终代码
本教程的源文件以及英雄指南的完整全局样式可以在 在线例子 / 下载范例 中看到。
下面是本页所提到的源代码:
src/app/app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; } |
---|
src/app/app.component.html
<h1>{{title}}</h1> |
---|
src/styles.css
/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[type="text"], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; } |
---|
小结
- 你使用 Angular CLI 创建了初始的应用结构。
- 你学会了使用 Angular 组件来显示数据。
- 你使用双花括号插值表达式显示了应用标题。
https://www.cwiki.us/display/AngularZH/The+Application+Shell
- 在Linux系统运行WinForm程序
- 将ZIP文件添加到程序集资源文件然后在运行时解压文件
- Android中App安装位置详解
- Java面试题系列之基础部分(二)——每天学5个问题
- Java面试题系列之基础部分(四)——每天学5个问题
- 使用ORM框架,必须迁就数据库的设计吗?
- 使用OQL+SQLMAP解决ORM多表复杂的查询问题
- PostgreSQL的.NET驱动程序Npgsql中参数对象的一个Bug
- 和Emoji相关的那些开源项目
- PostgreSQL的PDF.NET驱动程序构建过程
- 基于Docker的PHP开发环境
- 以太坊·物流场景初探
- Python接口自动化-3-POST请求
- 【Python环境】Python中的结构化数据分析利器-Pandas简介
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 口算训练 HDU - 6287
- Codeforces Round #674 (Div. 3) A ~ F 详细讲解
- C# 生成chart图表的三种方式
- C# Task.Run调用外部参数
- Git全方位指南,即用即查就可
- Python入门教程笔记(二)控制语句
- Python入门教程笔记(一)简介、变量及基本数据类型
- C#知识点讲解之C#delegate、event、Action、EventHandler的使用和区别
- typescript高级用法之infer的理解与使用
- 基于业务场景下的图片/文件上传方案总结
- LeetCode96|二叉搜索树中的搜索
- LeetCode95|字符串中的第一个唯一字符
- LeetCode94|Pow(x,n)
- LeetCode93|数值的整数次方
- LeetCode92|排序数组