首先打开新建的项目。
我们先来看一下新建项目的目录结构。
查看项目目录结构
src文件夹
你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。
根目录
src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。
运行初始化项目
在终端（vscode快捷键ctrl+`）中运行npm start 或者 ng serve。
从调试中选择运行ng serve。（上一节课讲DeBUG的时候，已经讲解了。第三节在谷歌浏览器中调试Angular）
运行如下：（以后都是这么运行的，后续不再讲解。）
查看源码
我们打开srcappapp.component.html，删除第八行之后的代码（包括第八号）。保存。
注意图中{{}}双括号里面的内容，这里还是跟ng1一样，使用双向绑定。
我们再打开srcappapp.component.ts
这里的title就是绑定到界面上的title，你可以尝试着修改这个值，可以看到界面上更新。
这里我们把关注点放到别的地方。
导入依赖
第一行中的import { Component } from ‘@angular/core’;定义了我们编写代码的时候要用到的模块。这里我们导入了Component。
‘@angular/core’部分高速程序到哪里查找所需要的模块，从他里面取出对象（{}中声明的，这里是Component ）。
Component注解
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
这里应该是借鉴java中的概念，我不懂java，材料里面介绍的。
但是注解其实就是让编辑器为代码添加功能的一种方式。
可以简单的理解为注解就是把元数据添加到代码中。
我们在这里使用注解就是把这个对象decotate成了一个Component。
这里的’app-root’表示我们可以再html中使用<app-root>标签来使用它。
selector表示该组价将使用什么标签，当html中有这个标签是，就会用当前组件去编译和渲染。
templateUrl添加模板
这里是导入项目模板的意思。
也可以是用template代替，只是把对应的html写在了当前的文件中而已。没什么歧义的。
styleUrls表明要关联的样式表
styleUrls: [‘./app.component.css’]
这个参数是一个数组哦，所以你可以写上一个路径的字符串数组。
理解了上面的这些内容，我们现在就知道了，这个app-root也只是一个普通的组件，
我们用全局搜索（快捷键ctrl+shift+f或者左侧边栏有一个放大镜的图标）的方式，来查找一下app-root组件在哪里被使用了。
到这里我们回过头来理解。
当用户访问index.html文件时。
执行到<app-root></app-root> 系统就会通过selector 关联的所有组件。
找到selector: 'app-root' 这个组件，
然后用templateUrl: './app.component.html' 声明的模板，去渲染。
在html模板中，遇到了{{title}}（或者其他的ng的标签），
又回到 title = 'app'; 中找到title的值，替换掉模板界面的变量，
最后向用户输出静态页面。
这是最简单的一个流程了，我们可以先简单的理解ng的新框架。
后续的内容我们会不断深入和补充。
这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫，希望你开心。
如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。
希望大家关注我的个人公众号ionic_