1、创建项目
（1）在命令窗口：ng new 项目名
（2）在WebStrom中File=>New=>project=>Angular CLI
比较慢，需要耐心等待；
新建项目
2、新建组件（head和message）
- ng g component head
- ng g component message
新建组件
3、在app文件夹下会生成head文件夹和message文件夹
head组件和message组件
- 分别在head.component.html和message.component.html中写各自的html布局
- 分别在head.component.css和message.component.css中写各自的css样式
在head.component.ts和message.component.ts中已经分别定义了各自的组件标签名app-head和app-message，然后把这两个标签写进app.component.html中，就可以显示在head.component.html和message.component.html中写的内容了
app.component.html
浏览器运行结果
4、因为消息不是确定的，是后台给你的，要在message.component.ts文件中的得到数据，然后在渲染到页面message.component.html。
message.component.ts
message.component.ts文件里写代码非常的严格（少个空格都会错，只能用单引号），可以在tslint.json文件里查找whitespace和quotemark：
修改设置
message.component.html
浏览器运行结果
5、路由
由于Angular是一个SPA（single page application）应用，即主页面只加载一次，不在刷新只是改变页面上部分内容的应用，又称为单页应用。所以就用到了路由
- 新建组件（详情页面）
ng g component messagedetail - 需要在app.module.ts中配置路由信息，如图：
app.module.ts
- 不同的路由展示不同的文件
（1）在app.component.html页面写个a标签，点击进入详情页：
app.component.html
页面
（2）在message.component.html页面添加点击事件，点击进入详情页：
message.component.html
message.component.ts
当我们点击进入详情页之后，会在地址栏显示localhost:4200/detail；我们可以直接在这拼上/dizhi，但有的我们没有配置，就会什么也不显示还会报错，是个不友好的体验，所以我们可以新建一个页面，页面丢失了
ng g component default
app.module.ts
6、如何导入第三方库(例导入jquery)
（1）第一步下载：
cnpm install jquery --save
--save是生产环境（上线之后叫生产环境）
--save-dev是开发环境（上线之前叫开发环境）
下载jquery
下载好之后：
在package.json中的"dependencies"中有'jquery'依赖
在node-modeles文件夹下有jquery包
image.png
（2）在angular.cli.json 文件中配置"scripts:[jquery.js的路径]"
angular.cli.json
当我关闭项目，在ng serve 的时候，报错了，打不开，说是找不到jquery.js文件，然后我改了一下这个路径 ：../node_modules/jquery/dist/jquery.js 就可以了
（3）在核心组件app.component.ts中写jq代码看支持不：答案是不可以的，因为jq是.js文件，这是.ts文件；还需要下载转一下：
cnpm install @type/jquery --save-dev
然后在tsconfig.app.json文件夹下，设置一下"types":["jquery"]
tsconfig.app.json
好了，这样就可以使用jq写代码了；
app.component.html
app.component.ts
7、路由传值（两种方式）
（1）第一种方式
- 在app.module.ts中配置路由信息的时候，定一个参数：id；
app.module.ts
- 在app.component.html中用routerLink传值：
app.component.html
- 在messagedetail.component.ts中接收数据；
messagedetail.component.ts
（2）第二种方式，点击的时候动态的传值
- 在message.component.html中点击事件中传值；
message.component.html
- 在app.module.ts中配置路由信息的时候，定一个参数：title
app.module.ts
- 在message.component.ts里的showDetail()方法中接收数据，传给路由；
message.component.ts
- 在messagdetail.component.ts中接收数据，就可以在.html中展示数据；
messagdetail.component.ts
8、如何从服务器获取数据
- 在app.module.ts里配置Http模块
app.module.ts
- 在assets文件下新建myData.json文件，设置数据，供下面使用，到实际开发中，这些数据都是后台给的
myData.json
- 在message.component.ts里获取本地数据；
message.component.ts
网友评论