最近从ng1  转ng2     相信 使用ng1的同学都知道 ngStorage 这个插件吧,  存储 本地数据 下面介绍一下 ng2 使用 localStorage 参考 github https://github.com/marcj/angular2-localstorage 使用方法 1 nodejs 下载  npm install --save angular2-localstorage 2 引入到AppModule import {Component} from "angular2/…

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

时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件? (angular1自行百度) 问题描述: 后台返回的是一个二进制的Excel流,请求头如下: Access-Control-Allow-Origin:* Cache-Control:private Content-Disposition:attachment;filename=%…

前言: 在这里,我描述三个场景,即系统的注册与登录,及登录后的操作: 1.注册场景,前端页面传入用户名密码,通过一个api接口传到后台,在后台对这用户及密码进行保存: 2.登录场景,前端用户传入用户名及密码,通过api接口传到后台,在后台进行配对,如果配对成功,则在后台派发(返回)一个令牌(id_token,下同),通过这个令牌作为用户已经登录的唯一凭证,需要保存到用户本地存储(localStorage),以后作后续操作: 3.登录后操作,当用户需要授权操作时,那么首先得获取本地存储(local…

上一篇: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入门系列教程-服务 上一篇文章我们将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.添加淘…

介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2. 成员 2.1 属性 2.2 方法 2.3 事件 3. 示例 3.1 存储数据 3.2 读取数据 3.3 存储Json对象 1. 介绍 1.1 说明 localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. 在JavaScript语言中可通过 wi…

今天我们要讲的是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是一种编程模式,它…

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

一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制. localStorage是持久化的本地保存,除非主动删除,不然会一直存在,而且在所有的同源窗口中都是可以共享的: sessionStorage是会话级别的本地保存,比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失,在不同浏览器窗口不会共…

上一篇.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…

适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少http请求和页面渲染时间 * 使用方法: * 1.使用此插件前,需要给插件的pageVersion变量赋值,建议变量值由服务器后端输出,当需要更新客户端资源时,修改版本值即可. * 2.加载Js:由于js加载有顺序要求,所以需要将后加载的脚本作为前一个脚本的回调参数传入,如: * whir.res.…

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

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