使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。

有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。

示例可以查看:Angular Material Demo App [aveferrum/angular-material-demo]Angular RealWorld [gothinkster/angular-realworld-example-app]

运行Github上的基于Angular CLI构建的项目方法:

1、在url上提供用户名和仓库名

stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

2、在url上指定branch,tag 或 commit

stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH|COMMIT}

StackBlitz特性包括:

  1. 自动同步仓库代码,如果向仓库推送了commit,它会自动同步。
  2. 极速启动,它免去了我们下载代码到本地,安装等过程,可以在几秒就完成了启动项目
  3. 既然是一个在线的ide,它也支持你在本地开发想要的功能,如热加载等等

如果想查看github上的angular示例,这是一个不错的在线工具,推荐一下。

版权声明:著作权归作者所有。

相关推荐

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

使用Angular CLI的6个最佳实践及专业技巧

我们在新建前端项目时,常常会为项目的代码结构以及技术选型(如gunt,gulp,webpack,systemjs等等)绞尽脑汁。Angular CLI为我们开发Angular应用提供了一个标准的项目模板。项目模板里包含了完整的测试:包括unit测试,e2e测试多环境构建,提供了develop和production这两种基本的构建还提供了一系列代码开发工具,如ng generat

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预