前端之Angular入门(一)

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

有哪些ui框架?

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

Last modification:September 7th, 2019 at 12:07 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment