文章目录
前言正文概念早知道前提条件搭建本地开发环境和工作区安装Angular CLI创建工作区和初始应用运行应用 防入坑专区安装Angular CLI过程中,会报错Angular CLI安装有问题,如何卸载npm安装模块非常慢,怎么办Angular需要typescript和types模块,还要安装吗安装Angular6之后,启动应用报错 rxjs 小结前言
目前主流的前端框架包含:Vue、React、Angular等。
Angular作为前端主流框架之一,它是互联网巨人谷歌开发,这意味着它有一个坚实的基础和社区支持。
和Vue相似,入门也比较容易,但概念较多,学习中较难深入理解。不过这些都不是问题,我们要知道学习任何技术都不可能一口吃个胖子,需要日常工作中慢慢积累和沉淀。
初学Angular,我也遇到不少坑,也是遇到问题解决问题,一步一步的使用起来的。初学者注意这几点可以帮你少走弯路,快速上手Angular。
正文
开始之前,先普及一下Angular相关概念,让我们更好的了解这个前端框架。
概念早知道
Angular是一个基于TypeScript构建的开发平台。它包括:
一个基于组件的框架,用于构建可伸缩的Web应用;一组完美集成的库,涵盖各种功能,包括路由、表单管理、客户端-服务器通信等;一套开发工具,可帮助你开发、构建、测试和更新代码。
前提条件
要想使用Angular框架,你要先具备下列技术:
HTMLCSSJavaScriptTypeScript
学习TypeScript的知识也会很有用,但不是必须的。如果具备上面的技术,你可以轻松学习Angular框架。
下面开始我们的学习之旅吧!
搭建本地开发环境和工作区
工欲善其事必先利其器。学习任何一门技术,开发环境很重要,很重要,非常重要!
安装Angular CLI
创建Angular项目可以通过Angular CLI(脚手架),它可以帮助我们生成应用和库代码,以及执行各种持续开发任务,比如:测试、打包和部署等。
如果你还没有安装,请先安装Angular CLI。
注意:安装之前确保你已经安装了Node工具。
执行命令行:
npm install -g @angular/cli
安装完成执行 ng -v 查看是否安装成功
创建工作区和初始应用
打开CMD.exe后,进入指定的目录,开始创建工作区和初始应用。
ng new my-appdemo
命令说明:ng new [application name] 创建指定应用名的Angular项目
执行上面的命令,Angular CLI 会安装必要的 Angular npm 包和其它依赖包。这可能要花几分钟的时间。完成后,会看到该目录
运行应用
Angular CLI 中包含一个服务器,方便你在本地构建和提供应用。下面运行我们的应用,进入到我们的工作目录,比如:my-appdemo。
运行下列命令:
cd my-appdemong serve --open
ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。
–open(或者只用 -o 缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/
也可以通过执行命令 ng serve --port 0 --open 打开随机端口的访问地址,不过一般不用
如果你的安装和环境搭建成功了,就会看到启动后的页面。
注意:这个界面是我添加了ng-zorro后的界面,原始界面会显示Angular的图标。
防入坑专区
安装Angular CLI过程中,会报错
通过npm install -g @angular/cli安装会安装最新的Angular脚手架,可能与本地Node版本不兼容。
指定和本地Node版本兼容的@angular/cli版本进行安装Angular脚手架。如:npm install -g @angular/cli@6.0.0
Angular CLI安装有问题,如何卸载
卸载安装的angular-cli
npm uninstall -g angular-cli
清除npm缓存
npm cache verify --force
npm安装模块非常慢,怎么办
设置淘宝镜像,让下载速度更快,cmd命令窗口中执行下面的命令:
npm config set registry https://registry.
Angular需要typescript和types模块,还要安装吗
不需要,安装脚手架时会自行安装这两个模块,如果要安装可以执行下面的命令:
npm install -g typescript typings
安装Angular6之后,启动应用报错 rxjs
错误栈:ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected
找到应用目录中的package.json,修改依赖 rxjs 配置。将 “rxjs”: “^6.0.0” 改为 “rxjs”: “6.0.0”,保存文件,并在当前目录的cmd.exe中执行npm update。执行npm start查看运行结果。
小结
通过以上的学习,进修者相信您已经可以搭建本地环境,并且能够创建自己的应用,完成了Angular入门的学习。学习新知识,就是要不断的去踏坑,把学习过程中的问题都一一解决掉,您也就真的学会了。
感谢您读完了进修者的内容分享,欢迎留言区一起聊聊天,聊聊关于您对“Angular快速入门”有什么更好的想法!
我是进修者,期待与您肩并肩,一起进化成长!