标签归档:Angular

ionic2中引入自定义js文件或者引入第三方js文件

最近在ionic2开发中,遇到了一些问题,主要的问题是,由于angular的使用,使得ionic2中要增加组件则必须进行文件夹以及ts、html的增加,但是有些常量则是永远固定不变的,这些常量在很多页面能使用到,因此萌生了一种想法就是将所有常量制作成config文件或者一个json文件,然后在进行调用。不过制作成json的想法破灭了,因为在使用过程中,发现json必须通过http请求来获取相关数据,而异步请求获得的数据并非全局变量,在http外部也无法进行调用。
因此就想到使用ionic中提供的一个超级不错的定义全局变量的方法declare,在ionic中直接使用declare是可以定义全局变量的,下面我们就来尝试下declare的强大功能吧! 继续阅读ionic2中引入自定义js文件或者引入第三方js文件

angular2+使用iframe展示外链提示unsafe value used in a resource URL context解决方法

iframe在web项目中确实很少使用,但是在手机app中,很多人可能会使用到今天我在使用的过程中就出现了错误unsafe value used in a resource URL context,这个错误后面还跟了一个短网址,打开后就跳转到了angular.io的官方网站去了,大概是到了这里:https://angular.io/guide/security#xss,如果你英文水平不错,应该看看这个页面就会解决了吧!如果你懒得去官方研究那些难懂的英文,那么久跟着我一起来处理吧!
1、场景
比如说注册页面,需要用户同意相关法律法规以及注册条款等,因此就需要将相关的条款展示出来,一般的做法就是后端给出json数据或者其他类型的数据,让前端去调用。但是如果是一个简单的页面,那就没有必要进行数据库存储的话,那就直接在iframe中嵌入这个外部的url即可。
2、使用过程
如果不在ts中写url,直接在iframe的src中写url,我完全没有问题的,并且不会提示任何错误。但是由于之前我写了一个config.ts将所有的配置都放到了里面,包括url,因此我只能通过下面的方法进行实现!=
一般人会这样去使用url
import ……
public thisUrl = “http://www.egtch.com”;
html模板中这样使用 继续阅读angular2+使用iframe展示外链提示unsafe value used in a resource URL context解决方法

angular2中如何制作如同input search的清空功能

使用过jQuery的童鞋,想要制作一个清空input内容的图标按钮是非常简单的事情,但是今天我要来说下angular2+版本中制作如此一个功能,远远比jQuery简单得多。而且是超级简单,根本不用写typescript代码,仅在html模板中就可以直接实现,当然我们也可以通过typescript的代码来进行实现,大同小异啊!
先来看实现后的大致功能效果,如下图: 继续阅读angular2中如何制作如同input search的清空功能

angular2或4 获取checkbox的值

在一个项目中需要使用到这个功能,看了下官方的文档,说得不是很清楚,使用了formArray,但是没有实现成功。然后谷歌、百度了好久,也没有找到可以真正运行的代码,差点就放弃了。功夫不负有心人,在segmentfault上提问后,得到了相关回答,但是回答中得到了一个外国人博客上的文章,对照着改写了一番,感觉真的就这么实现了,真好,实现得和自己想要的最终结果一模一样。下面就来说说如何进行实现吧!
首先说下实现的逻辑思路,通过FormBuilder, FormGroup, FormArray来获取checkbox的选中状态,然后通过这些选中状态再去获得checkbox的值,再将想要的值展示出来即可。
1、导入相关功能模块

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import 'rxjs/add/operator/map';

2、创建checkbox数据源

public select = [
    {"name":"leo","selected":true,"sex":"男"},
    {"name":"Lily","selected":false,"sex":"女"},
    {"name":"Tony","selected":false,"sex":"男"}]

继续阅读angular2或4 获取checkbox的值

Angular2如何获得多个相同子组件传递的集合

比如我有一个父组件,而在父组件中有多个相同的组件,比如父组件使用了ngFor循环,而在ngFor下面有一个子组件,这样当循环出来后就有很多个子组件了。那么我们要如何才能获得这几个子组件中的相应数据集合呢?之前我到segmentfault进行了提问,但是并没有人为我回答,终于在对官方文档阅读以及google了很多后,终于找到答案了。下面就让我们去解开angular2的面纱吧。
在angular中,我们需要从相同子组件中获取相关字段,我们可以直接使用@ViewChildren,如果你E文较好,那么我们把这个单词拆开来理解@ViewChildren,View Children,view是视图或者显示,children则是孩子或者子类,简单的说就是获取子组件的相关集合。
我使用它做了一个简单的demo,地址是:http://www.egtch.com/demo/angular/
在实例中显示如下图: 继续阅读Angular2如何获得多个相同子组件传递的集合

[转]理解ionic2 + angular2开发方案

1. 安装使用

ionic2的安装运行基本和前版本的ionic基本一致,非常简单。

npm install -g ionic    # 安装ionic工具集
ionic start projectName --v2    # --v2表示使用ionic2 + angular2的组合方式创建项目,否则使用ionic + angular创建项目,此时ionic会下载所需要的相关包
cd projectName  # 进入创建的项目名称目录
ionic serve # 启用浏览器调试应用页面,这时通过浏览器打开默认端口页面http://localhost:8100/#/tab/dash就可以打开应用页面了

当然这里需要保证你的开发环境SDK已经安装成功了,例如Android打包平台的运行环境,可以参考Ionic Hybrid跨终端应用程序开发方案研究

  如果需要在移动设备上打包运行,则需要添加相对应的插件模块。

npm install -g cordova  # 如果没有真实设备,可以通过这个命令来安装模拟环境
ionic platform add ios # 添加ios运行支持
ionic emulate ios   # 模拟运行ios环境
ionic platform add android  # 添加Android运行环境支持
ionic run android   # 使用Android运行应用

  正常情况下,这里ionic会将打包的文件安装到设备或调试模拟器上运行打开应用。
继续阅读[转]理解ionic2 + angular2开发方案

Angular2新人常犯的5个错误

看到这儿,我猜你肯定已经看过一些博客、技术大会录像了,现在应该已经准备好踏上 angular2 这条不归路了吧!那么上路后,哪些东西是我们需要知道的?

下面就是一些新手常见错误汇总,当你要开始自己的 angular2 旅程时,尽量避免吧。

注:本文中,我假设诸位已经对 angular2 的基础知识有所了解。如果你是绝对新手,之前只听说过,完全没概念什么是 angular2 的,先去读读下面这些资料:

Angular docs

Victor Savkin’s blog

Thoughtram’s Angular 2 blog

错误 #1:原生 hidden 属性绑定数据

在 AngularJS 1 中,如果想切换DOM元素的显示状态,估计你会用 AngularJS 1 内置的指令如: ng-show 或者 ng-hide :

AngularJS 1 示例:

<div ng-show="showGreeting">
   Hello, there!
</div>

而 angular2 里,新的模版语法允许你将表达式绑定到DOM元素的任何原生属性上。 这个绝对牛逼的功能带来了无限的可能。其中一项就是绑定表达式到原生的 hidden 属性上,和 ng-show 有点像,也是为元素设置 display: none :
继续阅读Angular2新人常犯的5个错误