前置作業
1.下載安裝 https://nodejs.org/en/ 2.開啟 終端機 輸入 npm install -g @angular/cli 安裝 Angular
2-1.下載安裝裝編輯器 Virtual Studio Code
3.建立 Angular 專案 ng new my-app(專案名稱可自行命名)
y
y
css
4.開啟終端機 進入目錄 ---> cd my-app(剛剛建立的專案稱)
5.啟用專案 ---> ng serve --open
6.建立元件 ---> ng g c componet/bulletin (bulletin 可自行命名)
bulletin.component.html
7.建立 Serviec ---> ng g service service/feed-service
feed-service.service.ts
8.建立 Pipe ---> ng g pipe pipe/strip-html-tags
strip-html-tags.pipe.ts
9.建立 model 資料夾
feed-items.ts
feed.ts
10.建立滑鼠效果 ---> npm install hover.css --save
觀看相關滑鼠效果 https://ianlunn.github.io/Hover/
rss to json
https://rss2json.com/#rss_url=https%3A%2F%2Fgithub.com%2Fexpressjs%2Fexpress%2Freleases.atom
論壇 RSS 網址
https://groups.google.com/a/網域名稱/forum/feed/論壇名稱/topics/rss_v2_0.xml
修改 bulletin.component.ts
bulletinFeedUrl: string='https://groups.google.com/a/網域名稱/forum/feed/論壇名稱/topics/rss_v2_0.xml&api_key=xxxxxxxxxxxxxxxxxx&order_dir=desc&count=5';
11.ng build --prod 打包專案(路徑:dist/資料夾)
發布 Firebase
1.登入 Firebase - 建立專案名稱
2.sudo npm install -g firebase-tools
3.sudo firebase logout
4.sudo firebase login -->點選網站認證帳號
5.sudo firebase init
-->Hosting:Configure files for Firebase Hosting and ....
-->空白鍵
Please select an option:-->Use an existing project
Select a default Firebase project for this directory-->選擇 firebase 上的專案名稱
What do you want to use as your public directory? 路徑更改--> dist/資料夾名稱
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) -->N
Set up automatic builds and deploys with GitHub? (y/N) -->N
6.sudo firebase deploy
後記:真的真的特別感謝 澎湖中正國小 項志偉 老師無私分享
沒有留言:
張貼留言
歡迎大家一起留言討論!