Angular 7 自学总结(1)

个人理解Angular

它是一个模块化、组件化的开发理念，引入并声明后就可以在其他地方应用，在通过路由控制显示出来
github源码地址：https://github.com/wangduxiu/Angular7-Demo.git

创建一个项目

• 首先安装环境node.js，安装npm。
• 安装cli。
• 在cli中输入命令： cd到想要存储项目的文件夹，ng new 项目名
• 启动服务：在当前项目目录下ng serve --open可以看到页面显示angular则项
• 会自动创建一个可以运行的项目骨架。
• 启动服务：在当前项目目录下 ng serve --open可以看到页面显示angular则项
  目运行成功。

项目目录结构分析

主要需要知道的文件:

• node-modules：安装的第三方模块都放在这里。
• src : 编写项目都在这个文件夹中。
• app :组件以及app.modules.ts 定义根模块。
• index.html : 主页面入口。
• style.css : 全局样式。
• package.json : npm配置文件。

创建组件

• cd到项目文件夹，ng g component components/news:创建一个components文件夹（组件）并在该文件夹下创建一个news组件。
  注： 如果手动创建组件，想要使用这个组件必须在app.modules.ts中引入和声明，如果是命令自动创建则自动声明和引入。
• 如何在其他页面复用组件？
  在新创建的组件中的news.component.ts文件中，有一个selector属性就是名字，如果需要调用只需要在其他页面中写入 即可，这样页面代码量少、代码复用率高。

 @Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})

定义数据

定义数据的几种方式：
1.定义基本数据

title ="我是新闻组件";
public title ="我是新闻组件";
public title:string ="我是新闻组件"; //最标准的定义方式
public message:any;//定义空数据

2.定义对象

  public userinfo:object={
    username:"zhangsan",
    age:"20"
  };

3.定义数组的几种方式

//普通数组
arr=[a,b,c];
public arr:arr[] =['111','222','333'];
public list:Array<number>=[123,321,456,654];//如果<>里面是number则数组必须是number
//对象数组
public userList:Array<object>=[
    {
      username:"zhangsan",
      age:18
    },
    {
      u