Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

GavinLi-cn/NiceFish

Open more actions menu
 
 

Repository files navigation

nicefish-jigsaw

NiceFish(美人鱼)

NiceFish是一个系列教学项目,都是Angular这个技术栈。

对应的视频教程

此项目对应的视频教程(超清),包括所有PPT,请点这里:http://damoqiongqiu.github.io/videos/index.html

有一些人抱怨说视频没有从头手敲代码,跟不上节奏,如果你是从0开始学习Angular,还是看收费版的视频吧,讲得更细致一些(我自己觉得很啰嗦),内容提纲也在我的主页上,你自己找着看。

用法

用git克隆本项目,从命令行进入进入项目根目录,依次执行以下命令:

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli
cnpm install
ng serve

如果之前装过angular-cli需要先卸载:npm uninstall -g angular-cli 如果之前装过@angular/cli需要先卸载:npm uninstall -g @angular/cli 如果你之前已经尝试安装过node模块,请把NiceFish根目录下的node_moduels目录删掉 然后依次执行以下命令:

npm cache clean
npm prune
npm i -g cnpm
cnpm i -g @angular/cli
cnpm install
ng serve

打开你的浏览器,访问http://localhost:4200/

如果你想让加载的包更小,请使用以下方式启动angular-cli内置的轻量级http server

ng serve --prod

如果你需要把项目发布到其它类型的Server上,例如Tomcat,需要对Server进行一些简单的配置才能支持HTML5下的PushState路由模式,我在这篇文章里面有详细的介绍https://my.oschina.net/mumu/blog/830696

【注意】如果你发现ng serve起不来,或者起来有报错,请把NiceFish根目录下的node_modules目录删掉,然后重新执行cnpm install,全局的@angular/cli也需要删掉重装。

如何更新NiceFish的代码

打开命令行,进入NiceFish根目录,依次执行以下命令:

git pull
cnpm update
ng serve

噢对,如果你pull代码之后发现起不来了,请把你项目下的node_modules全部删掉,然后重新cnpm update。这里确实有点坑,但是我也不知道为什么,目测是npm包的版本问题。

AOT&TreeShaking

开发状态打出来的bundle体积比较大,在发布到生产环境之前需要进行prod和AOT,用法如下:

打开命令行,进入NiceFish根目录,执行以下命令:

ng build --prod

加上--prod参数之后,angular-cli会自动启用TreeShaking(摇树)特性,简而言之,就是把用不到的包全部剔除掉,就像从树上把枯叶子摇下来一样,很形象吧?

angular-cli会在项目根目录下生成一个dist目录,里面就是编译、压缩好的文件了。仔细观察你会发现,这些文件的体积已经被大幅度压缩,加上gzip之后有一些文件只剩下1/4左右的大小。

【请注意】最新版本的@angular/cli已经内置了对AOT和TreeShaking的支持,只要像上面这样在build的时候加上--prod参数就可以了,不需要再做任何其它任何配置工作,中文网站上的那一篇指南过时了。

资源收集帖

https://damoqiongqiu.github.io/web%E5%89%8D%E7%AB%AF/2017/08/07/angular-learning-materials.html

在线交流QQ群

Angular-1区-丝绸之路:286047042(满)

Angular-2区-敦煌:139357161(满)

Angular-3区-玉门关:473129930(满)

Angular-4区-河西走廊:483016484(满)

Angular-5区-楼兰:604253120(将满)

Angular-6区-凉州:124641447(将满)

脚本娃娃-桃花岛-83163037(将满)

如果您有Angular相关的问题需要讨论,或者单纯想跟我Say Hello,请加上面几个扣扣群。注意,我每天都会收到大量的求助消息,真的有点忙,所以请您优先在扣扣群里面讨论问题。

关于我

我是大漠穷秋,我的Github个人主页在这里:http://damoqiongqiu.github.io/

开源许可证

MIT

你可以随意使用此项目,无需通知我,因为我可能很忙没空搭理你。

About

NiceFish(美人鱼)是一个系列教学项目,全面示范了Angular新版本在浏览器、移动端、Electron环境中的用法。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • CSS 53.1%
  • TypeScript 31.4%
  • HTML 14.6%
  • JavaScript 0.9%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.