<1>新建项目
1.新建项目
ng new projectname
2.运行项目测试
ng serve --open
地址:localhost:4200
3.安装第三方插件jquery和bootstrap
npm install jquery --save
npm install bootstrap --save
4.把第三方插件引入项目,配置angular-cli.json文件
目的:把jquery和bootstrap的js路径和bootstrap.css加上去
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css" //引入bootstrap css
],
"scripts": [
"../node_modules/jquery/dist/jquery.js", //引入 jquery js
"../node_modules/bootstrap/dist/js/bootstrap.js" //引入bootstrap js
],
5.安装bootstrap和jquery类型描述文件
目的:为了让typescript文件认识bootstrap和jquery的代码
npm install @types/jquery --save--dev
npm insatall @types/jquery --save--dev
6.生成组件
ng g component navbar (其中navbar是自定义命名的组件名字)
<2>angular路由
1.创建项目时添加路由
ng new router --routing //新建项目时多加--routin参数
2.在路由时传递数据
(1)在查询参数中传递数据
/product?id=1&name=2 > ActivatedRoute.queryParams[id]
(2)在路由路径中传递数据
{path:/product/:id > /product/1 >ActivatedRoute.params[id]
(3)在路由配置中传递数据
{path:/product,component:ProductComponent,data[{isProd:true}] >
ActivatedRoute.data[0][isProd]