上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web api来提供调用:好在Angular2提供了本地模拟的api,可以供我们编写方便:但是,真实使用的情况往往与本地模拟有一些差别,会存在跨域等一系列问题:这些不在本篇文章的讲解范围之内,如果在.net下遇到跨域问题可以直接私信我. Angular的http模块并不是Angular2的核心模块,你并不一…

Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于本人非专业前段,代码写的自己都感觉是"一塌糊涂",十分混乱.现在看到Angular2十分火爆,跑了跑它的The Tour of Heroes的例子,感觉非常不错,代码组织的井井有条,于是乎决定学习一下Angular2,然后用它将之前的NiceMark重写一下…

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用…

上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们的程序更好的工作. 假设你已经跟上了我们的进度. 我们来为我们的文章明细新增一个评论框:当我们在明细中点击评论的时候,在我们的明细页面显示评论,这里,我们就可以完全把明细页面看成一个独立的路由,可以建立自己的子路由页面,做一些评论,分享等操作. 那,首先在data目录下建立我们的评论实体Commen…

上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇文章开始引入第三方的css库materializecss,引入方法直接在index.html中普通引用就可以了 众所周知,Angular出现的目的就是解决web编程的一些限制,让我们编写的网页能像App一样运作,我们现在称之为单页面应用(SPA),单页面应用程序有诸多好处,譬如页面响应快,良好的前后…

上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得我们可以很优雅得做到这一点.这里简单描述下,依赖注入可以使我们在编写代码的时候不用使用new 去生成一个类,这样就达到了解耦的目的,更多关于依赖注入的知识我觉得不应该在这里讲解 和其他方式类似,Angular2使用的是装饰器@Injectable()来描述以一个类是否可注入,我们本篇文章的目的,就是…

上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做一个博客,博客的的文章具有主从关系,文章和文章详情;现在,我们新建一个Article的文件夹和其组件的基本架构(顺便说一下,我使用的是vs code 有个Angular2 fiels的插件,可以直接建立) 效果如下 我们需要显示博客,那就要建立一个blogdata的数据来源,这里为了方便我们直接采用…

上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着上一篇 环境搭建 的文章,我们这一篇来讨论Angualr2的项目结构和几本组件的编写模式 Angular-cli.json里面配置了项目的几本信息,包括版本名字之类的 package.json 是npm包配置 tslint你可以自行百度下,是一种标准化代码检查的东西 其他的不用特别去关心,我们项目的…

一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复返,如果你想了解前端最近究竟有什么变化,不妨去看看这篇文章:在2016年学习javascript是一种什么样的体验? 在学习之前,你可能需要先粗略了解几个东西! 1.nodejs 2.npm 包管理 以下的东西就当你是知道了这些概念了 1.首先,到nodejs 官网下载nodejs并安装 2.添加淘…

今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:…

今天我们要讲的是ng2的路由系统. 例子…

大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子…

大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/http.dev.js"></script> 例子…

今天,我们要讲的是angualr2的pipe这个知识点. 例子…

Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使用ngModel 为什么要用Typescript?我喜欢JavaScript 为什么如Input之类的语法后面必须加() Solution 使用依赖注入应该注意些什么 首先我们要明白什么是依赖注入(Dependency Injection, DI),Java程序员应该不会陌生,DI是一种编程模式,它…

在生活中有一种东西几乎已经快要成为我们的另一个电子”身份证“,那就是二维码.无论是在软件开发的过程中,还是在普通用户的日常中,几乎都离不开二维码.二维码 (dimensional barcode) ,又称二维条码,是在一维条码的基础上扩展出的一种具有可读性的条码.设备扫描二维条码,通过识别条码的长度和宽度中所记载的二进制数据,可获取其中所包含的信息.相比一维条码,二维码记载更复杂的数据,比如图片.网络链接等. 今天介绍一种免费开源的二维码操作组件,ThoughtWorks.QRCode组件可以高…

