Angular2入门(一)

原先用vue.js写的项目,最近领导要求改用Angular,于是开始自学之路。网上搜索了众多资料,包括谷歌原版书籍,但是Angular自从17年开始分为AngularJs和Angular两个版本,相差巨大,并且Angular已从2.0更新到6.0,网上资料庞杂且年代久远,不得要领。

花费了大量寻找资料的时间之后,终于摸索到了正确路线,在此记录学习历程。
此处不会详细介绍Angular的细节,只提供快速创建能运行Angular项目的教程。
需要理解细节可以到以下链接下载相关书籍学习:
揭秘Angular2 :  https://download.csdn.net/download/qq_36625806/10472981
迈向Angular2 :  https://download.csdn.net/download/qq_36625806/10472982

1.配置开发环境
操作系统:win7
开发平台:node.js v8版本以上
Angular版本:6.0

node.js下载地址:https://nodejs.org/en/

安装完node之后,打开windows命令窗口,输入下面的命令确认安装成功:
-->> node -v 

安装Angular命令行工具:Angular CLI :
-->> npm install -g @angular/cli

在命令行输入 ng -v 确认Angular CLI 安装成功。安装成功会有一个Logo展示。

2.创建Angular项目:
-->> ng new student  (student 是项目名称)

3.如何启动Angular的项目?
进入student项目,在命令行输入以下命令:
-->> npm start

当命令执行完毕,打开浏览器,输入:
localhost:4200 即可!(如果你没有手工修改端口的话)

3.如何在已有的项目引入其它插件?
进入student项目,在命令行输入以下命令:

-->> npm install bootstrap --save

找到项目的根目录找到angular.json,如下图填写:

4.如何自动创建自己的组件?
这个问题需要你试一下手工创建组件的痛苦,然后你就知道自动创建组件有多爽了!
以下直接说自动创建组件的用法:
自动创建页面的导航栏:

猜你喜欢

转载自blog.csdn.net/qq_36625806/article/details/80659498
今日推荐