Problem

  1. 使用依赖注入应该注意些什么
  2. 服务一般用来做什么
  3. 指令一般用来做什么
  4. angular2如何提取公共组件
  5. angular2为什么不需要提公共组件
  6. 父组件与子组件之间如何通讯
  7. 什么时候应该使用ngModel
  8. 为什么要用Typescript?我喜欢JavaScript
  9. 为什么如Input之类的语法后面必须加()

Solution

使用依赖注入应该注意些什么

首先我们要明白什么是依赖注入(Dependency Injection, DI),Java程序员应该不会陌生,DI是一种编程模式,它让一个类从外部资源中获取它的依赖,而不是自己亲自创建它。这样的好处是什么呢?好处就是我们不必去关心如何创建依赖这个过程,我们只需要舒服的使用这个已经创建好的实例就行。在angular2中使用DI一般是在组件中,注入的东西我们一般称之为service,使用@Injectable()进行标记。在使用DI时需注意在Component中的providers中声明该服务,然后在class中contructor中声明即可,eg:

@Component({
selector: 'source-list',
styles: require('xxx.scss'),
template: require('xxx.html'),
providers: [Regions]
})
export class SourceList {
constructor(private Region: Regions) {
}
}

此外,若组件的父组件providers中引入了一个service,在其子组件中可不用引入直接在contructor中声明即可;否则会报"not providers..."之类的错误

服务一般用来做什么

服务是什么呢?"Service" is a broad category encompassing any value, function or feature that our application needs. 它可以是值、函数或所需的特性等,一个典型的服务应该是具有专注、良好的定义的类。它应该做一件具体的事情,把它做好。我的理解,服务一般用来与后端通信即获取组件所需数据,或者管理组件特定属性的。

此外,服务的引入是单例的,也就是说你在一个组件中改变了这个服务对象的值,在另一个使用了该服务的组件也会跟随该服务的变化而变化。

指令一般用来做什么

指令一般用来操作DOM,通过在组件的directives中引入,这个引入就是新生成一个实例,他们之间互不影响,这点与服务相反。在我看来,指令大多时候都是按功能封装的一些组件,由父组件来统一使用。

还有另外两种指令,结构型指令与属性型指令。结构型 指令 会通过添加 / 删除 DOM 元素来更改 DOM 树布局。 NgFor 和 NgIf 就是两个最熟悉的例子。属性型指令改变一个元素的外观或行为。

angular2如何提取公共组件

angular2框架层面上就对样式进行了隔离,每个组件下属的样式对其他组件不会产生影响。

父组件与子组件之间如何通讯

父组件与子组件: 我一般通过input来实现,在子组件中用Input() 声明从父组件接收的变量,在父组件template使用子组件的地方传递改数据,eg:

父组件

@Component({
selector: 'source-list',
styles: require('xxx.scss'),
template: `
<header>
<nav-header></nav-header>
<nav-breadcrumb [paths]="paths"></nav-breadcrumb>
</header>
`,
providers: [Regions]
})
export class SourceList {
constructor(private Region: Regions) {
} path = '/source/list';
}

子组件

@Component({
selector: 'nav-breadcrumb',
template: require('./breadcrumb.html')
})
export class NavBreadcrumb {
constructor() {
} @Input() paths;
}

子组件与父组件: 我一般通过借助output和EventEmitter类来实现,通过在子组件中使用@Output()声明该类实例来获得和父组件通信的通道,支持触发事件并将相应数据返回,由父组件在template中使用处进行捕获。eg:

父组件

@Component({
selector: 'source-list',
styles: require('xxx.scss'),
template: `
<header>
<nav-header></nav-header>
<select-dialog (cancelDialogRequest)="cancelDialog()"></select-dialog>
</header>
`,
providers: [Regions]
})
export class SourceList {
constructor(private Region: Regions) {
} path = '/source/list';
cancelDialog() { }
}

子组件

@Component({
selector: 'nav-breadcrumb',
template: require('./breadcrumb.html')
})
export class NavBreadcrumb {
constructor() {
} @Output() cancelDialogRequest = new EventEmitter();
@Input() paths; cancelDialog() {
this.cancelDialogRequest.emit(1);
}
}

什么时候应该使用ngModel

ngModel用于数据双向绑定,一般形式为:

    <input [(ngModel)]="title">

它实际上是:

<input [value]="title"
(input)="title=$event.target.value" >

