安装AgularJS的全过程

时间:2022-09-24 21:32:21

1.Angular 2 的适用范围:

    Angular 2的主要用于前端的web开发,它以MVC的架构形式将所有复杂性元素加以打包,更好的保证了前后台分离,从而保证开发者只需要直接接触那些最易于实现的功能,简化了工作流程,并且加快了开发周期。

通过学习Angular2来构建应用程序,并重复利用你的代码和能力来构建可在任何平台

上部署的应用。这些平台可以是PC站点、移动站点、PC本地应用和移动本地应用等。

Angular2的出现解放了前端开发者,同时提升了前端人员的工资水准,它与angular1差别很大,需要重新学习。

2.优势:

① 使用MVC 架构(Model View Controller)即:模型视图控制器

Model (模型):模型负责维护数据;

    View (视图):视图负责显示数据;

    Controller (控制器):控制器则作为衔接视图与模型之间的桥梁。

② 指令:

1.利用多种指令变更HTML标签的具体行为,允许开发者创建出各类 定制化 标签:(例如:安装AgularJS的全过程

2.使用指令标签会通知编译器在DOM元素中添加某些功能,甚至能够对其进行改动。

③ 易用性:

Angular 2 相对比与Angular 1.x ,完整性以及适用性更好。拥有丰富的组件功能。大大降低了代码的繁琐性和重复性,让开发过程更为轻松,便捷。

④ 利用依赖性注入进行测试:

我们的应用程序如果不经过严格测试,绝对称不上完整。Angular 2在构建过程中就已经将测试纳入到考量当中。利用Angular 2创建的应用程序全面与依赖性注入相对接。可以非常轻松地将样本数据注入至控制器,从而检测其输出结果及行为方式是否符合预期。

 

⑤ 灵活性:

Angular 2能够用于创建任意项目类型,相对于Angular 1.x而言,Angular 2更好的去适配了pc应用和移动应用,且无需对后端作出任何修改。因此,我们可以放心大胆地利用它开发任意应用程序的前端。(当然,使用一个前端的框架必然会伴随着开发中遇到很多的坑,所以也请大家做好心里准备)

 

⑥ 灵活的过滤器:      

过滤器会在显示之前对数值进行重新定义,例如变更数字的小数取位、将字符串转换为大写或者将分页添加至网页等等。这些过滤器与指令非常相似,而且能够以独立函数的方式起效,只是专门面向数据转换方面的任务。大家也可以根据需要创建自己的定制化过滤器。

3.使用Angular 2需要安装的内容:

①:Node.js

②:Npm(全称Node Package Manager,即node包管理器)

因为最新的Node.js 下载之后会有自带的npm,所以我们只要下载Node.js就可以。

 

4.安装过程:

第一步:下载node.js ,去node.js 的官网下载(因为新的nodejs已经带有npm,所以下载好了一个就可以了):

      安装AgularJS的全过程

第二步:安装完成后(建议最好安在默认安装环境里面),打开命令行cmd,查看path路径:(找到你安装的路径,然后输入path进行查看node.js以及npm的位置,方便以后找到它)

安装AgularJS的全过程

第三步:路径查看完成后,输入命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org (这一步是通过国内的一个淘宝镜像下载cnpm)【这里用淘宝是因为国内对国外网站访问做了限制的原因】

          安装AgularJS的全过程

第四步:cnpm下载成功之后,然后输入:cnpm i -g @angular/cli --save-dev (通过已经下载好的cnpm去安装Angular 2的 @angular/cliAngular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。

 安装AgularJS的全过程

等待@angular/cli 下载完成后,基本的angular 2环境搭建完成。

5.环境搭建完成后,进行新建一个项目:

第一步:打开cmd命令,进入你要保存项目的文件夹路径下: 

          安装AgularJS的全过程

第二步:输入命令:ng new myproject2(名字任意取,小写),开始新建项目:                                                                                                      安装AgularJS的全过程

新建之后,我们到保存的文件夹下查看:可以看到,里面的基本配置都是已经安                                                                                                        安装AgularJS的全过程

第三步:按两下ctrl +c,停止运行,(因为这种下载package.json里面的依赖包的速度会很慢),我们采用另一种方法,停止运行后,删除项目下的.gitignore的文件,然后输入命令:cnpm i(下载package.json里面的依赖包):                                                                                                      安装AgularJS的全过程

第四步:下载完成后,输入命令:ng serve:

安装AgularJS的全过程

成功了之后,我们输入自己的端口

最后成功打开项目:

安装AgularJS的全过程