Angular 4环境准备与Angular cli创建项目详解

本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍:

1.环境准备:

1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们
(这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了)

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

然后我们可以通过node -vcnpm -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 g component navbar

5)项目的启动

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

ng serve

或者是

npm start

这两个的默认端口都是4200:http://localhost:4200

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

ng serve -p 3000

6)最后项目的打包

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

ng build

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • Angular 4环境准备与Angular cli创建项目详解

    本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 1.环境准备: 1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可

  • Android从0到完整项目(1)使用Android studio 创建项目详解

    使用Android Studio 创建Android项目,分享给大家 (1) 说明: 还有一部分人在坚持使用 Eclipse ,建议抓紧换掉.使用AS 可能会刚开始因为不熟悉而有一定的胆怯心理,不过当你熟悉你会发现 原来Android 开发其实这么便利.很多代码 都是可以一键生成的. 正文 一,准备工作 http://www.android-studio.org 下载Android Studio 安装成功后打开 Android 安装 自行百度 创建工程,Android 是单工程项目 这一点与Ec

  • 基于Angular中ng-controller父子级嵌套的相关属性详解

    ng-controller是为应用变量添加控制器 当有两个控制器father.child且child 在 father内,那child 可以称为子控制器,它将继承父控制器father的scope.child就可以访问到father的scope中的所有函数和变量. 例: <div ng-controller="father"> <div >name1:{{ name1 }}</div> <div ng-controller="child

  • Linux环境下Oracle安装参数设置方法详解

    前面讲了虚拟机的设置和OracleLinux的安装,接下来我们来说下Oracle安装前的准备工作. 1.系统信息查看 系统信息查看 首先服务器ip:192.168.8.120 服务器系统:Oracle Linux Server release 6.5 服务器主机名:oracle-learn 查看磁盘空间情况: [root@oracle-learn ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda1 32G 4.8G 26G

  • vue脚手架项目创建步骤详解

    vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr

  • Spring集成Web环境与SpringMVC组件的扩展使用详解

    目录 一.Spring集成Web环境(解耦) 二.SpringMVC快速入门 三.SpringMVC的执行流程 四.SpringMVC组件解析 五.SpringMVC注解解析 六.SpringMVC组件扫描的扩展 七.SpringMVC的XML配置解析之视图解析器 一.Spring集成Web环境(解耦) 实际开发中,我们通常需要编写多个Web相关的Servlet的时候,如下 package com.kang.service; import org.springframework.context.

  • Kubernetes应用配置管理创建使用详解

    目录 正文 Secret 创建Secret 使用YAML文件创建 使用kubectl命令创建 使用Secret 通过环境变量使用Secret 通过挂载的方式使用Secret 在拉取镜像的时候使用Secret 小结 ConfigMap 创建ConfigMap 通过命令创建ConfigMap 通过YAML创建ConfigMap 使用ConfigMap 通过环境变量使用ConfigMap 通过数据卷使用ConfigMap 总结 正文 不论什么样的应用,基本都有配置文件,在企业中,大部分会用到配置中心,

  • Java 利用dom方式读取、创建xml详解及实例代码

    Java 利用dom方式读取.创建xml详解 1.创建一个接口 XmlInterface.Java public interface XmlInterface { /** * 建立XML文档 * @param fileName 文件全路径名称 */ public void createXml(String fileName); /** * 解析XML文档 * @param fileName 文件全路径名称 */ public void parserXml(String fileName); }

  • python 环境变量和import模块导入方法(详解)

    1.定义 模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能 文件名就是模块名称 包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 import 模块名 form 模块名 import * from 模块名 import 模块名 as 新名称 3. 导入模块本质 import 模块名 ===> 将模块中所有的数据赋值给模块名,调用时需要模块名.方法名() from 模块名 import 方法名 ==>将该方法单独放到当前文件运行一遍

  • Android 逐帧动画创建实例详解

    Android 逐帧动画创建实例详解 前言: 我们看早期电影的时候,电影通常是一张一张播放,用我们现在专有名词来说,就是一帧帧来,安卓同样有这样动画效果的编排形式. 那么我们先定义逐帧动画xml文件 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" an

随机推荐