Argular 快速上手

作者: 麻辣阁 分类: Angular 发布时间: 2019-01-09 21:26

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

安装 Python2.7 并加到 path变量

安装时可能碰到类似如下错误:

An error occurred during the installation of assembly 
'Microsoft.VC90.CRT,version="9.0.21022.8",publicKeyToken="1fc8b3b9a1e18e3b",processorArchitecture="x86",type="win32".Please refer to Help and Suppor...

解决方案:控制面板→程序和功能→启用或关闭Windows功能 → 关闭.Net Framework 3.5这一项未→重启windows

安装 node.js 和 npm包管理器客户端

  • 访问 https://nodejs.org/en/安装 Node.js, 这里假定安装到了 C:\nodejs\
  • Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能,它们都是 npm 包. 。要下载和安装 npm 包,你必须拥有一个 npm 包管理器。在安装 Node.js 时就已经默认安装了npm 客户端命令行界面. 执行 npm -v 命令检查 npm是否已经安装好

安装 Angular CLI

要使用 Angular CLI 来创建项目、创建应用和库代码,并执行多种开发任务,比如测试、打包和发布。

使用 npm 来全局安装 Angular CLI:

npm install -g @angular/cli

如果速度比较慢, 可以用持久使用淘宝镜像:

(base) C:\>npm config set registry https://registry.npm.taobao.org

(base) C:\>npm config get registry
https://registry.npm.taobao.org/

创建工作空间和初始应用 angular-app

  • Angular 工作空间就是你开发应用的上下文环境。
  • 每个工作空间包含一些供一个或多个项目使用的文件。
  • 每个项目都是一组由应用、库或端到端(e2e)测试构成的文件。

运行 CLI 命令 ng new 创建工作空间和初始应用项目,并提供一个名字 angular-app,如下所示,Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟:

D:\>ng new angular-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]
  ? Which stylesheet format would you like to use? CSS
CREATE angular-app/angular.json (3813 bytes)
CREATE angular-app/package.json (1310 bytes)
CREATE angular-app/README.md (1027 bytes)
CREATE angular-app/tsconfig.json (435 bytes)
CREATE angular-app/tslint.json (2824 bytes)
CREATE angular-app/.editorconfig (246 bytes)
CREATE angular-app/.gitignore (587 bytes)
CREATE angular-app/src/favicon.ico (5430 bytes)
CREATE angular-app/src/index.html (297 bytes)
CREATE angular-app/src/main.ts (372 bytes)
CREATE angular-app/src/polyfills.ts (3571 bytes)
CREATE angular-app/src/test.ts (642 bytes)
CREATE angular-app/src/styles.css (80 bytes)
CREATE angular-app/src/browserslist (388 bytes)
CREATE angular-app/src/karma.conf.js (980 bytes)
CREATE angular-app/src/tsconfig.app.json (166 bytes)
CREATE angular-app/src/tsconfig.spec.json (256 bytes)
CREATE angular-app/src/tslint.json (314 bytes)
CREATE angular-app/src/assets/.gitkeep (0 bytes)
CREATE angular-app/src/environments/environment.prod.ts (51 bytes)
CREATE angular-app/src/environments/environment.ts (662 bytes)
CREATE angular-app/src/app/app-routing.module.ts (245 bytes)
CREATE angular-app/src/app/app.module.ts (393 bytes)
CREATE angular-app/src/app/app.component.html (1152 bytes)
CREATE angular-app/src/app/app.component.spec.ts (1110 bytes)
CREATE angular-app/src/app/app.component.ts (215 bytes)
CREATE angular-app/src/app/app.component.css (0 bytes)
CREATE angular-app/e2e/protractor.conf.js (752 bytes)
CREATE angular-app/e2e/tsconfig.e2e.json (213 bytes)
CREATE angular-app/e2e/src/app.e2e-spec.ts (303 bytes)
CREATE angular-app/e2e/src/app.po.ts (204 bytes)
[ .................] \ fetchMetadata: sill install loadAllDepsIntoIdealTree
npm WARN registry Using stale data from https://registry.npm.taobao.org/ because
 the host is inaccessible -- are you offline?
npm WARN registry Using stale package data from https://registry.npm.taobao.org/
 due to a request error during revalidation.
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, fl
atted is its successor.

> node-sass@4.10.0 install D:\angular-app\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.10.0/win32-x64-64_binding.node
Download complete  ] - :
Binary saved to D:\angular-app\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\yanglei\AppData\Roaming\npm-cache\node-sass\4.10.0\win32-x64-64_binding.node

> node-sass@4.10.0 postinstall D:\angular-app\node_modules\node-sass
> node scripts/build.js

Binary found at D:\angular-app\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1143 packages from 1182 contributors in 327.607s
'git' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

该命令还将创建下列工作空间和初始项目文件:

  • 一个新的工作空间,根目录名叫 angular-app
  • 一个初始的骨架应用项目,也叫 angular-app(但位于 src 子目录下)
  • 一个端到端测试项目(位于 e2e 子目录下)
  • 相关的配置文件

初始的应用项目是一个简单的 “欢迎” 应用,随时可以运行它。

启动开发服务器

Angular 包含一个开发服务器,以便你能轻易地在本地构建应用和启动开发服务器。

进入工作空间目录(my-app)。

使用 CLI 命令 ng serve 启动开发服务器,并带上 –open 选项。

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

D:\angular-app>ng server --open
The specified command ("server") is invalid. For a list of available options,
run "ng help".

Did you mean "serve"?

D:\angular-app>ng
Available Commands:
  add Adds support for an external library to your project.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular app.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.
  xi18n Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"

D:\angular-app>ng serve --open
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-01-09T14:27:49.481Z
Hash: 959255edcd863f426a56
Time: 12040ms
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.74 MB [initial] [rendered]
i 「wdm」: Compiled successfully.

编辑你的第一个 Angular 组件

组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。

作为初始应用的一部分,CLI 也会为你创建第一个 Angular 组件。它就是根组件,名叫 app-root。 ./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 = 'angular-app';
}

将 title 属性由 ‘angular-app’ 修改 ‘我的第一个 Angular 应用’, 这样就修改了网页的显示内容, 实际上你可以修改 app.component.html 中的内容模板, 比如将 Welcome to {{ title }}! 修改为 : 欢迎来到{{ title }}!, 显示的就全是中文了.

编辑 app.component.css, 添加如下CSS显示样式, 就可以改变显示文字的样式:

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

发表评论

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