用Angule Cli创建Angular项目

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 packageManager = 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calvin

.Net Core Linux centos7行—安装nginx,运行静态网站

703
来自专栏程序员的碎碎念

LAMP集成开发环境配置

什么叫做LAMP呢?顾名思义,那就是linux+Apache+mysql+php集成开发环境,当然也有lnmp,安装步骤差不多的。 首先,你得...

3427
来自专栏finleyMa

docker学习系列15 Docker在PHPStorm中的使用

下面介绍怎么通过PHPStorm创建并运行一个docker容器项目,以Windows系统为例

1763
来自专栏Angular&服务

Angular2 项目结构解释

673
来自专栏JMCui

Hybris 项目工程配置

1、控制台页面进入platform目录 cd F:\hybris640\hybris\bin\platform 并运行 setantenv.bat 生成对应的a...

4089
来自专栏weixuqin 的专栏

Django 实现第三方账号登录网站

  这里我们使用 django-allauth 模块来实现第三方账号验证登录,官方文档如下:https://django-allauth.readthedocs...

931
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境

打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境 虽然前后端分离开发的我们,已经很少需要跑一个 apache+php+mysql 的集...

2105
来自专栏Android Note

Android – Mac终端安装APK

1214
来自专栏Python疯子

UnicodeEncodeError:'latin-1' codec can't encode characters in position 0-1: ordinal not in range(...

解决方法,在sql.py中,或者是链接数据库时,添加:最后增加一个 : charset="utf8" 就好了

782
来自专栏编程坑太多

『中级篇』docker之CI/CD持续集成-gitlab安装(70)

PS:gitlab安装基本就是这样也不是很复杂,主要是必须更改源,国内的墙太高太宽了。

744

扫码关注云+社区