Angular DAY04

Angular04

命令行说明

ng new 项目名   生成项目包
ng s -o 启动项目
ng g c 组件   生成组件
ng g p 管道   生成管道 {{xxx| 管道}}
ng g d 指令   生成指令
ng g s 服务   生成服务; 状态共享 相当于vuex

语法含义

{{ 变量 }} 双标签内容
[属性名] = "值" 或 属性名="{{值}}" 属性
(事件名)="方法名()"    事件
[(ngModel)]="变量"<br>必须手动加载 Forms 模块    双向数据绑定
*ngIf   条件渲染
*ngFor = "let item of items; let i=index"
<组件 #唯一标识 /><br>@viewChild('唯一标识') 变量:类型;    绑定变量到组件
<组件 属性名='值' /><br>@Input() 属性名:类型   父子传参

1.父声明一个方法
2.把方法通过事件方式传递给子
3.子调用父传入的方法, 把自身的消息传递到方法中子父传参

1. 声明依赖: 类的构造方法声明 一个 特定类型的变量<br>2.注入: 系统在初始化组件时, 就必须传入指定类型的对象  服务的依赖注入机制
1. 网络模块默认不加载, 必须到 app.module.ts 中加载 HttpClientModule<br>2. 服务类型: HttpClient<br>3. 使用: this.http.get(地址).subscribe(res=>{})  网络服务
组件都有 出生 -> 更新自身 -> 死亡<br>1. 构造<br>2. ngOnInit() : 开始初始化<br>3. ngAfterContentInit(): 数据初始化完毕<br>4. ngAfterViewInit(): UI初始化完毕--界面<br>5. ngAfterContentChecked(): 数据更新完毕<br>6. ngAfterViewChecked(): UI更新完毕<br>7. ngOnDestroy(): 销毁   生命周期
ionic
项目启动命令:
ionic s
组件库: https://ionicframework.com/docs/components
按钮组件
https://ionicframework.com/docs/api/button

<!-- 按钮组件 -->
<ion-app><ion-header><ion-toolbar><ion-title>Button按钮</ion-title></ion-toolbar></ion-header><ion-content><!-- 按钮的风格: 默认会根据设备自动调整 --><ion-button>default</ion-button><!-- 风格属性: mode --><ion-button mode="ios">mode: ios</ion-button><ion-button mode="md">mode: android</ion-button><!-- 大小: size --><ion-button size="small">size:small</ion-button><ion-button size="default">size:default</ion-button><ion-button size="large">size:large</ion-button><!-- 填充: fill --><ion-button fill="clear">fill:clear</ion-button><ion-button fill="outline">fill:outline</ion-button><ion-button fill="solid">fill:solid</ion-button><!-- 扩展性: expand --><ion-button expand="full">expand:full</ion-button><ion-button expand="block">expand:block</ion-button><!-- 颜色风格: color  官方提供了一些固定的颜色风格 --><ion-button color="primary">color:primary</ion-button><ion-button color="secondary">color:secondary</ion-button><ion-button color="success">color:success</ion-button><ion-button color="warning">color:warning</ion-button><ion-button color="danger">color:danger</ion-button><ion-button color="light">color:light</ion-button><ion-button color="dark">color:dark</ion-button><ion-button color="medium">color:medium</ion-button><ion-button color="tertiary">color:tertiary</ion-button><!-- 不可用 --><ion-button disabled>不可用</ion-button></ion-content>
</ion-app>

徽章组件
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 color="primary">42</ion-badge><ion-badge color="success">42</ion-badge><ion-badge color="danger">42</ion-badge><ion-badge color="warning">颜值主播</ion-badge><ion-badge color="warning">舞蹈达人</ion-badge><ion-badge color="warning">渣然</ion-badge></ion-content>
</ion-app>

图标组件
官方提供了很多小图标, 可以直接使用
https://ionicons.com/

<ion-app><ion-header><ion-toolbar><ion-title>icon图标</ion-title></ion-toolbar></ion-header><ion-content><ion-icon name="logo-alipay"></ion-icon><!-- 图标通过 字体调整大小 --><ion-icon name="logo-alipay" style="font-size: 40px"></ion-icon><ion-iconname="logo-alipay"style="font-size: 40px"color="tertiary"></ion-icon><ion-iconname="logo-wechat"style="font-size: 40px"color="success"></ion-icon></ion-content>
</ion-app>

卡片组件
https://ionicframework.com/docs/api/card

<ion-app><ion-header><ion-toolbar><ion-title>Card卡片</ion-title></ion-toolbar></ion-header><ion-content><!-- i-card-full --><ion-card><imgsrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606890843974&di=185d2f0518aac3964f7eb734ce5b9317&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F13%2F20180713223116_sfuuu.thumb.700_0.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>