这又是是吗意思呢?我的理解是,[]表示值传递,也就是说这个值是其他地方定义的,这里就是引用了这个值,()表示事件监听,监听在此标签中该值得变化,并将此变化传递会来源的地方。因此,我们可以利用这一特性,将数据传递到子组件中,并在父组件里响应该数据的变化。比如,现在我们在父组件中有一个orders变量,我在父组件的模板中可以这样使用:

<delete-order-dialog [(orders)]="orders"></delete-order-dialog>

这样,我们在子组件里input该对象,通过一定操作,对orders进行的改变都能传递回父组件,并相应的展示在页面上。

为什么要用Typescript?我喜欢JavaScript

为什么要用typescript啊,我比较喜欢JavaScript这种弱类型的语言,想怎么用就怎么用,从来不需要考虑类型这些什么鬼。不管在什么领域都会有各种群体,就像目前的前端,就有React、Angular、Vue等,这些框架的使用者都很多,我们不能简单的去评判一个框架的优劣及难易程度,因为有些东西就是为特定的人群设计的,比如typescript,Java这种后端程序员使用起来就会顺手很多。嗯,秉持着多学点东西的开放心态,我开始使用spring、typescript了..

为什么如Input之类的语法后面必须加()

关于括号问题,官网其实已经多次提到了,Don't forget the parentheses! Neglecting them leads to an error that's difficult to diagnose. 没有()就会导致不可预料的错误!一定要写。为什么呢?这里我先做个假设,()在JavaScript里,一般都是执行某个函数,那么这里的input(),在我看就是执行了某个函数,标记了后面所跟着的变量,帮助程序运行定位的。

最后安利一波带我的老司机雪狼老大翻译的angular2中文官网

如想了解更多,请移步我的博客

PS:我还是如风少年!

Angular2开发笔记的更多相关文章

  1. Angular2学习笔记——路由器模型(Router)

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...

  2. [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自:酷小孩】

    原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...

  3. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  4. EasyUI 开发笔记(一)

    由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...

  5. angular2开发01

    // */ // ]]> angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准 ...

  6. [Openwrt 项目开发笔记]:Openwrt平台搭建(一)

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...

  7. Android移动APP开发笔记——Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例

    引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用 ...

  8. Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

    引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...

  9. 开发笔记:基于EntityFramework.Extended用EF实现指定字段的更新

    今天在将一个项目中使用存储过程的遗留代码迁移至新的架构时,遇到了一个问题——如何用EF实现数据库中指定字段的更新(根据UserId更新Users表中的FaceUrl与AvatarUrl字段)? 原先调 ...

随机推荐

  1. 如何一步一步用DDD设计一个电商网站(六)—— 给购物车加点料,集成售价上下文

    阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...

  2. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  3. ASP.NET MVC5----常见的数据注解和验证

    只要一直走,慢点又何妨. 在使用MVC模式进行开发时,数据注解是经常使用的(模型之上操作),下面是我看书整理的一些常见的用法. 什么是验证,数据注解 验证 从全局来看,发现逻辑仅是整个验证的很小的一部 ...

  4. C# 实时折线图,波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

  5. EC笔记:第4部分:20、传递引用代替传值

    考虑以下场景: #include <iostream> #include <string> using namespace std; struct Person { strin ...

  6. 【架构设计】分布式文件系统 FastDFS的原理和安装使用

    本文地址 分享提纲: 1.概述 2. 原理 3. 安装 4. 使用 5. 参考文档 1. 概述 1.1)[常见文件系统] Google了一下,流行的开源分布式文件系统有很多,介绍如下:   -- mo ...

  7. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  8. SharePoint 2013: A feature with ID has already been installed in this farm

    使用Visual Studio 2013创建一个可视web 部件,当右击项目选择"部署"时报错: "Error occurred in deployment step ' ...

  9. Git学习笔记一:新建本地仓库及初始化

    1.百度搜索Git下载安装,直接按默认选项安装即可. 例如:Git-2.7.2-32-bit_setup.1457942412.exe 2.配置Git信息,建立版本仓库 (Alt+PrintScerr ...

  10. Linux环境变量设置

    修改环境变量PATH 最近为root添加一个环境变量发现sudo su进去没有变化所以总结了一下所有设置环境变量的方法: 查看PATH:echo $PATH 直接在命令行修改,就可以使用,但是只有在当 ...