使用angular4.0来搭建一个博客类的项目

发布时间:2019-06-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用angular4.0来搭建一个博客类的项目脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意在于去看一下angular最新的特性和typescript的语法;由于刚接触angular和typescript所以有点小糙,望见谅!

项目原址:     

我是项目 ~zZ

github地址:

我是地址 ~zZ

项目简介

整个项目是使用angular-cli脚手架搭建的;

项目目录结构

使用angular4.0来搭建一个博客类的项目

使用angular4.0来搭建一个博客类的项目

项目功能介绍

  • 使用angular-router搭建的路由界面;也使用angular的animation组件来完成路由页面的加载过渡动画;

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})
      ]))
  ])
]);

使用angular4.0来搭建一个博客类的项目

  • 整合了一个网易云音乐的播放,使用H5的audio标签

    使用angular4.0来搭建一个博客类的项目

  • 整个项目也使用ngx-bootstrap,我感觉这个ui组件最适合现在的angular,用起来也比较舒服,上手也快,基本和bootstrap使用一样;

  • 项目使用路由的url传参完成各个子页面显示对应的内容;

使用angular4.0来搭建一个博客类的项目

使用angular4.0来搭建一个博客类的项目

写在最后

实在是不知道写什么具体的各位有兴趣的可以去我的github查看,还有写代码的时候听着小姐姐j.Fla的歌更带感哦!!!

脚本宝典总结

以上是脚本宝典为你收集整理的使用angular4.0来搭建一个博客类的项目全部内容,希望文章能够帮你解决使用angular4.0来搭建一个博客类的项目所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: