学习Angular入门

你的第一个 Angular 应用

只需几行 TypeScript 即可创建您的第一个 Angular 应用程序。随着应用的增长，可以将标记和代码分离到不同的文件中。

为组件提供一个将计数器设置回 0 的复位按钮，请执行以下操作：

1. 在代码编辑器的值中，在以 开头的行后面添加此行。template<button (click)=

   
   content_copy<button (click)="count = 0">Reset</button>

   进行此更改后，定义应如下所示：template

   
   content_copytemplate: // the component's markup
   `
    <button (click)="count = count + 1">Add one</button> {{ count }}
    <button (click)="count = 0">Reset </button>
   `,

2. 单击“添加一个”几次，然后单击“重置”。计数器值应返回为零。

3. 新行将添加一个新元素。当该事件发生在按钮中时，双引号中的 TypeScript 代码会将该属性设置为 。<button>clickcount0

   您还可以向新组件添加样式。

4. 在代码编辑器中，在值之后和 以 开头的行之前，添加此代码，使按钮具有粗体文本和圆角。selectorstandalone

   
   content_copystyles: [
     'button { font-weight: bold; border-radius: 8px;}'
   ],

5. 这样就完成了第一个Angluar的创建
6. 前端的快速导出
7. 使用Bootstrap Studio快速导出前端页面
8. 可以在编辑页面编辑自己想要的页面样式