资讯专栏INFORMATION COLUMN

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

littleGrow / 1981人阅读

摘要:前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功

前言

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的歌更带感哦!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50923.html

相关文章

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

    摘要:前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功 前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...

    BakerJ 评论0 收藏0
  • 使用angular4.0搭建一个博客类的项目

    摘要:前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功 前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...

    张宪坤 评论0 收藏0
  • 2017-07-01 前端日报

    摘要:前端日报精选腾讯前端团队社区源码分析入门指南一些关于使用的心得基本类型与引用类型知多少掘金中文第期框架选型周刊第期入门系列模块车栈重构基于的网络请求库某熊的全栈之路的那些奇技淫巧的平凡之路模仿写个数组监听掘 2017-07-01 前端日报 精选 Why you shouldn`t use Preact, Fast-React, etc. to replace React today -...

    _DangJin 评论0 收藏0
  • angular4.0学习笔记(一)

    摘要:设置开发环境此处使用了淘宝镜像全局安装安装耗时大约。然后等了分钟貌似还在,忍不住按,报错。生成项目查看对应目录运行项目到此项目搭建完成。 1.设置开发环境 node v6.9.0 npm v3.10.8 (此处使用了淘宝镜像) 全局安装angular-cli npm install -g @angular/cli showImg(https://segmentfault.com/img...

    BicycleWarrior 评论0 收藏0
  • Angular学习资料

    摘要:目前稳定在,进入了版本状态,谷歌表示会长期进行支持。版本是谷歌开发的一款类型的框架,具有优越的性能和绝佳的跨平台性。于年月正式发布,目前已发布到版本。中文翻译与主站同步的非常及时。 Angular是一款面向企业级应用开发的前端框架,掌握好Angular相关技术,有助于我们提升开发效率,编写高质量的前端代码。 Angular 1.x版本 AngularJS 诞生于2009年,由Misko H...

    james 评论0 收藏0

发表评论

0条评论

littleGrow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<