Angular2是一款开源JavaScript库,由Google维护,用来创建页面应用程序。正式发布于2016年9月,基于ES6开发。

一、准备工作

使用Angular2开发,需要预先做一些配置上的配置,如NPM、Node.Js、Git等,还要对TypeScript有个大概的了解。

a)NPM是随同NodeJS一起安装的包管理器,那应该类似NuGet的作用了。NPM集成在了NodeJS安装包,可以一起安装,在CMD输入npm –v和node –v可以验证是否已安装。

b)TypeScript则是由微软开发的开源编程语言,是JavaScript的超级,扩展了JavaScript的语法,并且是强类型的。TypeScript的安装,可以下载安装包,也可以在CMD输入$ npm install -g typescript安装。

c) 使用TypeScript编写HelloWorld

创建index.html文件如下,引用hello.js。当前并不存在hello.js,需要从TypeScript编写的hello.ts编译生成。

hello.ts文件中只是简单的alert,这儿看不出typescript语法的特点。

然后在CMD加入文件所在的位置并执行tsc hello.ts,当前文件夹中就会出现hello.js,index.html就可以运行了。

d) 还要安装Git,之前顺便安装了GitExtension和TortoiseGit。

二、开始Angular 2

a) 使用Git Bash,创建项目存放路径。然后在目录中创建package.json、tsconfig.json、typings.json文件,内容可以从Angular2的GitHub或本书的示例代码复制。

然后需要执行npm install安装依赖组件,但国内基本无法直接使用npm,可以先安装淘宝的镜像$ npm install -g cnpm --registry=https://registry.npm.taobao.org,然后执行 cnpm install,cnpm会根据package.json下载需要依赖的组件。

b) 新建index.html内容为:

当前只添加了需要引用的js和css,没有其它内容。有必要了解一下添加这几个js引用的目的。

ES6Shim,Shim为垫片的意思,这个文件的作用主要为了保证对旧版本浏览器的兼容性。对于支持最新的ES6标准的浏览器,可以不需要这个文件。

Zone,大概作用是让Angular能够检测数据的变化,当前无法深入了解。

ReflectMetadata,Angular2使用Typescript语言,TypeScript具有类型注解(Annotation),添加这个引用是为了能够使用这些注解。

SystemJs,是一个模块加载器,用于创建模块并解析模块间的依赖。

c) 接下来创建TypeScript文件app.ts,.ts文件之后会被编译成.js文件。

使用import{things} from “where”的格式,添加依赖项。

Angular2的最大特点就是组件(component)。正常情况下,浏览器只能识别属于html的标记,比如<form>、<ul>等,如果想要浏览器识别一个<hello-world>标签,按照常理是不可能的,但这真是Angular2的组件要做的,即“教会浏览器识别新的标签”。

上面图片中@Component中便是定义了一个组件,selector属性指定了DOM元素即标签的名称,编译时会找到对应的组件做处理。

template属性可以指定模板,模板用倒引号( `…` )括起来,倒引号语法是ES6的新特性,可支持多行字符。

最后一行的bootstrap(HelloWorld);设定了程序的“入口”为HelloWorld组件,程序启动后,HelloWorld会首先被渲染。

学习资料:The Complete Book on AngularJS 2 by Ari Lerner, Felipe Coury, NateMurray, Carlos Taborda

