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

前言

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

项目原址:     

我是项目 ~zZ

github地址:

我是地址 ~zZ

项目简介

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

项目目录结构

图片描述

图片描述

项目功能介绍

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

图片描述

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

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

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

图片描述

图片描述

写在最后

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

猜你喜欢

转载自www.cnblogs.com/jlfw/p/12222310.html