二、Angular 2.0开发指南以及搭建开发环境

自第一章讲Angular2.0的简单开发入门,我们了解到ng2的开发实践是围绕着web-component来展开的,ng2中更加强化了Component的概念,弱化了指令的概念(实际上Component是复杂指令)。同时我们学习到web-component中数据和视图是如何互相影响的,即InputOutput的概念,数据通过Input往view以及view里的子组件传递,view及其子组件通过Ouput来改变数据(VM通过数据绑定机制实现互通,View <- data-bindings -> Model)。

简单回顾上周分享(猛击此处)内容后,是否有跃跃欲试的冲动。这章带你快速搭建前端开发环境以及指导你如何学习ng2和解决开发过程中遇到的问题。

搭建开发环境

前端一直以来都是发展迅速,前端构建,前端开发IDE,前端应用型框架也更加完善和规范等。但是线上相关产品也是层出无穷,我们如何选择前端的开发工具呢。这里我们推荐的Webpack + Angular2 + vscode/webstrom集成开发,其中好处不在此敷述,所以这章会教大家搭建好这套集成开发环境。

实际上我们提供了一个ng2开发样板库webapp,在readme.md中有详细说明如何安装前端环境。环境搭建好后,按照脚本说明启动本地服务,即可访问到webapp提供的Demo示例。

搭建环境简单总结为3个步骤

  1. 安装开发工具
    sublime textvscodewebstorm 3选一
  2. 使用nvm管理nodeJS版本
    brew -> nvm -> nodeJS@v6.2.0 -> tnpm
  3. 本地集成环境
    naza-server@2.0.0-alpha -> quick start

Angular2.0开发指南

ng2官网文档的开发者指南有做详细介绍,但对于新手来说,可能对于ng2中的一些概念和特性还比较陌生,所有这里会从我个人学习ng2的经验来理解ng2的一些简单概念和开发思路。

ng2开发应用的步骤归纳

bootstrap -> app -> components -> services -> utils(http, pipes, etc...)

  1. bootstrap初始化应用,指定参数一般是app,通过bootstrap,app组件开始应用到页面中,展现我们想要看到的效果。
  2. app,我们这里假设应用就是一个大组件,app就是这个大组件,在这个大组件里,我们把页面分隔为很多个小组件,每个组件实现页面的具体的一部分功能,所有功能构成一个整体。
  3. components多个小组件,开发思路和app,即可以有自己的子组件,可以一直嵌套下去。
  4. services服务,实际上是封装好的代码逻辑,可以是数据,函数,类等,组件中注入service可以使用到提供的封装逻辑。
  5. utils工具类,是services封装逻辑是需要用到的工具类,比如ajax请求需要用到http类等。

ng2开发过程的代码实现

我们更关心在ng2开发过程中,components如何嵌入多个子组件和服务,其中decoratormetadata概念如何理解。看官网提供的的关系图:

  1. Components vs Directives
    组件和指令的同异点

    • 组件也是指令,指令分为3种类型:组件,结构指令和属性指令。
    • 组件是复杂指令,具有更丰富的生命周期(比如组件渲染之前,组件渲染成功)
    • 创建组件类需要@Component, 创建指令需要@Directive
  2. Decoratorsmetadata的关系
    • 装饰器是用来装饰组件,类,函数甚至参数的行为。
    • 装饰器工作时,需要传入一些配置信息,这些配置信息统称为metadata
    • metadata实际上还包含整个应用的一些全局配置信息。
  3. Directivesservices的关系
    • 指令和服务独立开发,但指令需要调用服务时,通过metadata的providers声明后方可使用。(提示:指令定义需要@Component或者@Directive来装饰,这里说的metadata就是这2个装饰器的配置信息)
    • 指令中使用服务时,需要在指令类的constructor的参数中声明使用的服务,指令在工作时,ng2内部会自动注入服务的实例到constructor中。
    • 父指令声明了服务,在子指令可以不用声明也可以使用。
    • 这里说的指令涵盖组件和指令

在了解ng2编码的同时,我们会发现ng2把框架提供的功能全分散到各个模块中,比如@Component需要通过import { Component } from '@angular/core'来获取到,而ngFor指令需要import { NgFor } from '@angular/common'。具体那些功能在于哪些模块,貌似只能通过官方提供的API(猛击此处)来查找了,但是我们通过给模块做个分类,更加方便我们查找相关的API


ng2模块分类

先上图

最重要的4个模块基本能解决新手开发的需要,4个模块分别为:
1. @angular/core,所有组件、指令、服务等定义类时需要的装饰器,都可以通过 @angular/core 找到
2. @angular/common, 所有ng2提供的指令、服务和过滤管道pipes(主要做转换,比如货币转换,json转字符串等),通过 @angular/common 可以找到。
3 @angular/http,所有ajax请求相关的API在此
4. @angular/platform-browser-dynamic, 实际上我们只用到bootstrap,但也是基本应用初始化必须使用的。

OK,更多的内容,还需要各位在学习的过程中慢慢体会和理解其原理,ppt比较简陋,确是这段时间个人学习ng2的一个心得,细细品味,相信你会有更多的收获。:)

