Angular学习-基础知识

Angular

是大团队的项目，靠谱

vue是个人项目，并且只关注web端

4.0和1.x的Ngmodule不是一个东西

组件里面可以使用组件

组件里面可以调用服务，服务也可以调用服务

IDE：webstrom

使用ng new创建项目

访问服务器就是返回得这个默认html，里面使用了<APP-ROOT>组件

每个文件/文件夹的含义，在这篇文章的底部

https://www.angular.cn/guide/quickstart

src之外大部分文件都是用来自动化测试用的

模板就是html，定义组件的外观

控制器就是ts文件，写逻辑

app模块

app模块里面app组件是根组件，然后里面有heros组件

@xxxx就是装饰器，就是一种叫法，和java注解差不多

看一下app组件

看一下ts文件

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

// 装饰器
// 装饰器里面的属性叫做元数据
// 把装饰器里面的内容，附加到AppComponent这个类上面去，就把这个类变成了angular的组件
@Component({
  // 这个组件能够通过<app-root>标签来使用
  selector: 'app-root',
  // 指定模板
  templateUrl: './app.component.html',
  // 指定css
  styleUrls: ['./app.component.css']
})

// 这里面定义了控制器，控制器编写与页面相关的逻辑
export class AppComponent {

  // 在页面使用这个变量
  title = 'Tour of Heroes';
}

html文件，就是组件的外观

<!--插值表达式，使用了控制器里面的title变量-->
<h1>{{title}}</h1>

看一下app模块

// 模块装饰器
@NgModule({
  declarations: [
    // 声明模块里面有啥
    AppComponent,
    HeroesComponent
  ],
  imports: [
    // 该模块还需要啥模块，能够使用他们的指令和服务
    // 浏览器模块
    BrowserModule,
    // 表单模块
    FormsModule
  ],
  // 模块提供什么服务
  providers: [],
  // 模块的主 组件 是什么
  bootstrap: [AppComponent]
})
export class AppModule { }