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
时间: 2024-07-30 00:14:57

Angular环境准备和Angular cli的相关文章

dtGrid插件集成到Angular环境实现表格化数据展现

00没有抱怨的世界 周末效率好低,两天没更了,看看这看看那,装了个win10发现触摸板驱动不适配,然后找了好久都不行,23333. AngularJS用的时间很短,高级的用法有点吃不消了,$digest,$watch这种东西的原理看起来好吃力啊,后面还有大把大把的需求要用这个来做了#¥@%#@! 01.先看看效果吧 这里的所有数据相关信息都是直接配置到DB的,作为元数据,包括搜索条件,显示方式,数据过滤器等等,配置目前只实现了几个,加的配置越多,能适用的业务就越广.数据本身也是在DB的,在后台简

Angular 1.0演变Angular 2.0的简单优势列举

首先,Angular最核心的4大特性分别是: 1.模块化 2.MVC 3.双向数据绑定 4.指令 Angular 1.0演变Angular 2.0的简单优势列举: 1.性能限制上的优化 说明:随着时间的推移,各种特性被加入进去以适应不同场景下的应用开发,在最初的架构受到了限制,而Angular 2.0很好的解决了这些问题. 2.仿照WEB后端的结构模式来编写前端 说明:支持模块.类.lambda表达式. generator等新的特性 3.支持移动端开发 说明:Angular1.x没有针对移动 应

Angular环境搭建

工具的安装 首先需要安装node,直接在官网下载node,然后一直下一步安装完即可,在安装node的时候自带了npm包管理工具 然后安装Angular CLI,使用npm命令安装输入以下命令 npm install -g @angular/cli 使用ng -v 查看版本是多少,有结果说明安装成功 安装WebStorm 集成开发环境,直接去webStrom官网下载,一直下一步即可,最后激活的时候选择License server 输入:http://idea.iteblog.com/key.php

Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定义功能 1.4 模块:将应用中的不同部分组织成一个angular框架可以理解的单元 1.5 组件+服务+指令 = 模块 组件+服务+指令 是用来完成业务功能的:模块 是用来打包和分发的 2 开发环境搭建 2.1 安装node.js 很简单,百度即可 安装完后在我们的命令窗口中就可以使用 npm 命令

angular环境安装与配置

1.安装npm和nodejs,下载地址:https://nodejs.org/en/download/ node -v npm -v 2.配置淘宝代理,下载node_modules npm config set registry https://registry.npm.taobao.org npm config get registry 3.通过cnpm使用npm.你可以使用cpnm命令代替大部分的npm命令. npm install -g cnpm --registry=https://re

angular学习笔记---通过angular/cli建一个新的项目

理一下基于angular/cli建立新项目的思路: (1)安装nodejs (2)安装git (3)安装淘宝镜像cnpm (4)安装@angular/cli,在管理员模式下运行:cnpm install -g @angular/cli (5)测试@angular/cl是否安装成功,运行:ng (6)选择一个目标文件夹,进入该文件夹,如首先进入e盘:e:     ,其次进入e盘下的test文件夹:cd test   ,再在该文件夹下建立一个项目:ng new project 此时,项目建好之后会自

windows7或10 angular 环境搭建

1.nodejs 安装 https://nodejs.org/en/ 此网址下载相应版本 2.设置 npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 3.安装typescript https://www.typescriptlang.org/#download-links 这儿安装就 4.npm i

[Angular 2] Create Angular 2 Porject with Angular CLI

Install: npm i -g angular-cli Create a project: ng new hello-angular2 Run the project: cd hello-angular2 ng serve Change the port: ng serve --port 4201 --live-reload-port 49153 Create a component: ng g component contact-list-component The component w

RxJS之过滤操作符 ( Angular环境 )

一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observable 是否完成. import { Component, OnInit } from '@angular/core'; import { range } from 'rxjs/observable/range'; import { take } from 'rxjs/operators/take'