angular
文章平均质量分 51
水痕01
暂停更新博客
展开
-
angular中路由的使用
一、路由的基本使用1、创建两个组件ng g c components/homeng g c components/news2、在app-routing.module.ts中配置路由const routes: Routes = [ // 默认访问地址 { path: '', redirectTo: 'home', pathMatch: 'ful...原创 2019-11-29 16:23:41 · 625 阅读 · 0 评论 -
angular8与ngrx8的基本使用步骤
一、案例运行后的效果图二、关于ngrx的认识1、官网地址2、ngrx是借鉴redux的思维,专门为angular中定制的一个状态管理的包,类似react中的redux、vue中的vuex,主要包括以下几个模块(本文先介绍@ngrx/store)@ngrx/store@ngrx/store-devtools@ngrx/effects@ngrx/router-store@ngrx...原创 2019-11-27 13:54:32 · 1340 阅读 · 0 评论 -
Angular开发(四)-关于angular2的通用指令
说明:由于本人正在angular2或者说是angular4,只是把本人学习过程个人理解写出来,如果有写的不对的地方希望各位指出来,或者给我留言来纠正错误,相互学习,相互提高。本人QQ:332904234一、 关于angular中指令包括三类 通用指令路由指令表单指令 本次仅仅是讨论通用指令,别的指令将在今后讨论 二、angular的通用指令包括:NgClassNgStyle原创 2017-05-04 09:43:46 · 1566 阅读 · 1 评论 -
Angular开发(二十九)-angular中引入jq开发及angular正确开发姿势
本章是修复Angular2从环境搭建到开发中引入jq开发 为了更切合开发中,本例中使用静态文件夹assets存放资源一、在index.html中引入js<script src="./assets/js/jquery-3.2.1.min.js"></script>二、在新建组件的使用jq1、declare var $ : any;2、在组件的生命周期函数ngAfterViewInit书写jq原创 2017-06-28 12:15:34 · 1203 阅读 · 0 评论 -
Angular开发系列教程
第一章:环境搭建第二章:关于angular整体框架及普通介绍第三章:关于属性绑定与事件绑定第四章:Angular开发(四)-关于angular2的通用指令原创 2017-05-02 20:48:45 · 2298 阅读 · 1 评论 -
Angular开发(二十八)-angular开发中分页的使用
在web开发中常见的分页有前端分页(假分页)后端分页(根据分页来请求数据)现在我们学习的是angular也就是假分页1、npm install ng2-pagination --save2、在app.module.ts文件中引入模块import {Ng2PaginationModule} from "ng2-pagination"@NgModule({ imports: [原创 2017-06-15 10:21:31 · 2422 阅读 · 1 评论 -
Angular开发(二十七)-补充rxjs的使用
响应式编程就是一种异步数据流和变化传播的编程规范,可以简单的理解为是观察者模式与Rxj的开发模式,在流的操作中通过一些特定的操作符,从旧的流转换为新的流,然后监听变化一、rxjs的基本使用及基本术语安装使用1、传统方式<script src="http://cdn.bootcss.com/rxjs/5.4.0/Rx.js"></script> 2、npm安装包的使用import {Observ原创 2017-06-14 17:37:44 · 1900 阅读 · 0 评论 -
普通表单与响应式表单的对比
一、模板驱动表单1、在用angular-cli脚手架创建项目的时候就会在app.module.ts文件中自动加入FormsModule模块2、FormsModule就是模板驱动表单的,为我们提供了两个指令 1、ngModel2、NgForm二、响应式表单1、响应式表单是ReactiveFormsModule需要我们手动在app.module.ts中添加2、响应式表单为我们提供了两个指令原创 2017-07-14 09:57:08 · 3221 阅读 · 0 评论 -
Angular开发(八)-关于表单的基本认识
说明:在angular中表单会默认使用交给angular去处理,对于传统表单中写的action或者method都不生效了,如果不想交给angular处理就要在表单中加入ngNoForm属性一、不使用form标签的情况下<div> <p> <input type="text" minlength="3" maxlength="6" required [(ngModel)]="原创 2017-05-09 14:47:31 · 986 阅读 · 0 评论 -
关于angular中内置指令的介绍
一、关于ngIf的使用格式:*ngIf = "表达式" 表达式由自己随便定义,但是表达式返回的是布尔类型的值,如果返回的是假,那么就直接用DOM上移除<div *ngIf="true" >div1</div><div *ngIf="a > b" >div2</div><div *ngIf="str == 'yes'" >div3</div><div *ngIf="myfun()" >di原创 2017-07-12 10:42:54 · 590 阅读 · 0 评论 -
angular2开发小型项目
一、效果图1、上面form表单点击提交可以在下面创建一个卡片(前提是输入不能为空)2、使用局部变量获取输入框的值3、使用article.component.ts做数据层4、使用排序5 、使用@Input进行组件间数据传递二、代码见demo原创 2017-07-11 10:01:07 · 955 阅读 · 0 评论 -
angular部分知识总结
一、添加class1、[class.className]=fn()如果函数fn返回true表示会添加一个样式,如果返回为false则不添加样式二、关于子组件传递参数到父组件1、指定一个输出参数 javascript @Output() outputName[输出字段] = new EventEmitter() 2、为输出对象创建一个一个EventEmitter()见上面3、在子组件的视原创 2017-07-20 10:55:41 · 646 阅读 · 0 评论 -
关于vscode编辑器缩进的问题
在利用angular-cli项目的时候往往纠结于缩进的问题一、设置tab缩进"editor.tabSize": 4,二、设置全部的文件都是4个字符缩进"editor.detectIndentation": false原创 2017-07-29 13:08:57 · 7765 阅读 · 0 评论 -
VUE中solt内容插槽与ng4中投影的使用
一、在VUE中slot的认识 表示父组件分发内容的插槽,父组件中定义这个后,可以直接在子组件中往里面填充内容1、一个父组件就定义一个slot<div class="page"> <!-- 定义一个分发内容的插槽 --> <slot></slot></div>2、父组件使用<Page> <h3>随便定义的</h3></Page>3、如果定义多个插槽的话就要单独取名字原创 2017-10-25 13:39:35 · 1120 阅读 · 0 评论 -
json-server本地模拟数据工具的使用
现在前后端分离试开发,前端请求后端数据接口,但是有时候后端的接口还没写好,一般我们想到的方法是利用mockjs或者搭建一个前端服务器来返回数据,现在介绍一个插件json-server可以模拟本地数据1、安装npm install json-server -g2、创建一个本地数据data.json{ "pagelist":[ { "registerNu原创 2017-11-01 14:19:29 · 1725 阅读 · 0 评论 -
Angular开发(十四)-利用angular的http转发、即代理http 请求,处理项目中请求跨域的问题
虽然angular的http请求中提供了jsonp处理跨域问题,但是不常用,我们web服务器端可能会选择别的方式处理web服务器端使用nginx进行反向代理处理使用nodejs中node-http-proxy解决本地开发ajax跨域问题使用angular自身的http转发,代理http请求 前面两种在本章节中就不去介绍,现在我只介绍第三种方式一、在项目的根目录下创建一个proxy.conf.原创 2017-05-13 22:43:05 · 14359 阅读 · 4 评论 -
angular4中动画及路由动画的使用
angular4中动画已经拆分出去的,在项目中需要使用动画需要手动安装一、基本配置1、安装动画库npm install @angular/animations --save2、创建一个基本的项目,配置路由二、动画的基本步骤1、创建一个文件夹专门存放项目中的动画2、创建一个动画文件,引入包(根据需要引入)import { trigger, state, style, transition,原创 2017-10-20 22:45:02 · 6097 阅读 · 0 评论 -
angular4开发中对请求数据层的封装
一、本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目部署结构的基础上扩展了,根据javaweb项目开发分层来说命名service可能会好点,但是为了不与angular4中本身就有的服务想冲突,本人取名为model与数据层打交道的二、项目结构三、本章节使用到的技术点1、封装了带头部信息的(可能出于安全考虑CSRF攻击类的,或者python-w原创 2017-08-28 17:57:58 · 8852 阅读 · 0 评论 -
angular4实战一项目创建
最近一段时间在用angular开发项目,现把自己开发过程中一些体会以博客的形式写出来,分享自己心得,让彼此进步一、开发环境1、window10系统2、node7.4.03、npm4.0.54、安装@angular/cli: 1.4.1 参考安装文档二、创建一个项目1、ng new projectName --style=scss,本项目使用scss开发的2、更多的扩展认识掘金中ang原创 2017-09-15 16:23:36 · 5375 阅读 · 4 评论 -
angular4项目开发中背景图片地址的引用
随着angular4的出来,angular-cli也升级了,之前使用[1.0.0-beta.xxx]的版本,在组件的样式文件中直接使用assets/images/xxx图片路径,现在新版本的路径是直接从当前组件开始查找一、解决关于@angular/cli:1.4的图片路径的方法有1、在组件中直接使用./../../../去查找图片路径2、在组件中创建一个存放图片的工作目录,就省去了./../.原创 2017-09-14 15:27:48 · 11234 阅读 · 1 评论 -
angular4中关于表单的校验
本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。一、使用响应式表单的步骤1、在模块(一般是app.module.ts)中引入ReactiveFormsModule2、在组件的ts文件中使用响应式表单import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';export c原创 2017-09-10 22:55:49 · 12821 阅读 · 5 评论 -
ng-container的使用
ng-container既不是一个Component,也不是一个Directive,只是单纯的一个特殊tag。 这点类似于template,Angular复用了HTML5规范中template 的tag的语义,不过并没有真正利用其实现,因此在审查元素中是永远也找不到一个template元素的。 不过,由于ng-container并不是HTML5中的,为了保持区分度,采用了ng-作为前缀。原创 2017-07-11 08:55:39 · 14162 阅读 · 0 评论 -
Angular开发(二十二)-angular处理复选框选值的问题
在angular开发中单选框可以获取到值,但是复选框传统的方式获取的值是true和false,但是实际开发中往往需要获取到值或者是id一、在响应式表单与表单校验基础上扩展<div class="form-group"> <label>性别:</label> <div class="radio"> <label class="radio-inline" *ngFor=原创 2017-05-26 10:09:16 · 9103 阅读 · 2 评论 -
Angular开发(十三)-服务的基本认识及利用服务实现组件间的通信
服务本人简单的理解为传统的javascript中的方法或者封装好的插件,在angular中称为服务,哪个组件需要使用该服务就注入进去(类似传统的方法调用或者插件的使用)常见服务的使用场景1、多个组件中出现重复的代码时,把重复的代码提取到服务中实现代码的复用(例如:与服务器通信的数据服务)2、当组件中掺杂了太多的业务代码和数据处理逻辑时,把这些逻辑封装成服务供组件使用,组件仅仅负责跟UI相关的逻原创 2017-05-10 13:04:13 · 3385 阅读 · 1 评论 -
Angular开发(十六)-HTTP请求的详细介绍
在项目开发中避免不了要跟服务器端数据链条,进行数据的增删改查操作,传统的方式用的是ajax,新一代网络请求fetch,angular中默认注入了HttpModule,如果在网络请求中出现跨域的问题,请先看angular自带的代理方式处理跨域一、Http源码介绍源码中提供了几个方法,下面我们介绍两个比较常用的get与post请求,至于别的request,put,delete,patch,head可以自原创 2017-05-16 09:36:51 · 1715 阅读 · 0 评论 -
Angular开发(九)-关于响应式基本认识
正在书写中原创 2017-05-09 14:48:15 · 1177 阅读 · 0 评论 -
Angular开发(十五)-关于父子组件中投影的介绍
我们利用父组件做做一个通用的模板,然后各个子组件嵌套进去,实现自己的功能,比如:我们要做一个提示弹框,确认弹框…就可以利用这个原理,在angular中有个投影的ng-content可以用在子组件中,父组件直接传递模板到子组件中常用的投影选择有 * select=”唯一的名称”(自定义属性) * select=”.className”(class类名) * select=”[name=唯一的名原创 2017-05-15 16:30:08 · 1570 阅读 · 1 评论 -
Angular开发(十一)-关于响应式表单及表单的校验
正在书写中原创 2017-05-09 14:49:28 · 2581 阅读 · 0 评论 -
Angular2从环境搭建到开发
本文章讲述两种配置的方法分别为:手动配置和一键配置一、手动配置的方法:1、项目目录结构|--hello word|----src|------app.component.html|------app.component.ts|------app.module.ts|------main.ts|----index.html|----package.json|----tsconfi原创 2017-04-18 09:02:30 · 3257 阅读 · 0 评论 -
Angular开发(十)-关于表单的基本认识
书写中原创 2017-05-09 14:48:52 · 820 阅读 · 0 评论 -
Angular开发(五)-关于组件的基本认识
说明:由于本人正在angular2或者说是angular4,只是把本人学习过程个人理解写出来,如果有写的不对的地方希望各位指出来,或者给我留言来纠正错误,相互学习,相互提高。本人QQ:332904234在第二章的时候就介绍了Angular是由组件组成的;组件与模板之间的数据传输(属性绑定和事件绑定);组件与组件之间的切换是通过路由实现的;依赖注入服务到组件中;组件可以概括的说属于指令里面的一原创 2017-05-04 17:27:48 · 2697 阅读 · 0 评论 -
Angular开发(三)-关于属性绑定与事件绑定
说明:由于本人正在angular2或者说是angular4,只是把本人学习过程个人理解写出来,如果有写的不对的地方希望各位指出来,或者给我留言,相互学习。本人QQ:332904234一、新建一个项目工程并创建一个组件bind,如果还有不知道怎么创建angular项目的请先查看Angular2从环境搭建到开发建议直接用angular-cli创建二、数据绑定插值的方式[比较常见],就是把利用(金甲二原创 2017-05-02 20:42:11 · 20698 阅读 · 7 评论 -
Angular开发(七)-关于组件的生命周期
一、说明Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力。二、angular中总共有8个生命周期钩子函数下面统一介绍 名称 调用时机 接口名称 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。 OnC原创 2017-05-05 11:15:33 · 4126 阅读 · 0 评论 -
Angular开发-ngx-bootstrap的UI组件介绍
ngx-bootstrap官方网站里面可以复制你想要的样式组件,官方有介绍怎么使用,不过本人稍微修改了下使用ngx-bootstrap的步骤1、npm install ngx-bootstrap –save2、npm install bootstarap –save-dev 3、在angular-cli.json文件中添加bootstrap为全局样式"styles": [ "styles原创 2017-05-17 15:44:07 · 17781 阅读 · 4 评论 -
Angular开发(二十四)-angular表单的校验
表单的校验,本文档中分为模板驱动和模型驱动表单一、模板驱动的校验1、采用第三方的组件进行校验2、npm install ng2-validation --save3、配置app.module.tsimport { FormsModule, ReactiveFormsModule } from '@angular/forms';import {CustomFormsModule} from原创 2017-06-08 11:52:09 · 2488 阅读 · 1 评论 -
Angular开发(二十六)-angular集合百度图表开发
在angular中使用百度图表主要步骤1、安装依赖包npm install --save echarts ng2-echarts2、在angular-cli.json中配置"scripts": [ "../node_modules/echarts/dist/echarts.min.js"],3、在app.module.ts中配置import { Ng2Echarts } from 'n原创 2017-06-07 15:29:37 · 2223 阅读 · 3 评论 -
Angular开发(二十五)-angular自带动画效果
angular2中使用自带的动画一、在组件中创建一个动画import {Component,OnInit,style,trigger,state,transition,animate,keyframes} from '@angular/core';@Component({ selector: 'app-page1', templateUrl: './page1.component.html'原创 2017-06-07 13:00:01 · 2806 阅读 · 0 评论 -
Angular开发(二十三)-angular响应式表单正确开发姿势
在之前的篇章中介绍了响应式表单,但是本人觉得新手朋友不一定可以用好,现在补充一篇一、书写普通的form表单<form role="form"> <div class="form-group"> <label>用户名:</label> <input type="text" placeholder="请输入用户名" class="form-control" />原创 2017-06-06 09:53:34 · 3840 阅读 · 0 评论 -
Angular开发(十八)-路由的基本认识
一、学单词:angular路由中涉及到很多新单词词汇 单词 说明 使用场景 Routes 配置路由,保存URL对应的组件,以及在哪个RouterOutlet中展现 RouterOutlet 在html中标记挂载路由的占位容器 Router 在ts文件中负责跳转路由操作 Router.navigate([“/xxx”]),Router.navigate原创 2017-05-22 14:23:23 · 10423 阅读 · 8 评论 -
Angular开发(十七)-angular中的依赖注入
开发中原创 2017-05-16 09:37:40 · 1709 阅读 · 0 评论