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 */ h 1 { color : #369 ; font-family : Arial , Helvetica , sans-serif ; font-size : 250% ; } h 2 , h 3 { 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 */ h 1 { color : #369 ; font-family : Arial , Helvetica , sans-serif ; font-size : 250% ; } h 2 , h 3 { 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
Angular 应用的外壳的更多相关文章
- 基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
- Angular记录(4)
文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...
- Angular记录(3)
文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...
- angular组件层次与军事指挥层级职责的联系
又继续读angular文档,发现自己之前理解还是有误.按官方文档的思路service不是属于component的,是属于module的.module才是负责完整领域逻辑的单位.demo的英雄编辑器给我 ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
- 升级 AngularJS 至 Angular
Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...
- angular官网实例(综合)
第一部分: (应用的“外壳”) 1.新建项目: ng new mytest 2.进入项目目录,并启动这个应用. cd mytest ng serve --open 3.添加一个标题 打开 app.co ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
随机推荐
- PostgreSQL unlogged表
PostgreSQL有一种介于正常表和临时表之间的类型表,称之为unlogged表,在该表新建的索引也属于unlogged,该表在写入数据时候并不将数据写入到持久的write-ahead log文件中 ...
- 什么是数据传输服务DTS
数据传输服务(Data Transmission Service) DTS支持关系型数据库.NoSQL.大数据(OLAP)等数据源间的数据传输. 它是一种集数据迁移.数据订阅及数据实时同步于一体的数据 ...
- selenium与页面交互
selenium提供了许多API方法与页面进行交互,如点击.键盘输入.打开关闭网页.输入文字等. 一.webdriver对浏览器提供了很多属性来对浏览器进行操作,常用的如图: get(url).qui ...
- Linux-1.5日志查看常用命令
常访问的日志目录:\data\log\(message系统 | secure安全 | maillog邮件) 进入日志目录 find \d1\data\log -name '*log' 在目录下查找以l ...
- qt webengineview 加载本地资源方式
一.如果把资源添加到本地资源qrc库里了,请使用 ui->preview->setUrl(QUrl("qrc:/HelloWorld2.html")): 二.如果没有现 ...
- QT多线程同步之QWaitcondition
使用到多线程,无可避免的会遇到同步问题,qt提供几种同步线程的方法,在这里讲一下QWaitcondition的简单使用. 一.QWaitcondition,是通过一个线程达到某种条件来唤起另一个线程来 ...
- 07 MySQL之索引原理
一.介绍 为什么有索引:使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构. 作用: 1. 快速查询数据 2. 保证数据的唯一性 3 ...
- Spring Cloud,Docker
Spring Cloud 先决条件 Spring cloud 基于spring boot,spring,java Spring Cloud解决的问题 分布式微服务架构和微服务监控.注册于发现.跟踪等一 ...
- SecureCRT 连接 Centos7.0 (NAT模式),且能连接公网。
1.打开物理主机运行-输入cmd,输入ipconfig,获取物理主机ip地址. ip:192.168.11.138 2.点击网络适配器,选择NAT模式. 3.点击Centos界面左上角-编辑-虚拟网络 ...
- 3.(基础)tornado的接口调用顺序与模板
上一节介绍了tornado的请求与响应,这一节介绍tornado的接口调用顺序和模板 首先都有哪些接口呢?作用是什么呢?并且都有的时候,执行顺序是怎么样的呢? 接口 1.initialize,表示初始 ...