使用angular4.0來(lái)搭建一個(gè)博客類(lèi)的項(xiàng)目

littleGrow 發(fā)布于2019-08-01 17:04 / 2015人閱讀

摘要：前言也就是的最新版本最近也是大紅大紫的公司項(xiàng)目主管推上學(xué)習(xí)日程自己也就抽時(shí)間寫(xiě)了一個(gè)小的博客類(lèi)的意在于去看一下最新的特性和的語(yǔ)法由于剛接觸和所以有點(diǎn)小糙望見(jiàn)諒項(xiàng)目原址我是項(xiàng)目地址我是地址項(xiàng)目簡(jiǎn)介整個(gè)項(xiàng)目是使用腳手架搭建的項(xiàng)目目錄結(jié)構(gòu)項(xiàng)目功

前言

angular也就是angular.js的最新版本,最近也是大紅大紫的公司項(xiàng)目主管推上學(xué)習(xí)日程,自己也就抽時(shí)間寫(xiě)了一個(gè)小的博客類(lèi)的demo,意在于去看一下angular最新的特性和typescript的語(yǔ)法;由于剛接觸angular和typescript所以有點(diǎn)小糙,望見(jiàn)諒!

項(xiàng)目原址:

我是項(xiàng)目 ~zZ

github地址:

我是地址 ~zZ

項(xiàng)目簡(jiǎn)介

整個(gè)項(xiàng)目是使用angular-cli腳手架搭建的;

項(xiàng)目目錄結(jié)構(gòu)

項(xiàng)目功能介紹

使用angular-router搭建的路由界面;也使用angular的animation組件來(lái)完成路由頁(yè)面的加載過(guò)渡動(dòng)畫(huà);

import { trigger, style, transition, animate,keyframes } from "@angular/animations";

export const fadeIn = trigger("fadeIn", [
  transition("void => *", [
    style({ opacity: 0 }),
    animate(1000, keyframes([
        style({opacity: 0, transform: "translateY(-100%)", offset: 0}),
        style({opacity: 0.5, transform: "translateY(25px)",  offset: 0.3}),
        style({opacity: 1, transform: "translateY(0)", offset: 1.0})
      ]))
  ])
]);

整合了一個(gè)網(wǎng)易云音樂(lè)的播放,使用H5的audio標(biāo)簽

整個(gè)項(xiàng)目也使用ngx-bootstrap,我感覺(jué)這個(gè)ui組件最適合現(xiàn)在的angular,用起來(lái)也比較舒服,上手也快,基本和bootstrap使用一樣;

項(xiàng)目使用路由的url傳參完成各個(gè)子頁(yè)面顯示對(duì)應(yīng)的內(nèi)容;

寫(xiě)在最后

實(shí)在是不知道寫(xiě)什么具體的各位有興趣的可以去我的github查看,還有寫(xiě)代碼的時(shí)候聽(tīng)著小姐姐j.Fla的歌更帶感哦!!!