Angular.js
Angular.js的学习
喜欢吃青椒吗
这个作者很懒,什么都没留下…
展开
-
ZERRO 组件库(Angular.js)开发流程
项目启动与安装 1. ng new 项目名字 2. cd 项目名字 3. ng add ng-zorro-antd 在组件中如何具体使用? 1. angular不同于vue,vue直接在main中直接导入。而angular需要在app.module.ts中配置。 2. 如果你想用button按钮组件。 - 需要在app.modules.ts中直接导入。 import { NzButtonModule } from 'ng-zorro-antd/button'; - 再写入数组。 imports..原创 2020-10-15 08:37:18 · 149 阅读 · 0 评论 -
管道
管道用来对字符串,货币金额,日期和其他显示数据进行转换和格式化。管道是一些简单的函数,可以在模板表达式中用来接受输入值并返回一个转换后的值。 # 常用的内置管道 1. DatePipe:根据本地环境中的规则格式化日期值。 2. UpperCasePipe:把文本全部转换成大写。 3. LowerCasePipe :把文本全部转换成小写。 4. CurrencyPipe :把数字转换成货币字符串,根据本地环境中的规则进行格式化。 5. DecimalPipe:把数字转换成带小数点的字符串,根据本地环境中的.原创 2020-10-15 08:32:52 · 78 阅读 · 0 评论 -
angular的生命周期
钩子方法 用途 时机 ngOnChanges() 当angular设置或重新设置数据绑定的输入属性时响应。这里发生的非常频繁,所以你在这里执行的任何操作都会显著影响性能。 在ngOnInit()之前以及所绑定的输入属性的值发生变化时都会调用。 ngOnInit() 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮ngOnChanges()完成之后调用,只调用一次 ngDoCheck() 检测,并在发生angular无法检测或不愿意自己检测的变化时做出反应...原创 2020-10-15 08:31:04 · 65 阅读 · 0 评论 -
angular的 #
# $event对象 <input (keyup)="onKey($event)"> //$event 对象的属性取决于 DOM 事件的类型。 //所有标准 DOM 事件对象都有一个 target 属性, 引用触发该事件的元素。 在本例中,target 是<input> 元素, event.target.value 返回该元素的当前内容。 # 传入$event是靠不住的做法 类型化事件对象揭露了重要的一点,即反对把整个DOM事件传到方法中,因为这样组件会知道太多的模板信息。原创 2020-10-15 08:29:06 · 1242 阅读 · 0 评论 -
Angular模板语法总结
1. *ngFor="let item of items; index as productId" //相当于 v-for="(item,index) in items" <div *ngFor="let item of items; let i = index">{{i + 1}} - {{item.name}}</div> //另外一种获取index的方法 2. *ngIf。判断。<p *ngIf="product.description"> //相当于 <原创 2020-10-15 08:28:21 · 165 阅读 · 0 评论 -
简单理解ngrx
关键字:state;action;reducer; # state export interface ControlState { loading?: boolean; status: string, playList: any[] } export const initialState: ControlState = { loading: false, status: 'play', playList: [] }; # action // 为变量设置独一无二的type。 .原创 2020-10-15 08:27:27 · 457 阅读 · 0 评论 -
前端文件(图片)上传
在angular+ZERRO中 // h5代码 <nz-upload (nzChange)="handleChange($event)" nzListType="picture-card" [nzAction]='' [(nzFileList)]="fileList"> <div>上传图片</div> </nz-upload> //--------------------------------------------------------------.原创 2020-10-14 17:50:53 · 529 阅读 · 0 评论 -
angular的路由
婴儿时期 # 在app.module.ts中 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; //从路由库导入RouterModule import { RouterModule } from '@angular/router'; //以下是组件的导入 import { AppComponent } from './app.component'; .转载 2020-10-14 17:45:51 · 115 阅读 · 0 评论 -
angular的组件通信
父组件往子组件传递。(vue中是props down) # 在父组件中 <h1>父组件</h1> <cmt-child [data]='str'></cmt-child> //[data]为自定义属性。 ---------------------------------------------- import { Component, OnInit } from '@angular/core'; export class FatherComponent .原创 2020-10-14 17:34:29 · 95 阅读 · 0 评论 -
配置开发环境与生产环境
angular # 正常angular开发流程 1. 配置environments文件 //在app/environments.ts文件中 export const environment = { production: false, baseUrl: 'http://dev.com'; //开发环境地址 }; //在app/environment.prod.ts文件中 export const environment = { production: true, baseURL: '.原创 2020-10-14 17:29:05 · 702 阅读 · 0 评论 -
在Angular.js中的处理跨域问题
在开发环境中,因为同源策略的影响,前后端交互会产生跨域。 1. 在angular项目的根目录中新建文件 proxy.config.json 2. { "/api": { "target": "http://192.168.30.54:8081", //后端给的地址 "secure": false, "pathRewrite": {"^/api": ""} } } 3. 在 pageage.json文件中 'start': 'ng serv.原创 2020-10-14 17:24:00 · 105 阅读 · 0 评论