Angular 2基础(一)环境搭建

 

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

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:03月05日

热门专题

弥勒综合高中|弥勒综合高中
弥勒综合高中
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
大理科技管理学校|大理科技管理学校,大理科技,大理科技中等职业技术学校,大理科技管理中等职业技术学校,大理科技学校
大理科技管理学校
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部