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.如何自动创建自己的组件？

这个问题需要你试一下手工创建组件的痛苦，然后你就知道自动创建组件有多爽了！

以下直接说自动创建组件的用法：

自动创建页面的导航栏：