一.Angular  UI组件库  ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/docs 概述:是一个移动端UI组件库,可以与Angular/Vue/React组合应用,也可以单独使用(SCRIPT直接引入) 可以使用lonic的步骤: 1.下载并安装全局的脚手架工具 npm     i     -g    ionic 默认安装在c:/users/用户名/appdata/roam…
这个项目做得比较早,当时是基于ionic1和angular1做的.做了四个tabs的app,首页模仿携程首页,第二页主要是phonegap调用手机核心功能,第三页模仿微信和qq聊天页,第四页模仿一般手机的表单设置页.同时还模仿知乎做了一个侧边栏页(账号:wty,密码:123456). 没有后台,纯前端展示,功能还比较多,调用系统的声音.震动和手机设备信息等.有二维码扫描功能,还做了类似qq消息可拖拽效果,上拉下拉刷新,轮播图组件. 安卓apk下载 线上地址 一.基本概念 1. Angularjs…
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应用. 需求 需求大概是这样的: 开一个新的 Angular 项目,并且一开始选择加入 Router 功能 根组件是 AppComponent ,然后下方有三个子组件分别是 page1 page2 page3 可以在 AppComponent 内点击连结切换到这三个页面 参考文档: 路由与导航 Rou…
Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其他的移动端友好的特性. 版本angularjs1.6.X,ionic1.6.7 1.index.html 首先会进入index页面,里面引入了angularjs, cordova等js支持,此外还有app.js, controllers.js, services.js等文件.ng-app=" &qu…
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup 一款基于 Svelte.js 开发的手机端弹框组件.汇集了msg.info.toast.alert.dialog.actionsheet等多种类型弹窗.支持 25+ 参数自定义搭配组合.组件式+函数式两种调用方式. 由于svelte框架比较新,一些相关的项目案例及自定义组件例子比较少,只能看官方语…
Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security/model/regist-model.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { //缓存创建的窗口 $scope.registModal = modal; }); $scope.showRe…
最近公司开始准备做app了,大佬选择了angular+ionic+corvoda的开发结构,但是对于刚刚才开始对angular才有一点点感觉的我,就像是被一击闷棍敲了,半天没反应过来,emmm,怎么办呢,开始跟着学着做呗,还能咋办?然后开始看文档,英语能力一般的我也能看个差不多~~~ https://ionicframework.com/docs/api/ http://www.angularui.cn/Ionic/css_doc-index.html https://yanxiaodi.git…
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Portals可以翻译为 门户 ,我觉得放到这里叫 入口 更好,可以理解为动态创建组件的入口,类似于小程序或者Vue中的Slot. cdk全名Component Development Kit 组件开发包,是Angular官方在开发基于Material Design的组件库时抽象出来单独的一个开发包,里面…
由于Ionic 自身也在不停的更新当中, 所以开发者经常会遇到从官方的CLI 命令,在命令行窗口中执行出错的情况. 就比如我一个月之前安装的ionic 2.2.2版本,已不能使用最新的3.2.0 CLI命令. (其实困扰也没有那么大,cmd会有提示信息,告诉你command为什么无法执行,选择相应的策略去解决就行了.) 不过这里还是简要介绍一下如何升级Ionic CLI,算是留个小笔记. npm update -g cordova ionic 执行完成后可以看到cordova和ionic更新后的…
我们知道,如果我们绑定了组件数据到视图,例如使用 <p>{{content}}</p>,如果我们在组件中改变了content的值,那么视图也会更新为对应的值. angular 会在我们的组件发生变化的时候,对我们的组件执行变化检测,如果检测到我们的数据发生了变化,就会执行某些操作,如修改绑定数据的时候更新视图. 这样一来,当我们的组件数据比较多的时候,angular就会有很多操作在静悄悄地进行,一个规避这个问题的方法是,设置某个组件的变化检测策略为 'OnPush'. 使用 OnP…