');--input-focus-border-color:Highlight;--input-focus-outline:1px solid Canvas;--input-unfocused-border-color:transparent;--input-disabled-border-color:transparent;--input-hover-border-color:#000}@media (forced-colors:active){:root{--input-focus-border-color:CanvasText;--input-unfocused-border-color:ActiveText;--input-disabled-border-color:GrayText;--input-hover-border-color:Highlight}.annotationLayer .buttonWidgetAnnotation.checkBox input:required,.annotationLayer .buttonWidgetAnnotation.radioButton input:required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .textWidgetAnnotation input:required,.annotationLayer .textWidgetAnnotation textarea:required{outline:1.5px solid selectedItem}}.annotationLayer{--scale-factor:1;left:0;pointer-events:none;position:absolute;top:0;transform-origin:0 0}.annotationLayer section{box-sizing:border-box;pointer-events:auto;position:absolute;text-align:initial;transform-origin:0 0}.annotationLayer .buttonWidgetAnnotation.pushButton>a,.annotationLayer .linkAnnotation>a{font-size:1em;height:100%;left:0;position:absolute;top:0;width:100%}.annotationLayer .buttonWidgetAnnotation.pushButton>canvas{height:100%;width:100%}.annotationLayer .buttonWidgetAnnotation.pushButton>a:hover,.annotationLayer .linkAnnotation>a:hover{background:#ff0;box-shadow:0 2px 10px #ff0;opacity:.2}.annotationLayer .textAnnotation img{cursor:pointer;height:100%;position:absolute;width:100%}.annotationLayer .buttonWidgetAnnotation.checkBox input,.annotationLayer .buttonWidgetAnnotation.radioButton input,.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .textWidgetAnnotation input,.annotationLayer .textWidgetAnnotation textarea{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px*var(--scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .buttonWidgetAnnotation.checkBox input:required,.annotationLayer .buttonWidgetAnnotation.radioButton input:required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .textWidgetAnnotation input:required,.annotationLayer .textWidgetAnnotation textarea:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .textWidgetAnnotation input[disabled],.annotationLayer .textWidgetAnnotation textarea[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,.annotationLayer .buttonWidgetAnnotation.radioButton input:hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .textWidgetAnnotation input:hover,.annotationLayer .textWidgetAnnotation textarea:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .textWidgetAnnotation input:hover,.annotationLayer .textWidgetAnnotation textarea:hover{border-radius:2px}.annotationLayer .choiceWidgetAnnotation select:focus,.annotationLayer .textWidgetAnnotation input:focus,.annotationLayer .textWidgetAnnotation textarea:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox :focus,.annotationLayer .buttonWidgetAnnotation.radioButton :focus{background-color:transparent;background-image:none}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation.checkBox input,.annotationLayer .buttonWidgetAnnotation.radioButton input{-webkit-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .popupWrapper{font-size:calc(9px*var(--scale-factor));min-width:calc(180px*var(--scale-factor));pointer-events:none;position:absolute;width:100%}.annotationLayer .popup{word-wrap:break-word;background-color:#ff9;border-radius:calc(2px*var(--scale-factor));box-shadow:0 calc(2px*var(--scale-factor)) calc(5px*var(--scale-factor)) #888;cursor:pointer;font:message-box;margin-left:calc(5px*var(--scale-factor));max-width:calc(180px*var(--scale-factor));padding:calc(6px*var(--scale-factor));pointer-events:auto;position:absolute;white-space:normal}.annotationLayer .popup>*{font-size:calc(9px*var(--scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px*var(--scale-factor))}.annotationLayer .popupContent{border-top:1px solid #333;margin-top:calc(2px*var(--scale-factor));padding-top:calc(2px*var(--scale-factor))}.annotationLayer .richText>*{font-size:calc(9px*var(--scale-factor));white-space:pre-wrap}.annotationLayer .caretAnnotation,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .fileAttachmentAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .highlightAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .lineAnnotation svg line,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .squareAnnotation svg rect,.annotationLayer .squigglyAnnotation,.annotationLayer .stampAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .underlineAnnotation{cursor:pointer}.annotationLayer .annotationTextContent,.annotationLayer section svg{height:100%;position:absolute;width:100%}.annotationLayer .annotationTextContent{color:transparent;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.annotationLayer .annotationTextContent span{display:inline-block;width:100%}code[class*=language-],pre[class*=language-]{word-wrap:normal;background:none;color:#000;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;hyphens:none;line-height:1.5;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#b3d4fc;text-shadow:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{background:hsla(0,0%,100%,.5);color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}@font-face{font-display:swap;font-family:Averta Web;font-style:normal;font-weight:400;src:url(/content-platform/static/Averta-Regular-fd1297bf462e95eea6aa118597d8ef9e.otf) format("opentype")}@font-face{font-display:swap;font-family:Averta Web;font-style:italic;font-weight:400;src:url(/content-platform/static/Averta-RegularItalic-a93ae4a14814b0363207932e2c55e7bb.otf) format("opentype")}@font-face{font-display:swap;font-family:Averta Web;font-style:normal;font-weight:600;src:url(/content-platform/static/Averta-Semibold-3cbea55cef956724c095d3faa96ac883.otf) format("opentype")}@font-face{font-display:swap;font-family:Averta Web;font-style:italic;font-weight:600;src:url(/content-platform/static/Averta-SemiboldItalic-7962116f4e3c788c3df34f71cb41f4c1.otf) format("opentype")}@font-face{font-display:swap;font-family:"PT Serif";font-style:normal;font-weight:400;src:url(/content-platform/static/PT_Serif-Web-Regular-a12d02e92a52545c0e252cb52e59a199.ttf) format("truetype")}@font-face{font-display:swap;font-family:"PT Serif";font-style:italic;font-weight:400;src:url(/content-platform/static/PT_Serif-Web-Italic-fbc44e1e589cb892ee02348b2a8a348c.ttf) format("truetype")}@font-face{font-display:swap;font-family:"PT Serif";font-style:normal;font-weight:600;src:url(/content-platform/static/PT_Serif-Web-Bold-f86a6a1831027140ee56a79917cdd50d.ttf) format("truetype")}@font-face{font-display:swap;font-family:"PT Serif";font-style:italic;font-weight:600;src:url(/content-platform/static/PT_Serif-Web-BoldItalic-dc0d330f07cb434d3df2ada512eeb3b3.ttf) format("truetype")}@font-face{font-display:swap;font-family:Simplon Mono;font-style:normal;font-weight:400;src:url(/content-platform/static/SimplonMono-Regular-f7db758b4f03c8b9179c1d8fe0bb44f8.woff2) format("woff2"),url(/content-platform/static/SimplonMono-Regular-4873b89276459e0daae704dc30e2966d.woff) format("woff")}@font-face{font-display:swap;font-family:Haffer;font-style:normal;font-weight:400;src:url(/content-platform/static/HafferXH-Regular-5aabd3cd7105e25df233f608f2d66bc2.otf) format("opentype")}@font-face{font-display:swap;font-family:Haffer;font-style:italic;font-weight:400;src:url(/content-platform/static/HafferXH-RegularItalic-8cc7af3f0d75ba1b610a1b1878ea5eee.otf) format("opentype")}@font-face{font-display:swap;font-family:Haffer;font-style:normal;font-weight:500;src:url(/content-platform/static/HafferXH-Medium-dae5509349255a527ba6223b40257a7c.otf) format("opentype")}@font-face{font-display:swap;font-family:Haffer;font-style:normal;font-weight:600;src:url(/content-platform/static/HafferXH-SemiBold-64a01291b8f7380359bb3642c1b1e00a.otf) format("opentype")}@font-face{font-display:swap;font-family:Haffer;font-style:italic;font-weight:600;src:url(/content-platform/static/HafferXH-SemiBoldItalic-869dd4deb4c6e290c1aaf1e6a8670036.otf) format("opentype")}@font-face{font-display:swap;font-family:Nudge;font-style:normal;font-weight:100;src:url(/content-platform/static/VCNudge-Thin-09f2315fb254f9dc017f0e4983166415.otf) format("opentype")}@font-face{font-display:swap;font-family:Nudge;font-style:normal;font-weight:300;src:url(/content-platform/static/VCNudge-Light-dc44d09f0564da3a5f46801b8bb26cd8.otf) format("opentype")}@font-face{font-display:swap;font-family:Nudge;font-style:normal;font-weight:400;src:url(/content-platform/static/VCNudge-Regular-be0a147c918c6bec670c17f5204784bb.otf) format("opentype")}@font-face{font-display:swap;font-family:Nudge;font-style:normal;font-weight:700;src:url(/content-platform/static/VCNudge-Bold-822d17e33e72d439ad42d99a75ae6df0.otf) format("opentype")}@font-face{font-display:swap;font-family:Nudge;font-style:normal;font-weight:800;src:url(/content-platform/static/VCNudge-ExtraBold-a2d0723b460f32bc659ad1670a00ae22.otf) format("opentype")}@font-face{font-display:swap;font-family:Nudge;font-style:normal;font-weight:900;src:url(/content-platform/static/VCNudge-Black-9e870be920be60c228f9a4affa885f8d.otf) format("opentype")}@font-face{font-display:swap;font-family:Para;font-style:normal;font-weight:300;src:url(/content-platform/static/Para-Central-Light-b0a58901815efc51b2b07b595eca45f7.otf) format("opentype")}@font-face{font-display:swap;font-family:Para;font-style:italic;font-weight:300;src:url(/content-platform/static/Para-Central-Light-Italic-48e4a958a048c612c6a0927f538018b8.otf) format("opentype")}@font-face{font-display:swap;font-family:Para;font-style:normal;font-weight:400;src:url(/content-platform/static/Para-Central-Regular-03a3a49a91a9bbf991dd6263feab3975.otf) format("opentype")}@font-face{font-display:swap;font-family:Para;font-style:normal;font-weight:700;src:url(/content-platform/static/Para-Central-Bold-3107caa8a871d45bb00cb084bcc8ffc1.otf) format("opentype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:300;src:url(/content-platform/static/DMMono-Light-2cf6d0b2de012ff294ce86eecb4263e5.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:italic;font-weight:300;src:url(/content-platform/static/DMMono-LightItalic-0e20bf0432fcf702ef0306184759a593.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:400;src:url(/content-platform/static/DMMono-Regular-15edd89a6460acfb1a86017399e47a1f.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:italic;font-weight:400;src:url(/content-platform/static/DMMono-Italic-6b7b77e96ef2aa8ec8fffe2e28239719.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:500;src:url(/content-platform/static/DMMono-Medium-50d7af0bb966bc0570a212128d7ab24d.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:italic;font-weight:500;src:url(/content-platform/static/DMMono-MediumItalic-85bff8703124566bb1a660afda35365b.ttf) format("truetype")}body,html{box-sizing:border-box;margin:0;padding:0}
gc-http-factory: an easier way to work with APIs in Angular | GoCardless Skip to content menu Open site navigation sidebar For use case
Our customers
For small business
For enterprise
Collect Payments
Protect revenue
Open Banking
Connect to GoCardless
Help and support
News and resources
Login Sign up gc-http-factory: an easier way to work with APIs in Angular Today we're announcing and open sourcing gc-http-factory , a tool for working with APIs in Angular.
Using APIs in Angular without HttpFactory
In a regular Angular app you'd use a service to make requests to an API:
angular. app ( 'app' , [ ] ) . factory ( 'UsersService' , function ( $http ) {
function findOne ( id ) {
return $http. get ( '/api/users/' + id) ;
} ;
function findAll ( ) {
return $http. get ( '/api/users' ) ;
} ;
function create ( ) {
return $http. post ( '/api/users' ) ;
} ;
return {
findOne : findOne,
findAll : findAll,
create : create
} ;
} ) ;
If you've got lots of API resources which follow similar conventions the above becomes repetitive pretty quickly.
Using HttpFactory
HttpFactory provides an abstraction for creating services that make requests to API resources. You use HttpFactory to create your service and methods by telling it some information about your API.
For example, to create the UsersService
we defined previously, you'd use:
angular. app ( 'app' , [ 'gc.httpFactory' ] ) . factory ( 'UsersService' , function ( HttpFactory ) {
return HttpFactory. create ( {
url : '/api/users/:id'
} , {
findOne : { method : 'GET' } ,
findAll : { method : 'GET' } ,
create : { method : 'POST' }
} ) ;
} ) ;
You can then use the service you've created as normal:
UsersService. findAll ( ) ;
UsersService. findOne ( {
params : { id : 2 }
} ) ;
UsersService. create ( {
data : { name : 'Jack' }
} ) ;
Installation
You can install gc-http-factory
from Bower:
bower install gc-http-factory
Or just grab the source from GitHub .
Contributing
We've been using HttpFactory in our Angular apps for a while and we're really happy with how cleanly it lets us create components to interface with our APIs. It's avoided duplication across our Angular apps and we hope it might do the same for you.
If you have any suggestions, ideas or bugs, please either report them on GitHub or feel free to find me on Twitter .
Over 85,000 businesses use GoCardless to get paid on time. Learn more about how you can improve payment processing at your business today. Interested in automating the way you get paid? GoCardless can help Contact us
Seen 'GoCardless Ltd' on your bank statement? Learn more
GoCardless Ltd, Sutton Yard, 65 Goswell Road, London, EC1V 7EN, United Kingdom
GoCardless Ltd (company registration number 07495895) is authorised by the Financial Conduct Authority under the Payment Services Regulations 2017, registration number 597190, for the provision of payment services.