【尝试参与】Angular从今天开始(Angular入门教程)

我试用了Angular,现在和大家分享一下。
即使是没有js框架经验的人,我也尝试了Angular官方教程。
<工作时间>
第一次:10分钟
第二次:3分钟

Angular教程
https://angular.jp/guide/quickstart

在这个教程中可以做的事情

スクリーンショット 2019-02-05 0.45.01.png

(1) 安装Angular CLI

确认Node的版本

node -v
//バージョン8.xまたは10.xが必要

在中国,将Angular全局安装

npm install -g @angular/cli

(2) 创建新项目

ローカルに新規フォルダを作成する。
↓↓↓
ng new my-app
//新しいワークスペースと初期アプリケーションプロジェクトを作成する
↓↓↓
Enterキーを押してデフォルト値を受ける

(3) 提供应用程序

cd my-app
//ワークスペースフォルダ(my-app)に移動
↓↓↓
ng serve --open
//--openオプションを付けてCLIコマンド ng serve を使用してサーバーを起動
↓↓↓
http://localhost:4200/
//ブラウザで開く
スクリーンショット 2019-02-05 0.27.52.png

(4)编辑Angular组件

用编辑器打开my-app文件夹

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

//1. src/app/app.component.tsを開く
//2. title プロパティを 'my-app'から 'My First Angular App'に変更

↓变更

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

在浏览器中查看
http://localhost:4200/

スクリーンショット 2019-02-05 0.40.38.png

使用CSS来修改h1的样式

h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
  }
スクリーンショット 2019-02-05 0.45.01.png

“入门”结束

我今天开始尝试 Angular(Angular 基础、英雄之旅教程)。

广告
将在 10 秒后关闭
bannerAds