前端之Angular入门(一)

随着技术的更新换代，从jquery的一家独大，到现在的vue,angular,react三大主流框架，技术发展飞速的同时，也给一些后端要写前端时无从下手的感觉，今天主要介绍下如何快速上手angular，首先引入一个问题，为什么要用angular?因为angular引入了一些Java的东西，如依赖注入，这个概念对于后端开发人员就很熟悉了，选用angular的目的就是它上手容易,模块化利用的非常好且代码风格有些地方和java非常相似。

有哪些ui框架？

抛开angular，我们一般开发都会用一些ui框架如Bootstrap,Laui,elementUI,iview等等，使用这些框架会使我们少些很多的样式代码，开发起来更加迅速，界面样式也更统一，那么angular有哪些ui框架？我们可以访问下angular的官网，找到资源>ui组件，如下图:

可以看到有很多的ui框架组件，你可以在这里选择适合你用的组件进行开发，这里推荐Angular Material和NG-ZORRO，其中Angular Material是Material Design设计方式,也就所谓的质感，NG-ZORRO是Ant Design的angular，本篇文章使用的是NG-ZORRO

新建项目

nodejs安装略过，之前的文章已经介绍过了，这里直接开始安装angular-cli，就是创建angular项目的工具

npm install -g @angular/cli

接下来新建项目我们使用webstorm来完成，webstorm是一款前端开发的idea，使用起来特别的方便，在以后的开发过程中开发工具一般都是webstorm 或者 vscode，选中新建project弹出如下图界面，点击Angular Cli，我们只需关心Location和Additional parameters就行了，其中Location代表项目路径，Additional parameters为创建项目时的参数，可以看到这里填写了--routing，意思就是启用angular的路由模块，方便我们对路由的管理

添加NG-ZORRO

项目创建完成后，架构目录如下:

等下再说这些文件目录的意思，我们先把NG-ZORRO添加进项目，打开命令行窗口进入项目目录执行如下命令：

# 执行的过程中会提示一些个性化配置，自行选择是否需要即可
ng add ng-zorro-antd

命令执行完毕后，我们启动项目查看下长什么样~

启动项目

ng serve

ng serve 即为启动项目，默认端口4200，启动完之后我们访问下

可以看到已经启动成功，并出现了NG-ZORRO的logo，接下来就可以参照NG-ZORRO的文档进行组件的引用了~本来想着一篇文章写完，但写着写着不想写了...索性就把文章分为三篇，本篇为第一篇，第二篇会说一下怎么创建组件，路由的管理，组件的调用以及一些基础语法，第三篇为Http工具的封装，路由守卫，权限认证及Http拦截器。