Angular 入门(三) 手机端开发
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular 入门(三) 手机端开发，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11202字，纯文字阅读大概需要17分钟。
内容图文
上篇总结:
- 管道 pipe
相当于vue中的过滤器. 使用时: {{值 | 管道名:参数:参数...}}
angular默认官方提供了一些常用管道, 可以直接使用
也提供了自定义的方式: ng g p 管道名
- 指令 directive
生成命令: ng g d 指令名, 用于操作元素的 DOM 属性
- 生命周期
初始化 ngOnInit -> 挂载时 init -> 更新时 checked -> 销毁 destroy
- 组件间的参数传递
– 父子: 子中用 @Input() 关键词声明属性即可
– 子父: 子中要声明事件, 向外传递数据 @Output(), 父通过事件方式 传递一个 自身方法 给子, 子触发传入的方法 向方法中传递数据
– 兄弟: 子1 -> 父 -> 子2 或 服务进行全局状态管理.
- 服务: 同vue 的 Vuex
生成服务命令: ng g s 服务名
使用时, 要通过 依赖注入 机制来完成.
– 依赖注入: 在构造函数的参数 中声明类型, 组件在使用时 就必须传递对应的类型的值.
– 其中: 我们负责声明依赖即可; 注入操作由系统自动完成;
语法糖用法: constructor(权限词 参数名: 服务类型)
- 网络服务: 官方提供了很多强大的服务, 网络服务是其中一种
– 网络模块默认未加载, 必须到 app.module.ts 文件中加载才可以
话不多说直入主题 ;接下来介绍手机端的开发
Ionic_________________
Vue 有 mintUI, 制作手机端的界面
Angular 有 ionic, 制作手机端的 UI库
脚手架的安装:
npm install -g @ionic/cli --force
生成项目包
ionic start ionicApp blank // 生成 包名 类型((blank/sidemenu/tabs) /** *- blank: 基础包 *- tabs: 带有标签栏导航的包 *- sidemenu: 带有侧边栏导航的包 /
包的运行:
ionic s
vscode插件:
主要容器:
- ion-app: 根容器
- ion-header: 头部导航栏容器
- ion-content: 主体内容部分
- ion-footer: 底部容器
更多组件详细介绍请点这里
button按钮组件
<!-- 按钮组件 -->
<!-- https://ionicframework.com/docs/api/button -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>按钮</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- 组件的风格, 默认会自动适配所在操作系统 -->
<ion-button>我是按钮</ion-button>
<!-- mode: 指定风格 -->
<ion-button mode="ios">ios</ion-button>
<ion-button mode="md">android</ion-button>
<!-- 官方自带很多主题 theme -->
<br />
<ion-button color="primary">primary</ion-button>
<ion-button color="secondary">secondary</ion-button>
<ion-button color="tertiary">tertiary</ion-button>
<ion-button color="success">success</ion-button>
<ion-button color="warning">warning</ion-button>
<ion-button color="danger">danger</ion-button>
<ion-button color="light">light</ion-button>
<ion-button color="medium">medium</ion-button>
<ion-button color="dark">dark</ion-button>
<!-- 大小 -->
<br />
<ion-button size="small">small</ion-button>
<ion-button size="default">default</ion-button>
<ion-button size="large">large</ion-button>
<!-- 填充方式 -->
<br />
<ion-button fill="outline">outline</ion-button>
<ion-button fill="solid">solid</ion-button>
<ion-button fill="clear">clear</ion-button>
<!-- 扩展方式 -->
<br />
<ion-button expand="block">block</ion-button>
<ion-button expand="full">full</ion-button>
<!-- 不可用 -->
<br />
<ion-button disabled>不可用</ion-button>
</ion-content>
</ion-app>
View Code
bdge徽章
<!-- 徽章组件 badge -->
<!-- https://ionicframework.com/docs/api/badge -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>badge徽章</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-badge>42</ion-badge>
<ion-badge color="success">success</ion-badge>
<ion-badge mode="ios" color="danger">ios</ion-badge>
</ion-content>
</ion-app>
View Code
icon图标
<!-- 图标库 -->
<!-- https://ionicons.com/ -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>icon</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-icon name="add" style="font-size: 30px"></ion-icon>
<ion-icon name="logo-alipay" style="font-size: 50px" color="secondary"></ion-icon>
<!-- 可以搭配按钮使用 -->
<ion-button>
<ion-icon name="add"></ion-icon>
</ion-button>
</ion-content>
</ion-app>
View Code
card卡片组件
<!-- 卡片组件 -->
<!-- https://ionicframework.com/docs/api/card -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>卡片</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- i-card-full -->
<ion-card>
<img src="http://101.96.128.94:9999/mfresh/news_imgs/01.jpg" alt="" />
<ion-card-header>
<ion-card-subtitle>此净化器功能优秀, 节能减排, 价格优美.</ion-card-subtitle>
<ion-card-title>净美仕净化器</ion-card-title>
</ion-card-header>
<ion-card-content>
打掉的的阿达的看了看.马卡龙文件但大家拿健康的宽带连接我已大奖等你
</ion-card-content>
</ion-card>
</ion-content>
</ion-app>
View Code
横向滚动展示
<!-- 横向滚动展示 -->
<!-- https://ionicframework.com/docs/api/slides -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>横向滚动展示</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- slides: 容器; slide: 项目 -->
<!-- pager: 页数指示 -->
<!-- loop: 循环滚动 -->
<!-- autoplay: 自动滚动 -->
<!-- disableOnInteraction: 用户触摸之后 让自动滚动失效; 默认为true -->
<ion-slides
pager
[options]="{ loop: true, autoplay: { disableOnInteraction: false } }"
>
<!-- 在ts文件先定义好图片路径的数组 -->
<ion-slide *ngFor="let item of images">
<img [src]="item" alt="" />
</ion-slide>
</ion-slides>
</ion-content>
</ion-app>
View Code
grid栅格
<!-- 栅格布局 -->
<!-- https://ionicframework.com/docs/api/grid -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>栅格布局</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- i-grid -->
<!-- 在scss中定义样式grid-lianxi -->
<ion-grid fixed class="grid-lianxi">
<ion-row>
<!-- 每行最多12列, size代表列数 -->
<ion-col size="6">6</ion-col>
<ion-col size="6">6</ion-col>
</ion-row>
<ion-row>
<!-- 超出会换行 -->
<ion-col size="4">4</ion-col>
<ion-col size="5">5</ion-col>
<ion-col size="6">6</ion-col>
<ion-col size="7">7</ion-col>
</ion-row>
<ion-row>
<ion-col size="3">3</ion-col>
<!-- 不写会自动填充剩余份数 -->
<ion-col>不写份数</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-app>
View Code
综合这些组件的一个例子
html:
<!-- 新闻 -->
<ion-app>
<ion-header>
<ion-toolbar color="danger">
<ion-title>网易新闻</ion-title>
</ion-toolbar>
</ion-header>
<!-- scrollEvents: 允许监听滚动事件, 默认false -->
<!-- ionScroll: 滚动事件 -->
<ion-content
*ngIf="news"
#content
[scrollEvents]="true"
(ionScroll)="onScroll($event)"
>
<!-- 下拉刷新 -->
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid fixed class="news-grid">
<ion-row>
<ion-col size="6" *ngFor="let item of news.result">
<ion-card>
<img [src]="item.image" alt="" />
<div class="content">
<div>{{ item.title }}</div>
<div>{{ item.passtime }}</div>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<!-- 加载更多 -->
<!-- threshold: 触底阈值. 10% 代表剩余未显示区域的高度 是 显示区域高度 10% 时触发触底操作 -->
<ion-infinite-scroll
threshold="10%"
position="bottom"
(ionInfinite)="loadData($event)"
>
<ion-infinite-scroll-content
loadingSpinner="dots"
loadingText="加载中..."
>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<!-- 悬浮按钮: 可以悬浮在已有内容的上方 -->
<!-- vertical: 竖向, 可选值 top/center/bottom 对应 上/中/下 -->
<!-- horizontal: 横向, 可选值 start/center/end -->
<ion-fab
[hidden]="!showGoTop"
vertical="bottom"
horizontal="end"
slot="fixed"
>
<ion-fab-button (click)="goTop()">
<ion-icon name="arrow-up-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
</ion-app>
View Code
scss:
.grid-lianxi {
border: 1px solid red;
ion-row {
border: 2px solid orange;
ion-col {
border: 1px solid blue;
}
}
}
.news-grid {
padding: 3px;
img {
width: 100%;
}
ion-col {
padding: 3px;
}
ion-card {
margin: 0;
.content {
padding: 4px;
div:first-child {
color: black;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 1.1em;
margin-bottom: 3px;
}
}
}
}
View Code
ts:
import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
// 掌控子元素, 绑定变量 content 到 ion-content 组件
@ViewChild('content') content: IonContent;
showGoTop = false; //是否要显示 回到顶部 按钮
// 绑定到 ion-conent 的滚动监听事件, 当滚动时自动触发
onScroll(event) {
console.log(event);
const y = event.detail.currentY; //当前竖向滚动的 y
//如果 y > 1200 就显示回到头部按钮
this.showGoTop = y > 1200;
}
goTop() {
// scrollToTop(动画时长); 单位毫秒
this.content.scrollToTop(250);
}
constructor(public http: HttpClient) {}
getUrl(pno: number) {
return 'https://api.apiopen.top/getWangYiNews?page=' + pno;
}
news: News;
ngOnInit(): void {
const url = this.getUrl(1);
this.http.get(url).subscribe((res: News) => {
console.log(res);
this.news = res;
});
}
page = 1;
//下拉刷新
doRefresh(event) {
console.log('下拉刷新触发!');
const url = this.getUrl(1);
this.http.get(url).subscribe((res: News) => {
console.log(res);
this.news = res;
this.page = 1; //重置为 第一页
event.target.complete(); //结束下拉刷新动画的显示
});
}
// 触底时触发
loadData(event) {
// console.log(event);
const url = this.getUrl(this.page + 1);
this.http.get(url).subscribe((res: News) => {
console.log(res);
// 合并新旧数据中的数组
res.result = this.news.result.concat(res.result);
this.news = res;
this.page++; //成功后, 页数+1
//通知组件此次加载操作已完成; 这样组件才会监听下一次
event.target.complete();
});
}
images = [
'http://101.96.128.94:9999/mfresh/images/banner_01.jpg',
'http://101.96.128.94:9999/mfresh/images/banner_02.jpg',
'http://101.96.128.94:9999/mfresh/images/banner_03.jpg',
'http://101.96.128.94:9999/mfresh/images/banner_04.jpg',
];
}
/////////////////////////////////////////
///////// 返回值结构声明
interface News {
code: number;
message: string;
result: NewsResult[];
}
interface NewsResult {
image: string;
passtime: string;
path: string;
title: string;
}
View Code
item组件
<!-- item组件 -->
<!-- https://ionicframework.com/docs/api/item -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>item</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Awesome Label</ion-label>
</ion-item>
<!-- button: 可以点击 -->
<!-- detail: 右侧出现 箭头图标 -->
<ion-item button detail>
<ion-label>Click me</ion-label>
</ion-item>
<ion-item>
<!-- slot: 插槽; item具有左右两个插槽, start 和 end -->
<ion-badge slot="end">42</ion-badge>
<ion-label>Item Avatar</ion-label>
</ion-item>
<ion-item>
<!-- avatar: 把内部图片变圆形 -->
<ion-avatar slot="start">
<img
src="http://www.gx8899.com/uploads/allimg/2017112908/pc2e3vft403.jpg"
/>
</ion-avatar>
<ion-label>
<h3>重庆天花板</h3>
<p>今天的面试题超级简单, 妥妥的~</p>
</ion-label>
<ion-badge color="danger" slot="end">42</ion-badge>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>设置</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>没有分割线</ion-label>
</ion-item>
<ion-item lines="full">
<ion-label>分割线充满</ion-label>
</ion-item>
<ion-item>
<ion-label>用户名:</ion-label>
<ion-input placeholder="账号/手机号/邮箱"></ion-input>
</ion-item>
<ion-item>
<ion-label>密码:</ion-label>
<ion-input placeholder="密码" type="password"></ion-input>
</ion-item>
<!-- 分组 -->
<ion-item-group>
<ion-item-divider>
<ion-label>A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>阿宝</ion-label>
</ion-item>
<ion-item>
<ion-label>阿花</ion-label>
</ion-item>
<ion-item-divider>
<ion-label>B</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>宝蓝</ion-label>
</ion-item>
<ion-item>
<ion-label>boner</ion-label>
</ion-item>
</ion-item-group>
<!-- i-item-sliding: 通过滑动 显示隐藏操作 -->
</ion-content>
</ion-app>
View Code
内容总结
以上是互联网集市为您收集整理的Angular 入门(三) 手机端开发全部内容，希望文章能够帮你解决Angular 入门(三) 手机端开发所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】