angular2

Angular2 环境配置详细介绍

看到angular发布正式版,心动不已准备测试下。 看着官网教程,使用了cli创建项目,在命令行中键入: 安装cli npm install -g angular-cli 如果安装过以前的版本,请执行以下命令,进行更新: npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@latest 旧版本的cli使用的... »

angular2使用简单介绍

让我们从零开始,使用Typescript构建一个超级简单的 AngularJs 2应用。 先跑一个DEMO 运行这个 DEMO先来感受一下 AngularJS2 的应用。 下面是这个应用的文件结构 angular2-app |_ app | |_ app.component.ts | |_ main.ts |_ index.html |_ license.md 总结来说就是一个 index.htm... »

Angular2使用Guard和Resolve进行验证和权限控制

我们在开发web应用时,在服务器端都会控制某种或某个用户是否有权限调用某个接口。在前端,我们除了根据用户的角色或其他特性来控制一些页面元素是否显示以外,也需要控制用户是否能够进入某些页面(例如通过直接输入URL的方式直接进入)。要控制是否显示,我们可以使用 *ngIf 、 [hidden] 等方式。而对于控制用户能否进入某个页面,Angular2的路由框架也提供了非常方便的方式来实现这个功能。 A... »

深入理解Angular2 模板语法

1. 说明 Angular2的模板用来显示组件外观,作为视图所用,用法和html语法基本一致,最简单的Angular2的模板就是一段html代码。Angular模板语法主要包括以下几个部分: l 直接绑定 l 插值表达 l 属性绑定 l 事件绑定 l 双向绑定 l 样式绑定 l 模板和 * l 局部变量 首先来看一个模板例子,如下所示: import { Component, OnInit } f... »

详解angular2如何手动点击特定元素上的点击事件

我试图在元素上编程点击点击事件,换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能.有没有内置的方法来做到这一点? »

angular2中使用第三方js库的实例

本文以jquery 为例第一种:有对应的声明文件的1、用命令安装jQuery的声明文件。npm install -D @types/jquery2、引入jqueryimport * as $ from 'jquery';3、使用$.addClass('');第二种:没有声明文件,自定义的js库1、 index.html中引入 js 文件在ts文件中使用定义:declare var $: any;然... »

输入图片说明

Angular2整合其他插件的方法

前言:现在有很多朋友在接触Angular2的时候,总是不可避免的会使用一些其他的第3方的插件,而这些插件可能都是基于jQuery的,而且也没有对应的angular2的版本,这里我就来讲解一下,在这种情况下,如何整合第3方的jQuery插件。我们以Angular2整合zTree为例来说明整合的思路及过程。 zTree官方网站:http://www.treejs.cn/v3/main.php#_zTr... »

angular2中Http请求原理与用法详解

本文实例讲述了angular2中Http请求原理与用法。分享给大家供大家参考,具体如下: 提供HTTP服务 HttpModule并不是Angular的核心模块。 它是Angular用来进行Web访问的一种可选方式,并位于一个名叫@angular/http的独立附属模块中. 编辑app.module.ts import { HttpModule, JsonpModule } from '@angul... »

详解如何在angular2中获取节点

我们知道在angular2中ts文件支持js代码,为什么用document.getElementById没法获取元素节点呢? 其实在angular2中先加载ts文件,再加载view,所以获取不到节点。 在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 web worker 中,因为在 web worker 环境中,是不能直接操作 DOM。 通过 El... »

angular2系列之路由转场动画的示例代码

Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。Angular2的动画主要是和@Component结合在了一起。animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制。 »

Angular2仿照微信UI实现9张图片上传和预览的示例代码

Angular2仿照微信UI实现9张图片上传和预览的示例代码

本来在看vue.js没多久,最近在赶一个项目用回了angular2,还是先把ng2搞定吧,毕竟还不怎么懂。这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能,要求图片1--9张。主要步骤在正式进入各个小功能的解说前,先上官方demo->weui.io查看图片上传组件的样式以及源代码。 »

angular2 ng2 @input和@output理解及示例

angular2 @input和@output理解 先做个比方,然后奉上代码 比如: <talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)"> input, [talk]=”someExp” 这个标签可以理解为一个专门的监听器,监听父组件传递过来的someExp参数,并存入自身组件的talk... »

