<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.創(chuàng)建項目時添加路由
ng new router --routing //新建項目時多加--routin參數(shù)
2.在路由時傳遞數(shù)據(jù)
(1)在查詢參數(shù)中傳遞數(shù)據(jù)
/product?id=1&name=2 > ActivatedRoute.queryParams[id]
(2)在路由路徑中傳遞數(shù)據(jù)
{path:/product/:id > /product/1 >ActivatedRoute.params[id]
(3)在路由配置中傳遞數(shù)據(jù)
{path:/product,component:ProductComponent,data[{isProd:true}] >
ActivatedRoute.data[0][isProd]