用Augnlar写个小项目

2017-11-29 本文已影响0人小新子666

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"]