Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0319bf1

Browse files
committed
completed 用户编辑器
1 parent0ad1eee commit0319bf1

File tree

49 files changed

+11841
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+11841
-3
lines changed

‎SUMMARY.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
*[Angular 介绍](docs/about-angular.md)
44
*[Angular 开发环境搭建](docs/ide.md)
55
*[快速开启第一个 Angular 应用](docs/quick-start.md)
6+
*[用户管理](docs/user-management.md)
7+
*[修改 AppComponent 组件](docs/edit-app-component.md)
8+
*[用户编辑器](docs/user-editor.md)
69
*[参考资料](docs/references.md)
710
* To be continued ...未完待续...
811

‎docs/edit-app-component.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
#修改 AppComponent 组件
2+
3+
通过本节，你将学会了使用 Angular 组件来显示数据，并使用双花括号插值表达式显示了应用标题。
4+
5+
##修改 app.component.ts
6+
7+
修改 src/app/app.component.ts 文件
8+
9+
10+
将 title 修改如下：
11+
12+
```ts
13+
title='User Management（用户管理）';
14+
```
15+
16+
完整的 app.component.ts 代码如下：
17+
18+
19+
```ts
20+
import {Component }from'@angular/core';
21+
22+
@Component({
23+
selector:'app-root',
24+
templateUrl:'./app.component.html',
25+
styleUrls: ['./app.component.css']
26+
})
27+
exportclassAppComponent {
28+
title='User Management（用户管理）';
29+
}
30+
```
31+
32+
##修改 app.component.html
33+
34+
35+
打开组件的模板文件 src/app/app.component.html 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：
36+
37+
```html
38+
<h1>{{title}}</h1>
39+
```
40+
41+
双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。
42+
43+
浏览器自动刷新，并且显示出了新的应用标题。
44+
45+
46+
![](../images/edit-app-component/title.jpg)
47+
48+
49+
50+
51+
##添加应用样式
52+
53+
大多数应用都会努力让整个应用保持一致的外观。 因此，CLI 会生成一个空白的 styles.css 文件。 你可以把全应用级别的样式放进去。
54+
55+
打开 src/styles.css 文件，编写如下内容。这些样式都是 Angular 团队推荐的默认样式。
56+
57+
```css
58+
/* Application-wide Styles*/
59+
h1 {
60+
color:#369;
61+
font-family:Arial,Helvetica,sans-serif;
62+
font-size:250%;
63+
}
64+
h2,h3 {
65+
color:#444;
66+
font-family:Arial,Helvetica,sans-serif;
67+
font-weight:lighter;
68+
}
69+
body {
70+
margin:2em;
71+
}
72+
body,input[text],button {
73+
color:#888;
74+
font-family: Cambria,Georgia;
75+
}
76+
/* everywhere else*/
77+
* {
78+
font-family:Arial,Helvetica,sans-serif;
79+
}
80+
```
81+
82+
此时 app.component.html 便有了新样式，立马变得美观了许多：
83+
84+
![](../images/edit-app-component/style.jpg)

‎docs/explore-angular.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
src目录结构如下：
1212

13-
```
13+
```ts
1414
src
1515
│browserslist
1616
│favicon.ico
@@ -63,7 +63,7 @@ tslint.json | 额外的 Linting 配置。当运行 ng lint 时，它会供带有
6363

6464
src/ 文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和 src/ 平级。
6565

66-
```
66+
```ts
6767
D:.
6868
│ .editorconfig
6969
│ .gitignore

‎docs/quick-start.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ npm WARN tar ENOENT: no such file or directory, open 'D:\workspaceGithub\angular
6060

6161
执行以下命令，来启动应用。
6262

63-
```
63+
```ts
6464
cdhello-world
6565
ngserve--open
6666
```

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp