首页 > 其他分享 >AngularJS2 教程 -- Angular-cli搭建Angular2开发环境

AngularJS2 教程 -- Angular-cli搭建Angular2开发环境

时间:2023-05-21 19:06:36浏览次数:41  
标签:npm cli -- component ts ng angular AngularJS2


1.nodejs

2.npm 包管理

以下的东西就当你是知道了这些概念了

1.首先,到nodejs 官网下载nodejs并安装

 




AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_操作系统


2.添加淘宝的npm镜像(由于国内访问国外网站的速度实在是太慢了),由于我们只有要用到的一些东西,我们采用以下的添加镜像方法

(windows 用户使用cmd,输入以下命令,新手请去看看npm使用教程吧)

npm config set registryhttps://registry.npm.taobao.org

值得说明一下的是不要直接使用淘宝的npm官方镜像安装模式(npm install -g angular-cli –registry=https://registry.npm.taobao.org),这样我们只能使用cnpm命令,而Angular-cli创建新项目的时候是直接使用的npm,

会导致访问速度奇慢,直接使用上面的这个命令就行了

3.使用npm 安装Angular-cli

Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等;具体参考Angular-cli GitHub

在命令行中输入

npm install -g angular-cli

如果你之前安装失败过,最好在安装angular-cli之前先卸载干净,用以下两句: 

npm uninstall -g angular-cli 
npm cache clean

在检查你全局的那些npm文件下还残留ng和ng.cmd,有的话也要删掉,删掉后再安装最新的angular-cli即可。npm install -g angular-cli 

若安装过程中 node-sass卡在下载的地方,根据cmd中提示的doload地址通过浏览器或则下载工具下载文件,找到npm的全局地址C:\Users\用户\AppData\Roaming\npm\node_modules\angular-cli\node_modules\node-sass\vendor\win32-x64-51,将刚下载的文件按照文件夹中的文件重命名替换即可。

安装完毕后,试下ng -v 和ng –help,有显示正确内容就成功了。

ng –help 提示rxjs,可通过cmd命令进入C:\Users\用户\AppData\Roaming\npm\node_modules\angular-cli重新安装 npm install rxjs

之后我们就可以在全局使用ng命令了

4.使用Angular-cli搭建开发环境

首先到你的工作目录下建立Angular工程目录

然后然后用命令行进入该目录,输入

ng new projectName

然后脚手架会帮我们搭建初始环境,由于初始化的时候Angualr-cli会去初始化node-modules依赖,所以会比较慢;如果没有切换淘宝镜像,那不是一般的慢



AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_ViewUI_02


最终安装好了是这样的



AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_操作系统_03


就这样,最简单的angular2工程创建好了;

工程结构熟悉一下:angular-cli.json 是angular-cli的配置文件,测试配置文件karma.conf.js,typescript的lint配置文件,端到端的测试配置文件protractor.conf.js,导入es6模块的配置文件polyfills.ts,angular工程的main.ts引导启动文件,全局样式style.css,typescript配置文件ts.config.json;typescript的声明文件typings.d.ts,以及生成了最贱的的一个angular组建 app.components相关的css,html,ts。这些配置都是angular2的生产项目中需要配置的文件,angular-cli帮我们做了这么多事情,我们只用了一个命令;


 5.运行Angular

这个时候整个Angular2已经搭建好了

cd projectName

命令行进入进入刚才的工程目录,输入

ng serve

AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_ViewUI_04

浏览器输入 http://localhost:4200/ 就可以看到app works!

因为默认的4200的端口,如果你需要换的话也是可以的package.json里面的

ng serve --host localhost --port 4201

AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_配置文件_05

创建module,component,service,class

命令以 ng generate 开头,可以缩写为 ng g

下表里是所有的命令:


AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_操作系统_06

 


组件实战

这里我先尝试创建一个 component,命令如下。

ng g component nav

这里我创建了一个 nav 组件。执行成功后,后台会自动部署。我们看一下文件目录有什么改变

AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_配置文件_07

多了一个叫做 nav 的文件夹,看一看文件目录

AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_操作系统_08

我们发现与项目创建时自带的 app component 目录结构相同,内容也大同小异,大家可以尝试去创建一个自己的组件,组件的样式可以去对应的 css 文件中修改。

创建一个home的module;

 ng g component home



AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_操作系统_09


我们看到 app下面多了一个home的component,它应有的css,html,*.spec.ts(测试代码),ts都生成了;如果没有组件化经验的同学可能会问,为啥有css,html,ts,*.spec.ts都放在这下面啊?因为组件化可以重复使用,提高效率,庞大的工程代码中可以提高可维护性,阅读性,方便测试等等;

再试着创建一个angular的模块

ng g module about


AngularJS2 教程 -- Angular-cli搭建Angular2开发环境_操作系统_10

about 模块创建


可以看出模块比component多了一个module.ts文件。

创建路由

这里 cli 暂时禁用了创建路由,新的路由生成器即将到来,您可以在这里阅读新路由器的官方文档:https://angular.io/docs/ts/la...

建立一个 build

ng build

 

会生成到 dist/


标签:npm,cli,--,component,ts,ng,angular,AngularJS2
From: https://blog.51cto.com/u_4387387/6319997

相关文章

  • 行人检测(人体检测)1:人体检测数据集(含下载链接)3. COCO数据集
    行人检测(人体检测)1:人体检测数据集(含下载链接)目录行人检测(人体检测)1:人体检测数据集(含下载链接)1.前言2.VOC数据集3.COCO数据集4.MPII数据集5.人体检测(包含人体+人脸框)数据集下载6.人体检测(行人检测)效果(Python版本)7.人体检测(行人检测)效果(Android版本)1.前言这是项目《行......
  • 【Android】Uri、UriMatcher、ContentUris详解
     1.Uri通用资源标志符(UniversalResourceIdentifier,简称"URI")。Uri代表要操作的数据,Android上可用的每种资源-图像、视频片段等都可以用Uri来表示。 URI一般由三部分组成:访问资源的命名机制。 存放资源的主机名。 资源自身的名称,由路径表示。      Android的Uri由以......
  • Android数据储存之File文件储存数据
     一.存储在内部还是外部?AndroidManifest.xml中manifest标签下有一个属性android:installLocation,用于指定应用程序安装在什么地方,该属性有三个可选值:auto:程序可能被安装在外部存储器上,例如SD卡;但是默认会被安装到手机内存中。当手机内存为空时,程序将被安装到外部存储器上;当程序安......
  • []复习]cityengine2019/2022导入shp数据生成福田区建筑群
    时间是一把杀猪刀和人工智能比起来我太弱了.很无助.无法给自己升级系统.cityengine2019目前载入那种地区线上数据是行不通了,2022可以整一个邮箱试用一个月.https://www.esri.com/zh-cn/arcgis/products/arcgis-cityengine/trial/professionals我整了一个万能无线邮箱,无法注册,......
  • 位运算(位于、位或、异或、按位取反、位左移、位右移)及相应示例
    一、位运算符运算符含义a&b位与aba^b异或~a按位取反a<<b位左移a>>b位右移二、运算符说明:把他们转化为二进制从低到高按位运算位与(&):当两位都为1时,结果为1,否则为0,在将得出的结果转化为十进制,得出位于的结果位或(|)当且仅当两位都为0时,结果为0,否则为1,在将得出的结果转化为十......
  • mysql本人常遇到的错误码及解决办法(27种)
    mysql(本人遇到到错误码及解决办法)1045ER_ACCESS_DENIED_ERROR访问被拒绝数据库服务器/数据库用户名/数据库名/数据库密码错误2020年03月26日再次遇到1045'failedtocreatenewsession'没有空间啦,清理一下空间2020年06月24日1045Accessdeniedforuser'root'@'xxx......
  • AS3 Socket 通信基础(一)
    我们先来搞清几个概念,这有助于我们更加了解网络通信!  1、网络中进程之间如何通信?  首要解决的问题是如何唯一标识一个进程,否则通信无从谈起!在本地可以通过进程PID来唯一标识一个进程,但是在网络中这是行不通的。其实TCP/IP协议族已经帮我们解决了这个问题,网络层的“ip地址”可......
  • 最快Android模拟器Genymotion的安装
        在这开发Android的一段时间内,一直是使用真机进行测试的,使用过的机子包括华为U8825d,红米,MX3.深知Android的最大问题就是碎片化,就是各种适配问题,甚是头疼。也是一直听说Genymotion的快速与强大,也是亲眼见过别人使用Genymotion,完全把Android自带的AVD碾压的渣都不剩。所以......
  • as3 图像颜色渐变中使用matrix
    graphics 对象也可以绘制渐变笔触和填充,而不是纯色笔触和填充。渐变笔触是使用 lineGradientStyle() 方法创建的;渐变填充是使用 beginGradientFill() 方法创建的。 这两种方法接受相同的参数。前四个参数是必需的,即类型、颜色、Alpha 以及比率。其余四个参数是可选的,但对于......
  • RocketMQ事务消息原理
    一、RocketMQ事务消息原理:        RocketMQ在4.3版本之后实现了完整的事务消息,基于MQ的分布式事务方案,本质上是对本地消息表的一个封装,整体流程与本地消息表一致,唯一不同的就是将本地消息表存在了MQ内部,而不是业务数据库,事务消息解决的是生产端的消息发送与本地事务执行......