Angular学习笔记一

官方的范例运行效果：https://embed.plnkr.co/?show=preview

项目初创建时，文件结构如下：

angular-tour-of-heroes
...src   //文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。
......app
.........app.component.ts   //app.component.{ts,html,css,spec.ts} => 使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
.........app.component.html
.........app.component.css
.........app.module.ts   //定义AppModule，这个根模块会告诉Angular如何组装该应用。 目前，它只声明了AppComponent。 稍后它还会声明更多组件。
.........app.component.spec.ts
......assets   //这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
..........gitkeep
......environments   //为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。
.........environment.prod.ts
.........environment.ts
......favicon.ico   //每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
......main.ts   //这是应用的主要入口点。 使用JIT compiler编译器编译本应用，并启动应用的根模块AppModule，使其运行在浏览器中。
......index.html   //这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。
......styles.css   //这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
......polyfills.ts   //不同的浏览器对Web标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。 你只要使用core-js 和 zone.js通常就够了
......test.ts   //这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
......systemjs.config.js
......tsconfig.json   //tsconfig.{app|spec} TypeScript编译器的配置文件。tsconfig.app.json是为Angular应用准备的，而tsconfig.spec.json是为单元测试准备的。
......node_modules 
......package.json
/** 备注：这里记录了主要的文件概况，还有更多关于项目结构的更多用途信息，可以查看官方文档，更详细：https://angular.cn/guide/quickstart#项目文件概览 */

步骤一： 显示英雄

向 AppComponent 组件添加两个属性，title  属性表示应用的名字，hero 属性表示名叫 "windstorm"的英雄。

app.component.ts (AppComponent class) 

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

app.component.html 

/** 这里的双大括号是Angular中的插值表达式绑定语法。它们表示组件的title和hero属性的值会作为字符串插入到HTML标签中间。*/
<h1>{{title}}</h1><h2>{{hero}} details!</h2>

刷新浏览器可以看到，成功显示了应用标题和英雄名称，现在，给这个英雄创建一个对象，让他拥有更多属性。

src/app/app.component.ts (Hero class) 

export class Hero {
  id: number;
  name: string;
}

把组件hero属性的类型换成Hero。 然后以1为 id、以 “Windstorm” 为名字，初始化它。

src/app/app.component.ts (hero property) 

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

更新模板中的绑定表达式，来引用hero的name属性。

app.component.html 

<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>

//使用多行模版字符串添加更多html
<h1>{{title}}</h1> 
<h2>{{hero.name}} details!</h2> 
<div><label>id: </label>{{hero.id}}</div> 
<div><label>name: </label>{{hero.name}}</div>

步骤二：编辑英雄名字

添加一个 <input>输入框，让用户可以输入英雄名字，可以实现这个输入框同时显示和修改英雄的name属性，也就是说，我们要在表单元素<input>和组件的hero.name属性之间建立双向绑定。

双向绑定需要用到 [(ngModel)] Angular语法，用与把hero.name绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。

app.component.html 

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

注意！虽然NgModel是一个有效的Angular指令，但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择先导入。

app.module.ts (FormsModule import) 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

完整的代码如下：

=> app.component.ts
---------------------------------------------------------
import { Component } from '@angular/core';
 
export class Hero {
  id: number;
  name: string;
}
 
@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

=> app.component.html
--------------------------------------------------------
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>

 

Thank for your time !

 

转载于:https://www.cnblogs.com/bbm7/p/7423317.html