angular学习(1)

        在公司需要进行Angular项目的开发和维护，所以准备深入了解下Angular框架。因为原来主要是做vue框架项目的，Angular只闻其声，不见其形。今天我就来试一试水，看看Angular的独特之处。这篇文章主要讲解如何搭建一个Angular项目运行。

官方地址：Angular中文网

1.全局安装angular-cli

npm install -g @angular/cli
#查看版本
ng --version

2.创建angular项目

ng new my-app

3.启动服务器

cd my-app
ng serve --open

启动成功，弹出项目主页,表示项目构建完成

4.项目目录

5.添加一个组件Component

ng generate component register
#angular会在src中生成一个以组件命名的文件夹，其中包含4个文件，js,css,html,spec.js(测试文件)
#angular提倡的文件命名方式：
register.component.ts。HTML：register.component.html。样式文件： register.component.css

其中组件js的源码:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-register',    // 组件的在HTML模板中的标签
      templateUrl: './register.component.html',// 嵌入的html模板
  styleUrls: ['./register.component.css']  // 嵌入的css样式文件
})
export class RegisterComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

然后打开 目录src/app/app.component.html 添加组件引用：

<div>
    <span>hello:</span>
    <app-register></app-register>
</div>
#运行项目，组件的html内容显示到浏览器时，说明组件加载成功。

当你做完这些的时候，其实angular已经帮你文件相互串联起来了。在src/app/app.module.ts文件中，已经将组件进行装载，只需要相关的页面中调用就可以了。

  这篇主要描述angular项目的创建和组件的创建工作，下一章节会进行一些angular相关知识的学习。
让我们一起变得更好，在平台中成长!