为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.net core一样,所有的东西都在向同样的方向迈进:尽量使用已经造好的轮子,而不是自己再弄一个. 当然,统一是好的,但是对于对前端不是太敏感的我来说,还是挑战不小,这就要求我要学好angular2,必须要熟悉一系列的工具链.加油. 今天要说的是一个可以说我遇到的很诡异的问题,我在angular1上进…

上一篇.net core和angular2之前端篇-1 使用的是dotnet模板.之所以用它,因为想用他写webapi,但是写道下一篇的时候遇到点问题,所以先写个分支测试一下.这次是用Node作为服务器--webpack-dev-server.感觉这个demo 好简单啊! 一.新建一个项目目录,这里为F:\Visual Studio Code\app1 二.在项目根目录下添加JSON配置文件:package.json.tsconfig.json.typings.json { "name"…

2016-10-20更新 今天的这篇文章还是一篇"Hello World",只不过开发环境有所改变--Visual Studio Code+Angular2+Webapck,也算是正式的开篇了. 一.新建一个文件夹作为此次Demo的根目录,这里为:"F:\Visual Studio Code\app1",并在"命令提示符中打开",键入:dotnet new -t web  如下图: 说明:这不是一个空项目,作为一个demo,太罗嗦了!但是还不清楚…

最近看到一篇用Visual Studio Code开发Angular2的文章,也是一篇入门教程,地址为:使用Visual Studio Code開發Angular 2專案.这里按部就班的做了一遍,感觉很方便,并且没有遇到楼主的一些问题,应该是安装环境有些不同.这里只为记录一下.再次感谢! 一.随便新建一个目录,这里为:F:\Visual Studio Code\angular2_1,并用Visual Studio Code 二.依次新建如下四个文件,参考https://angular.cn/do…

最近angular2正式版发布了,现在就趁热接着记录一下2.0版的Hello World.据说由RC6升级到2.0代码改动不是很大,在写的时候也感觉改动不是很大,这次记录还是以asp.net core 空项目模板为基础,本着在此基础上添加最少的代码来实现Hello World,没用的代码全部清掉(用的时候再引入). 一.准备工作. 首先,创建一个asp.net core空项目,并在Startup.cs类中添加“静态文件支持”:然后,在项目根目录下添加NPM配置文件.Gulp配置文件和typesc…

angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.codeproject.com/Articles/1124864/ASP-NET-Core-and-Angular-Code-Venture-Part 首先还是先创建一个ASP.NET Core Web Application空应用程序.还是在Startup.cs类中添加静态文件处理,下面说一下几处和上一篇…

公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记录下来,现在重新拾起来还费了半天劲儿!弄了半天总是报错,按着文件对比了半天也没有找打是哪里写错了……哎!最后发现是版本的问题,这次想把它记录下来,方便之后查看. 环境:Visual Studio 2015 Update 3+Asp.net core templates  一.创建一个 Asp.net…

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa…

Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使用可观察数据序列实现组合异步和事件编程. 跟这个很类似的异步编程模型是Promise,Promise是基于状态变化的异步模型,一旦由等待状态进入成功或失败状态便不能再次修改,当状态变化时订阅者只能够拿到一个值:而Observable是基于序列的异步编程模型,随着序列的变化,订阅者可以持续不断的获取新…

工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig = [{ path: 'app/:id', component: AppComponent, children: [ { path: 'share', component: AppShareComponent }, { path: 'issue', component: AppIssueCompo…

在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们. 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule.HttpModule.RouterModule. NgModule的…

在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用,学习难度等. 所以Angular团队最终决定以全新方式构建Angular2框架.Angular2框架现在已经进入RC6版本,很快它就将进入最终发布版.Angular2带来了很多不错的特性,它们包括跨平台.高性能.高效开发,拥抱web标准等等. 由于在Angular中引入了render层隔离设计,所以…

浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2+typescript 2. 项目结构 3. Src目录是我们本地开发的目录文件,www我ionic2编译后生成的文件 4. 每个文件夹下面都有三个文件  分别是.Html..scss..ts分别代表结构文件.样式文件.功能文件.也就是HTML+css+js,ionic2+angular2所用的是t…

今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, ngSwitch and ngFor. 例子…