输入框
https://ionicframework.com/docs/api/input

<ion-app><ion-header><ion-toolbar><ion-title>输入框</ion-title></ion-toolbar></ion-header><ion-content><ion-input type="text" placeholder="用户名"></ion-input><ion-input type="password" placeholder="密码"></ion-input><ion-input type="number" placeholder="数字"></ion-input></ion-content>
</ion-app>

搜索框
https://ionicframework.com/docs/api/searchbar

<ion-app> <ion-header> <ion-toolbar> <ion-title>搜索框</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-searchbar placeholder="Filter Pizza" (ionChange)="onSearchChange($event)" ></ion-searchbar> </ion-content>
</ion-app>

item
https://ionicframework.com/docs/api/item

export class AppComponent {// 输入框内容变化时 触发onSearchChange(event) {// console.log(event);let v = event.detail.value;console.log(v);//发请求给服务器, 查询结果并展示}
}
<ion-app> <ion-header> <ion-toolbar> <ion-title>item</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-item color="warning"> <ion-label>warning</ion-label> </ion-item> <!-- 点击效果 --> <ion-item button detail> <ion-label>账号与安全</ion-label> </ion-item> <ion-item button detail> <!-- label:占据剩余所有空间 --> <ion-label>青少年模式</ion-label> <!-- text: 相当于span --> <ion-text> 未开启 </ion-text> </ion-item> <ion-item detail button> <!-- 插槽slot:  左start 右end --> <ion-icon name="body-outline" color="primary" slot="start"></ion-icon> <ion-label>附近的人</ion-label> </ion-item> <ion-item> <!-- avatar: 头像 -- 圆 --> <ion-avatar slot="start"> <img [src]="header" /> </ion-avatar> <ion-label> <h2>一级演员-张嘉译</h2> <p>任乐乐小姐姐, 看见请冒泡</p> </ion-label> </ion-item> <ion-item> <!-- thumbnail: 缩略图-- 正方形 --> <ion-thumbnail slot="start"> <img [src]="header" /> </ion-thumbnail> <ion-label> <h2>一级演员-张嘉译</h2> <p>这是什么属性</p> </ion-label> </ion-item> <ion-item> <ion-label>姓名:</ion-label> <ion-input></ion-input> </ion-item> <!-- i-item-group --> <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>宝马</ion-label> </ion-item> </ion-item-group> </ion-content>
</ion-app>

栅格布局grid
https://ionicframework.com/docs/api/grid

<!-- 布局: 栅格布局 -->
<ion-app> <ion-header> <ion-toolbar> <ion-title>grid栅格布局</ion-title> </ion-toolbar> </ion-header> <ion-content> <!-- i-grid --> <ion-grid fixed> <ion-row> <!-- 每行分12列 --> <ion-col size="6">1</ion-col> <ion-col size="6">2</ion-col> </ion-row> <ion-row> <!-- 每行分12列 --> <ion-col size="2">2</ion-col> <ion-col size="4">4</ion-col> <ion-col size="6">6</ion-col> </ion-row> <ion-row> <!-- 不写size 属性, 均分 --> <ion-col>1</ion-col> <ion-col>1</ion-col> <ion-col>1</ion-col> </ion-row> <ion-row> <!-- 超出12份: 自动折行显示 --> <ion-col size="6">6</ion-col> <ion-col size="5">5</ion-col> <ion-col size="5">5</ion-col> </ion-row> </ion-grid> </ion-content>
</ion-app>

跨域解决办法
常用共三种:
• 服务端解决: cors
– 实际开发最常用
• 前端解决: 代码proxy
– 开发时常用, 如果发布成产品不会使用!
• 前端+后端共同解决: jsonp
– 原理是 script 不会被同源策略影响, 很少用.

angular的 proxy 解决方案
• 创建 src/proxy.conf.json

• 配置: 让启动时自动加载代理文件

• 启动时的替换原理:

• 重新启动: ionic s 即可

Angular DAY04相关推荐

Angular No name was provided for external module 'XXX' in output.globals 错误
Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...
angular.isUndefined()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ang ...
五：Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上实 ...
angular初步认识一
最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
故事背景:有一天,强哥整了个动态渲染的列表代码如下 app.component.html <div><button (click)="add()">添加一行 ...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component ' ...
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...

Angular DAY04

命令行说明

语法含义

Angular DAY04相关推荐

最新文章

热门文章

Angular DAY04

命令行 说明

语法 含义

Angular DAY04相关推荐

最新文章

热门文章

命令行说明

语法含义