【尝试参与】Angular从今天开始(Angular入门教程)
我试用了Angular,现在和大家分享一下。
即使是没有js框架经验的人,我也尝试了Angular官方教程。
<工作时间>
第一次:10分钟
第二次:3分钟
Angular教程
https://angular.jp/guide/quickstart
在这个教程中可以做的事情

(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/
//ブラウザで開く

(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/

使用CSS来修改h1的样式
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}

“入门”结束
我今天开始尝试 Angular(Angular 基础、英雄之旅教程)。