Angular 2基础(一) 环境搭建的更多相关文章

  1. Centos 基础开发环境搭建之Maven私服nexus

    hmaster 安装nexus及启动方式 /usr/local/nexus-2.6.3-01/bin ./nexus status Centos 基础开发环境搭建之Maven私服nexus . 软件  ...

  2. Angular总结一:环境搭建

    工欲善其事必先利其器,开发 Angular 项目首先要搭建环境.Angular 的环境搭建包括三个方面,开发环境 WebStorm,命令行工具 Angular CLI,以及 nodejs. 一.安装 ...

  3. Python基础1-Python环境搭建

    Python环境搭建首先通过终端窗口输入 "python" 命令来查看本地是否已经安装Python以及Python的安装版本: 若未安装则需要下载安装,下面为linux和windo ...

  4. 大数据基础-2-Hadoop-1环境搭建测试

    Hadoop环境搭建测试 1 安装软件 1.1 规划目录 /opt [root@host2 ~]# cd /opt [root@host2 opt]# mkdir java [root@host2 o ...

  5. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...

  6. .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm ...

  7. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  8. Angular2.0 基础: 环境搭建

    最近在学习Angular2的使用,其实看过Angular2 文档的都知道,相比于之前的Angular1,Angular2 的改动还是挺大的. 而对于‘angular2 的本地开发环境的搭建的中,我们首 ...

  9. 【1】循序渐进学 Zabbix :初识与基础依赖环境搭建( LNMP )

    写在前面的话 运维监控是一个很大的话题,在这一块个人接触的比较突出的服务主要有 Nagio 和 Zabbix 两款.而这几年跳过的公司中,Zabbix 一直都是首选且唯一选择,Nagios 没遇到. ...

随机推荐

  1. C#6.0语言规范(三) 基本概念

    应用程序启动 具有入口点的程序集称为应用程序.运行应用程序时,会创建一个新的应用程序域.应用程序的几个不同实例可以同时存在于同一台机器上,并且每个实例都有自己的应用程序域. 应用程序域通过充当应用程序 ...

  2. [每天解决一问题系列 - 0010] ADB Not Responding - Android Studio

    问题描述: 最近安装了Android Studio v1.0,运行的时候老是这个错误 解决方案: 网上有人说是已经有adb的进程在运行,可是打开任务管理器,找不到对应的adb 进程. 无奈之下,想到a ...

  3. GO入门——6. struct与方法

    1 struct Go 中的struct与C中的struct非常相似,并且Go没有class 使用 type struct{} 定义结构,名称遵循可见性规则 支持指向自身的指针类型成员 支持匿名结构, ...

  4. vue axios封装以及API统一管理

    在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理 ...

  5. 【杂谈】线程中断——Interrupt

    前言 以前有一个错误的认识,以为中断操作都会抛出异常,后来才发现并不是这样,所以今天就来做一个关于中断的总结. 如何关闭线程 已被弃用的Stop方法 早期,Thread类中有一个stop方法,用于强行 ...

  6. 修复Nginx 502错误:upstream sent too big header while reading response header from upstream

    原文出处:https://www.cnblogs.com/jpfss/p/10237463.html 便于以后参考我复制了过来! cookies的值超出了范围我是说 看看了一下日志 错误502 ups ...

  7. Maven教程2(Eclipse配置及maven项目)

    Maven教程1(介绍安装和配置) Eclipse中配置maven 1.Eclipse中默认集成的有Maven 可以使用默认的,本地仓库在当前用户下的.m2文件夹下. 2.配置我们自己安装的maven ...

  8. JS下计算当前日期(当天)后N天出现NAN或者undefined的情况

    前言: 帮客户做一个订单系统,需要一个日期1,一个日期2,默认情况下日期1为当天,日期2为明天,只是当时有些疑惑的是日期2偶尔会出现NAN的情况,今天在segmentfault.com看到了同样的问题 ...

  9. ASP.NET MVC5 + EF6 + LayUI实战教程,通用后台管理系统框架(3)

    前言 本节将我们自己的CSS样式替换系统自带的 开始搭建 将脚本文件夹删掉,将内容文件夹里的内容删掉,将我们自己的CSS样式文件,全部复制到内容里边 新建家庭控制器 给家庭控制器添加索引视图 指数代码 ...

  10. U3D GameObject 解读

    GameObject本身没有功能,是Unity场景里所有组件的基类,但很多时候我们需要在脚本中操作GameObject.先讲一下GameObject类包含哪些内容,其中常用的用红色标出了 Variab ...