Angular 快速上手

作者: 麻辣阁 分类: Angular 发布时间: 2019-02-11 22:25

参考: https://angular.cn/guide/quickstart

全局安装 Angular CLI

npm install -g @angular/cli

这样一般会安装最新版本的 Angular

创建工作空间和初始应用骨架

这样会创建 Angular 版本对应的配置文件.

Y:\>ng new my-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  Sass   [ http://sass-lang.com   ]
  Less   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

  ......
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1113 packages from 1025 contributors and audited 41386 packages in 258.672s
found 0 vulnerabilities

这里假定安装的是Angular7版本, 创建新项目时会询问如下的问题, 这里示例选择如下:

  • Would you like to add Angular routing? Yes
  • Which stylesheet format would you like to use? (Use arrow keys) CSS

ng new my-app命令会:

  • 创建my-app根目录, 对应一个新的工作空间, 即开发应用的上下文,内部可以有多个应用项目
  • 一个骨架应用项目src/app
  • 一个端到端测试项目, 位于子目录 e2e 下
  • 一堆配置文件

开启开发服务器

cd my-app
ng serve -o
  • ng serve 命令会自动开发服务器,并监视你的文件变化,当你修改这些文件时,它就会重新构建应用。
  • --open(或只用 -o)选项会自动打开浏览器,并访问 http://localhost:4200/。

初始应用展示了三个可参考的链接:

编辑一个组件

  • 组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。
  • CLI 会自动创建根组件,对应的元素选择器为 app-root, 其定义在 src/app/app.component.ts中
  • html文件定义组件的模板
  • css文件定义组件的私有样式
  • app.component.ts 文件时组件的类代码,这是用 TypeScript 写的, 可以定义组件的属性和方法

示例的最终代码

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 = 'my-app';   //组件属性, 在HTML中调用
  title = "我的第一个 Angular 应用";
}

src/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

app.component.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注