先前写过一篇文章:【组件篇】ionic3图像手指缩放滑动预览,是原来封装的一个组件的原型,后来用ionic4后,这个组件不兼容,需要改,那时我开始考虑组件的封装不依赖于ionic自身的组件,所以重写了一个。
0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。 1 创建一个新的Ionic 2 应用 我们将使用有Ionic团队创建的tutorial模板,可见于官方教程,来创建我们的应用程序。要做到这一点,您需要运行以下命令: ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。为运行后续的命令,你应当将项目目录作为当前工作目录: cd ionic2-tutorial 简单瞟一眼应用
上一次我们使用Spring Boot开发了一个简单的REST服务应用,那么传统网页应用怎么做呢? 渲染HTML是Spring Boot可以完美胜任的,并且提供了多种模板引擎的默认配置支持,所以在模板引擎的支持下,我们可以很快的上手开发动态网站。 Spring Boot提供了默认配置的模板引擎主要有以下几种: Thymeleaf FreeMarker Velocity Groovy Mustache Spring Boot建议使用这些模板引擎,避免使用JSP,但JSP有天然的血缘关系,我们教程也是从最简便的
其实ionic3(angualr4)和ionic2(angular2)差不多,但和ionic1(angular1)就差别非常大了,可以说基本是推倒了重来。在angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component来标识,用cli生成命令就如下所示:
这个时候,如果想扩展这些功能,一是修改源码,二是自己实现,然而这两种方法都比较麻烦,比较好的解决方案是利用现有的开源代码,搜索ionic的相关组件寥寥无几,这个时候转换下思路,搜索angular的相关组件会发现有几个,经过比较后觉得ngx-toastr较为适合。它提供了在线Demo.
序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易,对于 Ionic 入门学习有一定帮助。因为文章是去年发表,所以教程内关于 Okta 的一些使用步骤不太准确,但是通过 Okta 的官网也可以找到对应的内容。另外,使用 npm 安装 Ionic starter 模板可能会有安装失败的情况,建议不要在这方面浪费太多时间,可以直接在 Ionic 的 GitHub 仓库 中下载 starter 模板。 原文:How to Sprinkle ReactJS i
使用 Okta 和 OpenID Connect (OIDC),可以很轻松的在 Ionic 应用中添加身份认证,完全不需要自己实现。 OIDC 允许你直接使用 Okta Platform API 进行认证,本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录; 由于功能还在开发中,所以省略了用户注册。
在新版本下,ionic得到的健硕性的更新,angular却减少了自己的体积,正所谓:“ionic吃好了,angular减肥了”于是我们也可以抛弃以前的一些坑,直接进入流畅性的操作了。
假如在contact.html页面上点击弹出模态框 首先在html页面上加click事件
本文使用Ionic2从头建立一个简单的Todo应用,让用户可以做以下事情: 查看todo列表 添加新的todo项 查看todo详情 保存 todo到持久化存储 0 开始之前 本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有,先去安装和学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架,但有一些示例代码供我们使用。 运行以下命令创建新项目 ionic start ionic-todo blank --v2 一
本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ionic包含3部分: CSS 样式:用于渲染Web页面,使得页面更接近原生移动应用 (Native App)。 AngularJS:Ionic使用AngularJs的扩展指令作为核心框架库,同时AngularJs也加快了开发过程。 Apache Cordo
本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。
本文我们将介绍 Compodoc 这款工具,它用于为 Angular 应用程序生成静态文档。Compodoc 能够帮助 Angular开发人员为他们的应用程序生成清晰且有用的文档,这使得参与应用程序开发的其它成员也可以轻松了解当前应用程序或库的特性。
今天,我们使用REST API实现用户名密码认证,服务端端点如下: Endpoint 请求 响应 /login { username: '',password: '' } auth_token /logout add a token to headers /register { username: '', password: '' } 1、创建Ionic 2 APP 反复练习,应该是很熟悉了: ionic start Ionic2RestAuth --v2 我习惯上会先启动看看,确保项目创建成功: c
可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng-template,则被称为内联模板。例如:
现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要,因为基础有boostrap,组件库有:easyui,elementui,iview,ionic等等。但我个人练习自己如何写好一个css框架,对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。 一、与美术交流获取得这些信息 1. 按钮状态:普通状态、鼠标悬停、选中状态、禁用状态 2. 按
videogular2 GitHub 地址:https://github.com/videogular/videogular2
我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件,可以看里面的源码,也可以看下面内容。
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端 在
ionic-cli或angular-cli能很好地辅助开发,其中generate很方便地创建各种模版内容,即:
现在我们已经基本知道了Ionic2 app的布局,接下来我们来走一遍在我们的app里创建和导航页面的过程。 先看看src/app/app.html, 接近底部的地方有如下内容: <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 注意[root]属性绑定。设置了ion-nav组件的根页面或是第一个基本页面。当加载ion-nav是,rootPage变量引用的就是根页面。 在 src/app/app.c
本次使用的是Ionic3,之前本想用最新的ionic5 使用ionic build后发现,我使用的X5内核不能正常浏览,使用ionic3没有任何问题。本次我不使用cordova来打包,这次我将要完成的任务是:
前言 Hybrid技术流行已经有一段日子了,楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开,Hybrid已经是大大提升开发效率的开发方式了,但是仍然需要至少一个IOS与Andriod,那么可不可以只使用H5相关的知识就能做一个APP出来呢?答案是可以的。 什么是cordova? cordova为一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员,其成本节约也是不可
有人问到视频上传这个问题,那我还是写一下吧,其实基本参考《ionic3多文件上传》这文章也行,不过对于单文件上传就不用那么复杂了,步骤如下:
接下来我们使用 ngModel 进行双向数据绑定,通过监听 DOM 事件,来实现更新组件的属性。
问题 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法: 1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminimize插件,使用window['AppMinimize'].minimize();)。 2.要么请求用户确认(添加一个Confirmation Alerts)。 3.按一下提示,按两下退出(加一个方法用toast提醒)。 这里用第三种展示。 解决 在app.html中,添加#myNav,在app.compo
Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递。至于路由守卫、路由懒加载等“高级”特性,并不会在本篇文章中呈现
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认主题和SVG图标,还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能,更是集成了jQuery UI的Tab部件。jQuery Mobile继承了jQuery的优势,并且提供了丰富的适合手机应用的UI组件。jQuery Mobile还有很多的第三方扩展。
在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】
摘要 基于最新的Angular4.0版本,超级大咖大漠穷秋为我们讲解强大的集成开发平台Angular/cli,以及Angular最核心的3大概念:组件、模块、路由。 集成开发环境@Angular4.0
在android平台上的app,在主页面时经常会遇到“再按一次退出app”的功能,避免只按一下返回键就退出app提升体验优化。
我们来看其中一个标签,<edit>,这里呢,我们用ng-Model来绑定employee这个对象。
本文主要介绍使用cordova实现拍照上传,走通 “拍照 》预览 》上传 》 下载 ”这个流程。为了方便查看测试结果,需要了解Ionic应用调试的基本方法,有关于Ionic项目Android 调试的详细教程,请参考以下文章:Ionic3 Android调试
有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。
解剖Ionic 2 app。进入项目创建的文件夹,这里有一个典型的Cordova项目结构,我们可以安装原生插件,创建平台定义工程文件。 ./src/index.html src/index.html是app的主入口, 设置脚本和CSS,引导、启动我们的应用。对于app的应用,Ionic在HTML中寻找<ion-app>标签。 <ion-app></ion-app> 下面的代码接近底部: <script src="cordova.js"></script> <script src="build/main.js
Ionic 通过整合各种技术和功能使构建Hybrid 应用更加快速、容易和美观。Ionic 的生态系统基于Angular 和Cordova,前者是Web 应用框架,后者是构建和打包原生应用的工具。
第一次接触Ionic,是在2015年,并在年中的时候第一次在正式项目中使用,那时它才是Ionic1的Alpha版,每次版本更新仍有不少坑,但在可接受范围,而且Ionic team一般会很快地修复Bug或者给出解决建议,就算他们没有回复,个人花点时间仍能找到折中处理方案。
在项目界面搭建过程中,使用fab的时候发现ionic自带的控件中并没有遮罩这样的属性这让我们实际操作起来很不舒服如下图所示:
其实对于这3个东西来说,我根本搞不清楚他们之间的关系,突然之间意识到,自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的,自己还是什么都不会,angular1我会用,但是不会讲,你要问我angular1和ionic的关系,我现在也不能讲清楚,说明白。 那么没关系,从小白做起,不会的就问,据说大神们都是乐于分享的。
简单介绍自己使用Ionic3开发的过程,涉及到的知识点如下: Angular Ionic Cordova ES6 TypeScript Scss 环境搭建 引用插件 调试 Android打包 Android签名 IOS打包
用ionic也有一段时间了,今天说一下它里面提供的一个小组件:浮动框 浮动框的使用在移动端的项目中已经很少了,只有在少数的一些特殊情况下才会出现。所以官方文档中对于$ionicPopover的介绍也是非常少。
昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。
前端一般会听过阿里的Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for Angular的PC版),最近一次ng-zorro的更新,带来了新的开源迷弟:ng-zorro-mobile(Ant Design Mobile for Angular)。
平时会留意一些开源组件,收藏到收藏夹里,然后一天mac电脑因为卸载window出问题导致不能不重装,然后里面的东西都没了,特别是适用于ionic2布局的angular2和普通js……so sad,现整理回一些并分享下:
如果第一次安装的时候失败,没关系 删掉已经生成的ioinc4Learn文件包,重新运行命令
如果你要做一个app应用,你有最少三种方式:原生开发、加壳在线WebApp开发与混合式开发。
写到最后总结得差不多了,后续如果我想起还有哪些框架平台遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
如果该应用程序尚未运行,请启动该应用程序。 在进行更改时,请通过重新加载浏览器窗口来保持运行。
路由是前端构建单页面应用(SPA)必不可少的一部分,AngularJS1.x中有两种路由实现,一个是内置的ngRouter,还有一个是基于 ngRoute 开发的第三方路由模块uiRouter。这里为什么要提uiRouter?因为就自我感觉而言uiRouter 和 ionic导航在使用方式上有点像,特别是从它们提供的指令这一层来考虑。如果你没有了解过Angular4中的路由,其实也可以简单看看uiRouter的使用,不需要了解的多详细,仅仅理解它的那个指令的使用方式就可以了。
领取专属 10元无门槛券
手把手带您无忧上云