Angular环境准备和Angular CLI

内容简介：Angular环境准备和Angular CLI

Angular4.0来了，更小，更快，改动少，接下来为Angular4.0准备环境和学会使用Angular CLI项目。

1.环境准备：

1）在开始工作之前我们必须设置好开发环境

如果你的机器上还没有安装 Node.js 和npm，请安装他们

（这里特别推荐使用 淘宝的镜像cnpm ，记得以后把npm的指令改为cnpm就可以了）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

然后我们可以通过node -v和cnpm -v来分别查看node和cnpm安装的版本和结果

node -v
cnpm -v

2）安装全局Angular cli

cnpm install -g @angular/cli

2.创建新的项目

打开终端窗口（这里我使用的是webstorm的Terminal，也可以使用计算机自带的powershell）

ng new my-app

项目会很快创建完成，接下来你会看到

Installing packages for tooling via npm

这里如果你选这了淘宝的cnmp镜像，应该最好在安装完全局Angular cli后设置一下，保证正常下载工具

ng set global packageManage = cnpm

然后我们的项目就创建完成了

我们会发现在文档中有很多文件，这里参考 Angular官方文档 ，以便认识这些文件的作用。

3.在项目中引入bootstrap和jQuery

这里我使用webstorm的Terminal，直接在终端操作

cnpm install bootstrap --save   

cnpm install jquery --save

我们在项目中就添加了bootstrap和jQuery，我们可以在node_modules文件夹中找到他们（这个文件夹放的是第三方库）；

然后我们需要操作 .angular-cli.json 文件，把bootstrap和jQuery添加进去:

这里需要注意的是：因为angular用的是微软开发的typescript语言，我们需要在终端做下面的操作，以便让typescript认识bootstrap和jQuery一些字符（比如jQuery的$）：

cnpm install @types/bootstrap --save-dev

cnpm install @types/jquery --save-dev

这样我们就在项目中正常使用bootstrap和jQuery了

4）项目的启动

启动项目我们可以直接通过：

ng serve

或者是

npm start

这两个的默认端口都是4200：

http://localhost:4200

这里你也可以修改默认的端口:

ng serve -p 3000

5)最后项目的打包

用angular cli创建的项目会有很多文件，我们就需要打包后再发行：

ng build

本文永久更新链接地址 ： http://www.linuxidc.com/Linux/2017-05/144047.htm

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• Openstack Queens 环境搭建（一）环境准备
• 详解Openstack环境准备
• GraphEngine的开发环境准备
• 【MyBatis源码分析】环境准备
• Spring 源码学习-环境准备
• flask之旅: 开发前环境准备

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。