浅谈angular2路由预加载策略

浅谈angular2路由预加载策略

1.问题描述 在没有使路由懒加载的时候,第一次使用的时候加载特别慢,影响用户体验,angular2可以使用loadChildren进行懒加载,第一次使用的时候只会加载需要的模块,其它模块在真正使用的时候才会去加载,这个时候打开浏览器控制台查看js加载的时候,会发现你在使用时候会去加载对应的js,导致第一次点击相应模块的功能时会卡顿一下,后面在使用就不会了,这样还是用户体验不好,接下来告诉你如果使用... »

详解angular2.x创建项目入门指令

详解angular2.x创建项目入门指令

很久没写过angular2.x ,最近一次也是几个月之前,为了下次查阅方便,相关命令记录下 1.ng –version 检查下自己angular cli版本 顺便看看npm -v node -v E:\phpStudy\PHPTutorial\WWW>ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___|... »

angular-cli修改端口号【angular2】

找到node_modules/angular-cli/lib/config/schema.json default值就是默认的端口 "serve": { "description": "Properties to be passed to the serve command", "type": "object", "properties": { "port": { "description": "... »

angular2模块和共享模块详解

创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理模块和评论管理模块 1,创建一个模块testmodule.module.ts import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule... »

angular2倒计时组件使用详解

angular2倒计时组件使用详解

项目中遇到倒计时需求,考虑到以后在其他模块也会用到,就自己封装了一个组件。 »

利用Angular2 + Ionic3开发IOS应用实例教程

利用Angular2 + Ionic3开发IOS应用实例教程

从 Angular1 到 Angular2 Angular2 作为著名前端 MVVM 架构 Angular1 的继承者,从一定程度上说,引领了新一代 Web 前端开发技术的革新。从最新版的 ember.js, react.js, vue.js 中,可以看到这几种技术相互借鉴,取长补短,最终向一种技术方向演进。 组件化技术的崛起 Angular1 也有组件,叫另外一个名字:指令。在 Angular1... »

Angular2学习笔记——详解路由器模型(Router)

Angular2学习笔记——详解路由器模型(Router)

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

Angular2使用jQuery的方法教程

前言Angular2是以TypeScript语言作为默认编码语言,所以你看到的全部都是.ts结尾的文件。最霸气,TypeScript还是一个强类型、泛型、多态等一些面向对象编程的东西。方法一当然是使用最正规军了,用命令安装jQuery的声明文件。npm install -D @types/jquery以及使用import * as $ from 'jquery';$.addClass('');完美... »

浅析Angular2子模块以及异步加载

浅析Angular2子模块以及异步加载

用Angular2开发一个大型的应用,我们通常都需要分模块进行开发。该实例基于上篇文章Angular2使用Guard和Resolve进行验证和权限控制 所用的实例,并在它基础上添加了一个lazy的模块,以及将现有的todo模块配置成延时加载方式。有关angular-cli的使用请查看 官网 。甚至有些错误,我们在最后会说明当前版本angular-cli的bug。Angular的路由模块已经提供了 ... »

Angular2里获取(input file)上传文件的内容的方法

最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签。然后看提示说HTMLElement没有files方法。const uploadsFile=document.getElementById.files[0];结果还是不行,最后改成了先转换类型再调用属性就可以了。 »

Angular2安装angular-cli

最近在学习angular2,并尝试用这个框架来做公司的一个新项目。 终于要开始开发了,等了1个多月。 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目。 安装了好多次,看了好多博文,终于成功了。 依据本宝宝帮多位小伙伴安装成功的经验,现总结安装angular-cli过程如下: 1、设置淘宝镜像,在 .npmrc文件(该文件在C盘>用户(或user)&g... »

Angular2 组件交互实例详解

1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种: l 使用输入型绑定,把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事... »

Angular2使用Augury来调试Angular2程序

Augury-Angular专用的chrome 调试插件 如题,在的2016-12-8谷歌开发者大会上,angular2的leader来给我们演示了angular2的特性,对于已经入门的同学们,已经没有太多新鲜内容,唯有一个内容让我为之一震,就是Augury(现在和VUE对比起来,确实可以看出有谷歌支持下angular2会更活跃,我个人认为2年后恐怕VUE无法与之抗衡),跟Angular-CLI一... »

Page 1 of 3123