本次章节PPT

时间: 2024-08-03 16:24:28

二、Angular 2.0开发指南以及搭建开发环境的相关文章

Django 博客开发教程 1 - 搭建开发环境

本教程使用的开发环境 本教程写作时开发环境的系统平台为 Windows 10 (64 位),Python 版本为 3.5.2 (64 位),Django 版本为 1.10.6. 建议尽可能地与教程的开发环境保持一致(尤其是 Python 与 Django 版本),避免不必要的麻烦.推荐的 Python 版本为 Python 3.4 或以上,Django 版本号必须为 Django 1.10.x. 注意:本教程将尽量保证兼容 Python 2,但不会在 Python 2 环境下做测试.如果你因为某

SWT/JFace开发入门指南之搭建开发环境

写在前面的话 终于决定提起笔来写一篇关于swt和JFace编程的文章.在开始之前,我想先介绍一下你能够从将要出现的这一系列文章里得到什么,以及更重要的,你不能得到什么.我们的时间是如此之重要,以至于我们很难容忍把它浪费在自己不关心的事情上. 因为我刚开始写,所以到底这些文章会分成几次发布出来,也很难讲.但是我心里大体有这样一个提纲.也就是说,我打算介绍以下方面的内容: ·设定swt以及JFace的开发环境 ·swt的一些简单部件(widget)介绍 ·JFace的一些入门性介绍 ·swt和JFa

jBPM-4.0中文开发指南-第11章 环境

第 11 章 环境 11.1. 简介 环境组件由连接环境组合是一种控制反转(IoC)容器. 它读取配置信息, 描述对象应该如何实例化 ,如何配置,如何连接在一起. 环境被用来获得Activity实现 和流程虚拟机所需的资源和服务. 主要目的是让流程虚拟机的多个部 分可配置, 这样PVM和运行在顶部的语言可以工作在一个标准Java环境 也可以在一个企业Java环境. 环境被分成一系列环境. 每个环境可以拥有自己的生命周期.比如,流程引擎环境会 覆盖应用的全 生命时间.块环境只对try-finall

【HIBERNATE框架开发之一】搭建HIBERNATE环境并成功运行第一个项目HELLOHIBERNATE并解决3个常出现的运行问题;

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/hibernate/783.html OK,从这篇开始Himi将与大家一起进入Hibernate框架的学习啦,新手新手的说,希望大家多多指教: 对于Hibernate概述一下: "  Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. H

【UNITY3D 游戏开发之一】搭建UNITY3D环境&amp;导出自带DEMO示例;

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/unity3d-game/709.html 那么从下个月开始Himi将陪大家一起关注下Unity3D的开发,主要是针对于iOS和Android两个平台,当然在Unity3D的项目当今支持导出的平台有如下: 1.Web Player 2.PC  and Mac 3.iOS 4.Android 5. Flash Player 6.Xbox 360

AngularJS中的指令实践开发指南(二)_AngularJS

在AngularJS中的指令实践指南(一)中给大家介绍了,如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令内部访问到父scope的属性.接着,我们会基于对 controller 函数和 transclusions 讨论如何为指令选择正确的scope.这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用. 隔离scope和父scope之间的数据绑定 通常,隔离指令的scope会带来很多的便利,尤其是在你要操作多个scope模

jBPM-4.0中文开发指南-目录

jBPM-4.0中文开发指南-第15章 流程语言 jBPM-4.0中文开发指南-第14章 持久化 jBPM-4.0中文开发指南-第13章 执行模式 jBPM-4.0中文开发指南-第12章 其他环境 jBPM-4.0中文开发指南-第11章 环境 jBPM-4.0中文开发指南-第10章 委派类 jBPM-4.0中文开发指南-第9章 历史 jBPM-4.0中文开发指南-第8章 软件日志 jBPM-4.0中文开发指南-第7章 高级图形执行 jBPM-4.0中文开发指南-第6章 流程剖析 jBPM-4.0

AngularJS 中的指令实践开发指南(一)_AngularJS

指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用.在这篇文章的最后(第二部分),我会指导你如何使用Angular指令来创建一个简单的记事本应用. 概述 一个指令用来引入新的HTML语法.指令是DOM元素上的标记,使元素拥有特定的行为.举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件.让HTML能识别这个语法,我们需要

《ASP.NET 开发从入门到精通》----第2章 搭建开发环境 2.1 配置ASP.NET环境

第2章 搭建开发环境 ASP.NET 开发从入门到精通 ASP.NET是一门功能强大的Web开发技术,它是建立在特定的开发平台之上的.所以在进行ASP.NET开发前,需要为其建立专门的开发平台,搭建开发环境.在本章中,将简要介绍搭建ASP.NET开发环境的方法,为读者学习本书后面的内容打好基础. 2.1 配置ASP.NET环境 知识点讲解:光盘:视频\PPT讲解(知识点)\第2章\配置ASP.NET环境.avi 因为ASP.NET应用程序的宿主是IIS,它包含在微软的Windows系统中.对于个