随笔分类 -  ionic+ anglar 学习之旅

ionic angular cordova
摘要:1.ionic 中 中 get 请求数据 1. 在 app.module.ts 引入 HttpModule 、JsonpModule import { HttpModule, JsonpModule } from '@angular/http'; 2. 在 app.module.ts 依赖注入 Ht 阅读全文
posted @ 2020-06-08 15:43 monkey-K 阅读(218) 评论(0) 推荐(0) 编辑
摘要:跳转方法一, 使用NavController navCtrl 是 NavController 的实例 constructor(public navCtrl: NavController, public navParams: NavParams) { } goNewsInfo(index, item) 阅读全文
posted @ 2019-10-24 10:51 monkey-K 阅读(370) 评论(0) 推荐(0) 编辑
摘要:一. 如何添加底部 tabs 1. 创建新页面 ionic g page newsPage 2. 在 app.module.ts 中引入 注册 //页面 自定义的组件 import { AboutPage } from '../pages/about/about'; import { Contact 阅读全文
posted @ 2019-10-24 10:32 monkey-K 阅读(316) 评论(0) 推荐(0) 编辑
摘要:创建页面:在项目根目录下执行 ionic g page [pageName] 在 app.module.ts 中引入 //页面 自定义的组件 import { AboutPage } from '../pages/about/about'; import { ContactPage } from ' 阅读全文
posted @ 2019-10-13 10:33 monkey-K 阅读(1184) 评论(0) 推荐(0) 编辑
摘要:1 、cd 到我们的项目目录2 、通过 ionic g component 组件名称创建组件 3 、创建完成组件以后会在 src 目录下面多一个 components 的目录,这个目录里面有我们用命令创建的所有的组件 ionic 创建组件后,components 文件夹下的组件会以一个自定义模块方式 阅读全文
posted @ 2019-10-09 21:43 monkey-K 阅读(710) 评论(0) 推荐(0) 编辑
摘要:hooks:编译 cordova 时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中node_modules :node 各类依赖包resources :android/ios 资源(更换图标和启动动画)src:开发工作目录,页面、样式、脚本和图片都放在这个目录下www:静态文件platf 阅读全文
posted @ 2019-10-09 20:37 monkey-K 阅读(269) 评论(0) 推荐(0) 编辑
摘要:ionic简介: Ionic 是一于 款基于 Angular 、Cordova 的强大的 HTML5 移 应用架开发框架 , 可以 快速创建一个跨平台的移动应用。 可以快速开发动 移动 App 、移动端 WEB 页面 微信公众 平台应用,混合 app web 页面。 ionic = Cordova 阅读全文
posted @ 2019-10-07 12:35 monkey-K 阅读(329) 评论(0) 推荐(0) 编辑
摘要:angular 中的自定义模块: 当项目比较庞大时,组件非常之多,这时候需要把相同功能的的组件分模块加载。分模块加载有两大好处: 1. 项目结构清晰 2. 提高加载速度 一. angular中自定义模块的目录结构划分: 二. 创建自定义模块 执行 ng g module modules/user, 阅读全文
posted @ 2019-10-06 11:34 monkey-K 阅读(892) 评论(0) 推荐(0) 编辑
摘要:1. 新建一个 proxy.conf.json { "/search": { "target": "https://wenku.baidu.com/search", "secure": false, "changeOrigin": true }, "/getnotice": { "target":  阅读全文
posted @ 2019-10-04 12:25 monkey-K 阅读(2448) 评论(0) 推荐(0) 编辑
摘要:angular 中使用 axios /** * 在angular 中引入第三方 http 模块的使用, 以 axios 为例 * 有两种使用方法:(本文使用Promise简单封装) * 一. 直接在要使用请求的组件中 import axios from 'axios', 调用: axios.get/ 阅读全文
posted @ 2019-10-04 12:07 monkey-K 阅读(3175) 评论(0) 推荐(0) 编辑
摘要:angular 中使用 http 请求的前提,需要引入 httpClientModule 模块 根模块中 app.module.ts: import { HttpClientModule } from '@angular/common/http' imports: [ BrowserModule, 阅读全文
posted @ 2019-10-04 12:01 monkey-K 阅读(2116) 评论(0) 推荐(0) 编辑
摘要:JS -- 获取异步数据的方式: 1. 回调函数 2. Promise 3. 事件订阅 4. RxJS -- V6.0 + 1. 回调函数方式获取异步数据 延时器模拟异步数据: getCallData(cb) { setTimeout(() => { var userName = "ABC" cb  阅读全文
posted @ 2019-10-03 11:40 monkey-K 阅读(958) 评论(0) 推荐(0) 编辑
摘要:angular 中的生命周期: 组件加载时,生命周期函数的执行顺序: 00 -- constructor: 首先执行构造函数,一般用来初始化变量,不应该做其他事情 01 -- ngOnChanges: 当被绑定输入属性的值发生变化时执行,父子组件传值的时候自动调用。没有输入属性值变化,不执行该函数 阅读全文
posted @ 2019-09-26 20:13 monkey-K 阅读(863) 评论(0) 推荐(0) 编辑
摘要:1. 子组件调用父组件的方法和数据 -- Input 装饰器 1. fatherComponent.html中 toChildStr -- 父组件中定义的数据 fatherMethod -- 父组件中的方法 fatherComponent -- 父组件本身, this指代父组件实例,通过 [fath 阅读全文
posted @ 2019-09-25 20:56 monkey-K 阅读(599) 评论(0) 推荐(0) 编辑
摘要:angular中 父组件调用子组件的方法 -- 使用 @ViewChild 装饰器修饰子组件,获取方法,调用 除此之外 ViewChild 还可以获取 DOM ,操作 DOM , 详见: https://www.cnblogs.com/monkey-K/p/11567098.html 1. html 阅读全文
posted @ 2019-09-22 13:21 monkey-K 阅读(3869) 评论(0) 推荐(0) 编辑
摘要:ngAfterViewInit(): void { // DOM 加载完成的生命周期函数, 在此处获取 DOM let dom2: any = document.getElementById('dom2') console.log(dom2) dom2.style.color = 'blue' } 阅读全文
posted @ 2019-09-22 13:15 monkey-K 阅读(539) 评论(0) 推荐(0) 编辑
摘要:一. canActive 使用场景:导航栏某个标签,如用户设置页面,只有登录才可以查看,不登录则点击无效 说明: canActive--是否能调用当前路由 实现: 1. 创建路由守卫类 import { CanActivate } from '@angular/router' export clas 阅读全文
posted @ 2019-09-10 10:59 monkey-K 阅读(524) 评论(0) 推荐(0) 编辑
摘要:1. 路由跳转方式一: /路由?id='001' 方式 -- queryParams 方式 路由配置:{ path: 'details', component: bookDetailsComponent } a. 指令跳转: <a [routerLink]="['/details']" [query 阅读全文
posted @ 2019-09-05 17:49 monkey-K 阅读(8165) 评论(0) 推荐(1) 编辑
摘要:1. 新建一个app.routing.module.ts 文件,可以手动添加也可以命令生成 (ng generate module app-routing --flat --module=app) import { NgModule } from '@angular/core'; import { 阅读全文
posted @ 2019-09-03 20:06 monkey-K 阅读(620) 评论(0) 推荐(0) 编辑
摘要:1. 自定义指令 - @directive import { Component, Directive, HostListener, ElementRef } from '@angular/core' @Directive({ selector: '[input-trim]', host: { '( 阅读全文
posted @ 2019-09-02 22:42 monkey-K 阅读(3779) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示