zoukankan      html  css  js  c++  java
  • Angular 应用的外壳

    你首先需要使用 Angular CLI 来创建一个初始化的应用。随后,你将对你已经初始化的应用进行修改来让你构建出 Tour of Heroes app(英雄指南) 这个应用。

    在教程的本部分,你需要完成下面的操作:

    1. 设置的你的环境。
    2. 创建一个新的工作区(workspace)和初始化应用项目。
    3. 启动应用服务器。
    4. 对应用进行修改。

    设置你的环境

    希望对你的开发环境进行设置,请参考下面的链接中的指南:Getting started

    你不需要按照 Getting started 页面中说明的内容从头到尾的进行一次,你只需要完成上面提示的 2 个部分就可以将环境设置好了。

    继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。

    创建一个新工作区并且初始化应用

    Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。 在本教程中,你将创建一个新的工作区。

    希望创建一个新工作区并且初始一个应用项目,你需要:

    1. 确保你现在没有位于 Angular 工作区的文件夹中。例如,在前面的教程中,你已经创建了 Getting Started workspace(开始使用工作区),请回到上级目录中。
    2. 运行 CLI 命令  ng new 然后提供空间的名字  angular-tour-of-heroes, 完整的命令如下显示:
      ng new angular-tour-of-heroes
    3. 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 外壳的三个实现文件:

    1. app.component.ts— 组件的类代码,这是用 TypeScript 写的。
    2. app.component.html— 组件的模板,这是用 HTML 写的。
    3. 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-familyArialHelveticasans-serif;
      font-size250%;
    }
    h2, h3 {
      color#444;
      font-familyArialHelveticasans-serif;
      font-weightlighter;
    }
    body {
      margin2em;
    }
    body, input[type="text"], button {
      color#888;
      font-family: Cambria, Georgia;
    }
    /* everywhere else */
    * {
      font-familyArialHelveticasans-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-familyArialHelveticasans-serif;
      font-size250%;
    }
    h2, h3 {
      color#444;
      font-familyArialHelveticasans-serif;
      font-weightlighter;
    }
    body {
      margin2em;
    }
    body, input[type="text"], button {
      color#888;
      font-family: Cambria, Georgia;
    }
    /* everywhere else */
    * {
      font-familyArialHelveticasans-serif;
    }

    小结

    • 你使用 Angular CLI 创建了初始的应用结构。
    • 你学会了使用 Angular 组件来显示数据。
    • 你使用双花括号插值表达式显示了应用标题。

    https://www.cwiki.us/display/AngularZH/The+Application+Shell

  • 相关阅读:
    Zepto源码分析-event模块
    Zepto源码分析-callbacks模块
    Zepto源码分析-zepto模块
    Zepto源码分析-架构
    HTML5标签
    前端微信分享
    .net core 2.x
    .net core 2.x
    .net core 2.x
    .net core 2.x
  • 原文地址:https://www.cnblogs.com/huyuchengus/p/10903631.html
Copyright © 2011-2022 走看看