1. 创建项目,找到自己的想要创建的目录，ng-cli将会在当前目前下创建子目录

ng new angular-tour-of-heroes
询问是否启用路由，yes, 想使用哪种样式表，我选择的css

cmd

2. 接着，尝试运行

cd angular-tour-of-heroes
ng serve --open
成功跑起来， 前面已经跑过，就不截图了。

3. 使用IDE打开，我这里是用的vscode

vscode

4. 层次结构，初学的人对angular的结构不了解，这里详细说明一下。

可以理解为前后端代码是分开

component

  • Component.ts 相当于后端class, 可以理解为对应的html页面的后台代码, 可以看到模板生成后，在 expor class AppComponent 中，有个 title 属性。
    $\color{red}{请注意，只有在export class 中的方法/属性才可以供外部调用， 相当于是暴露函数}$
export class AppComponent {
  title = \'angular-tour-of-heroes\';
}
  • Component.html 相当前端，一些组件,html标签都是在这里写,由于已经在ts中暴露了title属性，所以在html中直接可以使用。
请注意语法： {{}} 为插值方式，值就是属性。

title

<h1>{{title}}</h1>
接着，回到浏览器看一下，发现那一堆广告都没有了，变成了ts中的常量。

输入图片说明

  • Component.css 相当于独立的css文件， 好处就是一个模板对应一个单独的css文件。把下面的代码复制到css, 再看浏览器，发现样式已经应用上了，是不是很简单呢。
/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}
预览

h1

小结，组件中由.ts .html .css三个文件组成， 这样是不是不传统的一个文件中即包含css,html,js或者服务端代码要好很多呢？而且更容易维护呢

  • .ts 负责数据的处理
  • .html 负责展示页面
  • .css 负责样式处理

版权声明：本文为start2019原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/start2019/p/13489263.html