├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── angular.json
├── config
├── externals.js
├── rollup-esm2015.conf.js
├── rollup-esm5.conf.js
├── rollup-umd.conf.js
├── rollup.conf.js
├── tsconfig-esm2015.json
└── tsconfig-esm5.json
├── demo
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.ts
│ └── app.module.ts
├── assets
│ └── .gitkeep
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── tsconfig.app.json
└── typings.d.ts
├── package-lock.json
├── package.json
├── projects
└── ngx-restangular
│ ├── karma.conf.js
│ ├── ng-package.json
│ ├── ng-package.prod.json
│ ├── package.json
│ ├── src
│ ├── lib
│ │ ├── index.ts
│ │ ├── ngx-restangular-config.factory.ts
│ │ ├── ngx-restangular-helper.ts
│ │ ├── ngx-restangular-http.ts
│ │ ├── ngx-restangular.config.ts
│ │ ├── ngx-restangular.module.ts
│ │ └── ngx-restangular.ts
│ ├── public_api.ts
│ └── test.ts
│ ├── tsconfig.lib.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── tsconfig.json
└── tslint.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | charset = utf-8
7 | indent_style = space
8 | indent_size = 2
9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | node_modules
4 | coverage
5 | npm-debug.log
6 | dist
7 | tmp
8 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 |
6 | ## [0.1.7](https://github.com/2muchcoffeecom/ng2-restangular/compare/v0.1.6...v0.1.7) (2016-11-08)
7 |
8 |
9 |
10 |
11 | ## [0.1.6](https://github.com/2muchcoffeecom/ng2-restangular/compare/v0.1.5...v0.1.6) (2016-11-08)
12 |
13 |
14 |
15 |
16 | ## 0.1.5 (2016-11-08)
17 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Developing
2 |
3 | ### Setup
4 |
5 | ```
6 | npm install
7 | ```
8 |
9 | ### Testing
10 |
11 | ```
12 | npm test
13 | ```
14 |
15 | ### Start Demo
16 |
17 | ```
18 | npm start
19 | ```
20 |
21 | ## Submitting Pull Requests
22 |
23 | **Please follow these basic steps to simplify pull request reviews.**
24 |
25 | * Please rebase your branch against the current master
26 | * Run ```npm install``` to make sure your development dependencies are up-to-date
27 | * Make reference to possible [issues](https://github.com/2muchcoffeecom/ngx-restangular/issues) on PR comment
28 |
29 | ## Submitting bug reports
30 |
31 | * Please detail the affected browser(s) and operating system(s)
32 | * Please be sure to state which version of node **and** npm you're using
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Matt Lewis
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ngx-restangular. Maintained by [2muchcoffee](https://2muchcoffee.com/).
2 |
3 | This project is the follow-up of the [Restangular](https://github.com/mgonto/restangular/). Ngx-restangular is an Angular 2+ service that simplifies common GET, POST, DELETE, and UPDATE requests with a minimum of client code.
4 | It's a perfect fit for any WebApp that consumes data from a RESTful API.
5 |
6 | # Demo
7 |
8 | You can check post about using ngx-restangular in [RESTful API Angular Solution](https://2muchcoffee.com/blog/ngx-restangular-restful-api-angular-solution/)
9 |
10 | # Current stage
11 |
12 | Ngx-restangular almost all functionality was transferred from the Restangular.
13 | We are open to any cooperation in terms of its further development.
14 |
15 | # Renaming project from ng2-restangular to ngx-restangular
16 |
17 | This project was renamed from **ng2-restangular** to **ngx-restangular** due to implementation of Semantic Versioning by Angular Core Team. NPM name has also changed, you can install actual version of the project with ``npm install ngx-restangular``.
18 |
19 | # Table of contents
20 |
21 | - [How do I add this to my project in angular 5+?](#how-do-i-add-this-to-my-project-in-angular-5)
22 | - [How do I add this to my project in angular 4?](#how-do-i-add-this-to-my-project-in-angular-4)
23 | - [How do I add this to my project in angular 2?](#how-do-i-add-this-to-my-project-in-angular-2)
24 |
25 | - [Dependencies](#dependencies)
26 | - [Starter Guide](#starter-guide)
27 | - [Quick configuration for Lazy Readers](#quick-configuration-for-lazy-readers)
28 | - [Using Restangular](#using-restangular)
29 | - [Creating Main Restangular object](#creating-main-restangular-object)
30 | - [Lets Code with Observables!](#lets-code-with-observables)
31 | - [Here is Example of code with using promises!](#here-is-example-of-code-with-using-promises)
32 | - [Configuring Restangular](#configuring-restangular)
33 | - [Properties](#properties)
34 | - [withConfig](#withconfig)
35 | - [setBaseUrl](#setbaseurl)
36 | - [setExtraFields](#setextrafields)
37 | - [setParentless](#setparentless)
38 | - [addElementTransformer](#addelementtransformer)
39 | - [setTransformOnlyServerElements](#settransformonlyserverelements)
40 | - [setOnElemRestangularized](#setonelemrestangularized)
41 | - [addResponseInterceptor](#addresponseinterceptor)
42 | - [addFullRequestInterceptor](#addfullrequestinterceptor)
43 | - [addErrorInterceptor](#adderrorinterceptor)
44 | - [setRestangularFields](#setrestangularfields)
45 | - [setMethodOverriders](#setmethodoverriders)
46 | - [setDefaultRequestParams](#setdefaultrequestparams)
47 | - [setFullResponse](#setfullresponse)
48 | - [setDefaultHeaders](#setdefaultheaders)
49 | - [setRequestSuffix](#setrequestsuffix)
50 | - [setUseCannonicalId](#setusecannonicalid)
51 | - [setPlainByDefault](#setplainbydefault)
52 | - [setEncodeIds](#setencodeids)
53 | - [Accessing configuration](#accessing-configuration)
54 | - [How to configure them globally](#how-to-configure-them-globally)
55 | - [Configuring in the AppModule](#configuring-in-the-appmodule)
56 | - [Configuring in the AppModule with Dependency Injection applied](#configuring-in-the-appmodule-with-dependency-injection-applied)
57 | - [How to create a Restangular service with a different configuration from the global one](#how-to-create-a-restangular-service-with-a-different-configuration-from-the-global-one)
58 | - [Decoupled Restangular Service](#decoupled-restangular-service)
59 | - [Methods description](#methods-description)
60 | - [Restangular methods](#restangular-methods)
61 | - [Element methods](#element-methods)
62 | - [Collection methods](#collection-methods)
63 | - [Custom methods](#custom-methods)
64 | - [Copying elements](#copying-elements)
65 | - [Using values directly in templates with Observables](#using-values-directly-in-templates-with-observables)
66 | - [URL Building](#url-building)
67 | - [Creating new Restangular Methods](#creating-new-restangular-methods)
68 | - [Adding Custom Methods to Collections](#adding-custom-methods-to-collections)
69 | - [Example:](#example)
70 | - [Adding Custom Methods to Models](#adding-custom-methods-to-models)
71 | - [Example:](#example-1)
72 | - [FAQ](#faq)
73 | - [How can I handle errors?](#how-can-i-handle-errors)
74 | - [I need to send Authorization token in EVERY Restangular request, how can I do this?](#i-need-to-send-authorization-token-in-every-restangular-request-how-can-i-do-this)
75 | - [I need to send one header in EVERY Restangular request, how can I do this?](#i-need-to-send-one-header-in-every-restangular-request-how-can-i-do-this)
76 | - [How can I send a delete WITHOUT a body?](#how-can-i-send-a-delete-without-a-body)
77 | - [I use Mongo and the ID of the elements is _id not id as the default. Therefore requests are sent to undefined routes](#i-use-mongo-and-the-id-of-the-elements-is-_id-not-id-as-the-default-therefore-requests-are-sent-to-undefined-routes)
78 | - [What if each of my models has a different ID name like CustomerID for Customer](#what-if-each-of-my-models-has-a-different-id-name-like-customerid-for-customer)
79 | - [How can I send files in my request using Restangular?](#how-can-i-send-files-in-my-request-using-restangular)
80 | - [How do I handle CRUD operations in a List returned by Restangular?](#how-do-i-handle-crud-operations-in-a-list-returned-by-restangular)
81 | - [Removing an element from a collection, keeping the collection restangularized](#removing-an-element-from-a-collection-keeping-the-collection-restangularized)
82 | - [How can I access the unrestangularized element as well as the restangularized one?](#how-can-i-access-the-unrestangularized-element-as-well-as-the-restangularized-one)
83 | - [How can add withCredentials params to requests?](#how-can-add-withcredentials-params-to-requests)
84 | - [Server Frameworks](#server-frameworks)
85 | - [Contributing](#contributing)
86 | - [License](#license)
87 |
88 | **[Back to top](#table-of-contents)**
89 |
90 |
91 | # How do I add this to my project in angular 5+?
92 |
93 | You can download this by npm and running `npm install ngx-restangular`. This will install latest version of ngx-restangular (v.2.0.0).
94 |
95 | **[Back to top](#table-of-contents)**
96 |
97 |
98 | # How do I add this to my project in angular 4?
99 |
100 | You can download this by npm and running `npm install --save ngx-restangular@1.0.13`
101 |
102 | Versions from 1.0.14 to 1.1.4 are deprecated. Npm warns you after their installation. Those versions would be removed.
103 |
104 | **[Back to top](#table-of-contents)**
105 |
106 |
107 | # How do I add this to my project in angular 2?
108 |
109 | You can download this by npm and running `npm install ng2-restangular`
110 |
111 | **[Back to top](#table-of-contents)**
112 |
113 | # Dependencies
114 |
115 | Restangular depends on Angular 2+ and Lodash.
116 |
117 | **[Back to top](#table-of-contents)**
118 |
119 | # Starter Guide
120 |
121 | ## Quick Configuration (For Lazy Readers)
122 | This is all you need to start using all the basic Restangular features.
123 |
124 | ````javascript
125 | import { NgModule } from '@angular/core';
126 | import { AppComponent } from './app.component';
127 | import { RestangularModule, Restangular } from 'ngx-restangular';
128 |
129 | // Function for setting the default restangular configuration
130 | export function RestangularConfigFactory (RestangularProvider) {
131 | RestangularProvider.setBaseUrl('http://api.restngx.local/v1');
132 | RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
133 | }
134 |
135 | // AppModule is the main entry point into Angular2 bootstraping process
136 | @NgModule({
137 | bootstrap: [ AppComponent ],
138 | declarations: [
139 | AppComponent,
140 | ],
141 | imports: [
142 | // Importing RestangularModule and making default configs for restanglar
143 | RestangularModule.forRoot(RestangularConfigFactory),
144 | ]
145 | })
146 | export class AppModule {
147 | }
148 |
149 | // later in code ...
150 |
151 | @Component({
152 | ...
153 | })
154 | export class OtherComponent {
155 | constructor(private restangular: Restangular) {
156 | }
157 |
158 | ngOnInit() {
159 | // GET http://api.test.local/v1/users/2/accounts
160 | this.restangular.one('users', 2).all('accounts').getList();
161 | }
162 | ````
163 | **[Back to top](#table-of-contents)**
164 |
165 | ## Using Restangular
166 |
167 | ### Creating Main Restangular object
168 |
169 | There are 3 ways of creating a main Restangular object.
170 | The first one and most common one is by stating the main route of all requests.
171 | The second one is by stating the main route and object of all requests.
172 |
173 | ````javascript
174 | // Only stating main route
175 | Restangular.all('accounts')
176 |
177 | // Stating main object
178 | Restangular.one('accounts', 1234)
179 |
180 | // Gets a list of all of those accounts
181 | Restangular.several('accounts', 1234, 123, 12345);
182 | ````
183 |
184 | **[Back to top](#table-of-contents)**
185 |
186 | ### Lets Code with Observables!
187 |
188 | Now that we have our main Object let's start playing with it.
189 |
190 | ````javascript
191 | // AppModule is the main entry point into Angular2 bootstraping process
192 | @NgModule({
193 | bootstrap: [ AppComponent ],
194 | declarations: [
195 | AppComponent,
196 | ],
197 | imports: [
198 | // Importing RestangularModule
199 | RestangularModule,
200 | ]
201 | })
202 | export class AppModule {
203 | }
204 |
205 | @Component({
206 | ...
207 | })
208 | export class OtherComponent {
209 | allAccounts;
210 | accounts;
211 | account;
212 |
213 | constructor(private restangular: Restangular) {
214 | }
215 |
216 | ngOnInit() {
217 | // First way of creating a this.restangular object. Just saying the base URL
218 | let baseAccounts = this.restangular.all('accounts');
219 |
220 | // This will query /accounts and return a observable.
221 | baseAccounts.getList().subscribe(accounts => {
222 | this.allAccounts = accounts;
223 | });
224 |
225 |
226 | let newAccount = {name: "Gonto's account"};
227 |
228 | // POST /accounts
229 | baseAccounts.post(newAccount);
230 |
231 | // GET to http://www.google.com/ You set the URL in this case
232 | this.restangular.allUrl('googlers', 'http://www.google.com/').getList();
233 |
234 | // GET to http://www.google.com/1 You set the URL in this case
235 | this.restangular.oneUrl('googlers', 'http://www.google.com/1').get();
236 |
237 | // You can do RequestLess "connections" if you need as well
238 |
239 | // Just ONE GET to /accounts/123/buildings/456
240 | this.restangular.one('accounts', 123).one('buildings', 456).get();
241 |
242 | // Just ONE GET to /accounts/123/buildings
243 | this.restangular.one('accounts', 123).getList('buildings');
244 |
245 | // Here we use Observables
246 | // GET /accounts
247 | let baseAccounts$ = baseAccounts.getList().subscribe(accounts => {
248 | // Here we can continue fetching the tree :).
249 |
250 | let firstAccount = accounts[0];
251 | // This will query /accounts/123/buildings considering 123 is the id of the firstAccount
252 | let buildings = firstAccount.getList("buildings");
253 |
254 | // GET /accounts/123/places?query=param with request header: x-user:mgonto
255 | let loggedInPlaces = firstAccount.getList("places", {query: 'param'}, {'x-user': 'mgonto'});
256 |
257 | // This is a regular JS object, we can change anything we want :)
258 | firstAccount.name = "Gonto";
259 |
260 | // If we wanted to keep the original as it is, we can copy it to a new element
261 | let editFirstAccount = this.restangular.copy(firstAccount);
262 | editFirstAccount.name = "New Name";
263 |
264 |
265 | // PUT /accounts/123. The name of this account will be changed from now on
266 | firstAccount.put();
267 | editFirstAccount.put();
268 |
269 | // PUT /accounts/123. Save will do POST or PUT accordingly
270 | firstAccount.save();
271 |
272 | // DELETE /accounts/123 We don't have first account anymore :(
273 | firstAccount.remove();
274 |
275 | }, () => {
276 | alert("Oops error from server :(");
277 | });
278 |
279 |
280 | // Get first account
281 | let firstAccount$ = baseAccounts$.map(accounts => accounts[0]);
282 |
283 |
284 | // POST /accounts/123/buildings with MyBuilding information
285 | firstAccount$.switchMap(firstAccount => {
286 | var myBuilding = {
287 | name: "Gonto's Building",
288 | place: "Argentina"
289 | };
290 |
291 | return firstAccount.post("Buildings", myBuilding)
292 | })
293 | .subscribe(() => {
294 | console.log("Object saved OK");
295 | }, () => {
296 | console.log("There was an error saving");
297 | });
298 |
299 |
300 | // GET /accounts/123/users?query=params
301 | firstAccount$.switchMap(firstAccount => {
302 | var myBuilding = {
303 | name: "Gonto's Building",
304 | place: "Argentina"
305 | };
306 |
307 | return firstAccount.getList("users", {query: 'params'});
308 | })
309 | .subscribe((users) => {
310 | // Instead of posting nested element, a collection can post to itself
311 | // POST /accounts/123/users
312 | users.post({userName: 'unknown'});
313 |
314 | // Custom methods are available now :).
315 | // GET /accounts/123/users/messages?param=myParam
316 | users.customGET("messages", {param: "myParam"});
317 |
318 | var firstUser = users[0];
319 |
320 | // GET /accounts/123/users/456. Just in case we want to update one user :)
321 | let userFromServer = firstUser.get();
322 |
323 | // ALL http methods are available :)
324 | // HEAD /accounts/123/users/456
325 | firstUser.head()
326 | }, () => {
327 | console.log("There was an error saving");
328 | });
329 |
330 |
331 | // Second way of creating this.restangular object. URL and ID :)
332 | var account = this.restangular.one("accounts", 123);
333 |
334 | // GET /accounts/123?single=true
335 | this.account = account.get({single: true});
336 |
337 | // POST /accounts/123/messages?param=myParam with the body of name: "My Message"
338 | account.customPOST({name: "My Message"}, "messages", {param: "myParam"}, {})
339 | }
340 | }
341 | ````
342 |
343 | **[Back to top](#table-of-contents)**
344 |
345 | ### Here is Example of code with using promises!
346 |
347 |
348 | ````javascript
349 | @Component({
350 | ...
351 | })
352 | export class OtherComponent {
353 | allAccounts;
354 | accounts;
355 | account;
356 |
357 | constructor(private restangular: Restangular) {
358 | }
359 |
360 | ngOnInit() {
361 |
362 | // First way of creating a this.restangular object. Just saying the base URL
363 | let baseAccounts = this.restangular.all('accounts');
364 |
365 | // This will query /accounts and return a promise.
366 | baseAccounts.getList().toPromise().then(function(accounts) {
367 | this.allAccounts = accounts;
368 | });
369 |
370 | var newAccount = {name: "Gonto's account"};
371 |
372 | // POST /accounts
373 | baseAccounts.post(newAccount);
374 |
375 | // GET to http://www.google.com/ You set the URL in this case
376 | this.restangular.allUrl('googlers', 'http://www.google.com/').getList();
377 |
378 | // GET to http://www.google.com/1 You set the URL in this case
379 | this.restangular.oneUrl('googlers', 'http://www.google.com/1').get();
380 |
381 | // You can do RequestLess "connections" if you need as well
382 |
383 | // Just ONE GET to /accounts/123/buildings/456
384 | this.restangular.one('accounts', 123).one('buildings', 456).get();
385 |
386 | // Just ONE GET to /accounts/123/buildings
387 | this.restangular.one('accounts', 123).getList('buildings');
388 |
389 | // Here we use Promises then
390 | // GET /accounts
391 | baseAccounts.getList().toPromise().then(function (accounts) {
392 | // Here we can continue fetching the tree :).
393 |
394 | var firstAccount = accounts[0];
395 | // This will query /accounts/123/buildings considering 123 is the id of the firstAccount
396 | this.buildings = firstAccount.getList("buildings");
397 |
398 | // GET /accounts/123/places?query=param with request header: x-user:mgonto
399 | this.loggedInPlaces = firstAccount.getList("places", {query: 'param'}, {'x-user': 'mgonto'});
400 |
401 | // This is a regular JS object, we can change anything we want :)
402 | firstAccount.name = "Gonto";
403 |
404 | // If we wanted to keep the original as it is, we can copy it to a new element
405 | var editFirstAccount = this.restangular.copy(firstAccount);
406 | editFirstAccount.name = "New Name";
407 |
408 |
409 | // PUT /accounts/123. The name of this account will be changed from now on
410 | firstAccount.put();
411 | editFirstAccount.put();
412 |
413 | // PUT /accounts/123. Save will do POST or PUT accordingly
414 | firstAccount.save();
415 |
416 | // DELETE /accounts/123 We don't have first account anymore :(
417 | firstAccount.remove();
418 |
419 | var myBuilding = {
420 | name: "Gonto's Building",
421 | place: "Argentina"
422 | };
423 |
424 | // POST /accounts/123/buildings with MyBuilding information
425 | firstAccount.post("Buildings", myBuilding).toPromise().then(function() {
426 | console.log("Object saved OK");
427 | }, function() {
428 | console.log("There was an error saving");
429 | });
430 |
431 | // GET /accounts/123/users?query=params
432 | firstAccount.getList("users", {query: 'params'}).toPromise().then(function(users) {
433 | // Instead of posting nested element, a collection can post to itself
434 | // POST /accounts/123/users
435 | users.post({userName: 'unknown'});
436 |
437 | // Custom methods are available now :).
438 | // GET /accounts/123/users/messages?param=myParam
439 | users.customGET("messages", {param: "myParam"});
440 |
441 | var firstUser = users[0];
442 |
443 | // GET /accounts/123/users/456. Just in case we want to update one user :)
444 | this.userFromServer = firstUser.get();
445 |
446 | // ALL http methods are available :)
447 | // HEAD /accounts/123/users/456
448 | firstUser.head()
449 |
450 | });
451 |
452 | }, function errorCallback() {
453 | alert("Oops error from server :(");
454 | });
455 |
456 | // Second way of creating this.restangular object. URL and ID :)
457 | var account = this.restangular.one("accounts", 123);
458 |
459 | // GET /accounts/123?single=true
460 | this.account = account.get({single: true});
461 |
462 | // POST /accounts/123/messages?param=myParam with the body of name: "My Message"
463 | account.customPOST({name: "My Message"}, "messages", {param: "myParam"}, {})
464 | }
465 | }
466 | ````
467 |
468 | **[Back to top](#table-of-contents)**
469 |
470 |
471 | ## Configuring Restangular
472 |
473 | ### Properties
474 | Restangular comes with defaults for all of its properties but you can configure them. **So, if you don't need to configure something, there's no need to add the configuration.**
475 | You can set all these configurations in **[RestangularModule](#how-to-configure-them-globally) to change the global configuration**, you can also **use the [withConfig](#how-to-create-a-restangular-service-with-a-different-configuration-from-the-global-one) method in Restangular service to create a new Restangular service with some scoped configuration** or **use [withConfig](#withconfig) in component to make specified Restangular**
476 |
477 | #### withConfig
478 | You can configure Restangular "withConfig" like in example below, you can also configure them globally [RestangularModule](#how-to-configure-them-globally) or in service with [withConfig](#how-to-create-a-restangular-service-with-a-different-configuration-from-the-global-one)
479 |
480 | ````javascript
481 | // Function for settting the default restangular configuration
482 | export function RestangularConfigFactory (RestangularProvider) {
483 | RestangularProvider.setBaseUrl('http://www.google.com');
484 | }
485 |
486 | @NgModule({
487 | bootstrap: [ AppComponent ],
488 | declarations: [
489 | AppComponent,
490 | ],
491 | imports: [
492 | // Global configuration
493 | RestangularModule.forRoot(RestangularConfigFactory),
494 | ]
495 | })
496 | export class AppModule {}
497 | // Let's use it in the component
498 | @Component({
499 | ...
500 | })
501 | export class OtherComponent {
502 | constructor(private restangular: Restangular) {}
503 |
504 | ngOnInit() {
505 | restangular.withConfig((RestangularConfigurer) => {
506 | RestangularConfigurer.setBaseUrl('http://www.bing.com');
507 | }).all('users').getList()
508 | }
509 | };
510 | ````
511 |
512 | #### setBaseUrl
513 | The base URL for all calls to your API. For example if your URL for fetching accounts is http://example.com/api/v1/accounts, then your baseUrl is `/api/v1`. The default baseUrl is an empty string which resolves to the same url that Angular2 is running, but you can also set an absolute url like `http://api.example.com/api/v1` if you need to set another domain.
514 |
515 | #### setExtraFields
516 | These are the fields that you want to save from your parent resources if you need to display them. By default this is an Empty Array which will suit most cases
517 |
518 | #### setParentless
519 | Use this property to control whether Restangularized elements to have a parent or not. So, for example if you get an account and then get a nested list of buildings, you may want the buildings URL to be simple `/buildings/123` instead of `/accounts/123/buildings/123`. This property lets you do that.
520 |
521 | This method accepts 1 parameter, it could be:
522 |
523 | * Boolean: Specifies if all elements should be parentless or not
524 | * Array: Specifies the routes (types) of all elements that should be parentless. For example `['buildings']`
525 |
526 | #### addElementTransformer
527 | This is a hook. After each element has been "restangularized" (Added the new methods from Restangular), the corresponding transformer will be called if it fits.
528 |
529 | This should be used to add your own methods / functions to entities of certain types.
530 |
531 | You can add as many element transformers as you want. The signature of this method can be one of the following:
532 |
533 | * **addElementTransformer(route, transformer)**: Transformer is called with all elements that have been restangularized, no matter if they're collections or not.
534 |
535 | * **addElementTransformer(route, isCollection, transformer)**: Transformer is called with all elements that have been restangularized and match the specification regarding if it's a collection or not (true | false)
536 |
537 | #### setTransformOnlyServerElements
538 | This sets whether transformers will be run for local objects and not by objects returned by the server. This is by default true but can be changed to false if needed (Most people won't need this).
539 |
540 |
541 | #### setOnElemRestangularized
542 | This is a hook. After each element has been "restangularized" (Added the new methods from Restangular), this will be called. It means that if you receive a list of objects in one call, this method will be called first for the collection and then for each element of the collection.
543 |
544 | **I favor the usage of `addElementTransformer` instead of `onElemRestangularized` whenever possible as the implementation is much cleaner.**
545 |
546 |
547 | This callback is a function that has 4 parameters:
548 |
549 | * **elem**: The element that has just been restangularized. Can be a collection or a single element.
550 | * **isCollection**: Boolean indicating if this is a collection or a single element.
551 | * **what**: The model that is being modified. This is the "path" of this resource. For example `buildings`
552 | * **Restangular**: The instanced service to use any of its methods
553 |
554 | This can be used together with `addRestangularMethod` (Explained later) to add custom methods to an element
555 |
556 | ````javascript
557 | service.setOnElemRestangularized((element, isCollection, what, Restangular) => {
558 | element.newField = "newField";
559 | return element;
560 | });
561 | ````
562 |
563 | #### addResponseInterceptor
564 | The responseInterceptor is called after we get each response from the server. It's a function that receives this arguments:
565 |
566 | * **data**: The data received got from the server
567 | * **operation**: The operation made. It'll be the HTTP method used except for a `GET` which returns a list of element which will return `getList` so that you can distinguish them.
568 | * **what**: The model that's being requested. It can be for example: `accounts`, `buildings`, etc.
569 | * **url**: The relative URL being requested. For example: `/api/v1/accounts/123`
570 | * **response**: Full server response including headers
571 |
572 | Some of the use cases of the responseInterceptor are handling wrapped responses and enhancing response elements with more methods among others.
573 |
574 | The responseInterceptor must return the restangularized data element.
575 |
576 | ````javascript
577 | RestangularProvider.addResponseInterceptor((data, operation, what, url, response)=> {
578 | return data;
579 | });
580 | });
581 | ````
582 |
583 | #### addFullRequestInterceptor
584 | This adds a new fullRequestInterceptor. The fullRequestInterceptor is similar to the `requestInterceptor` but more powerful. It lets you change the element, the request parameters and the headers as well.
585 |
586 | It's a function that receives the same as the `requestInterceptor` plus the headers and the query parameters (in that order).
587 |
588 | It can return an object with any (or all) of following properties:
589 | * **headers**: The headers to send
590 | * **params**: The request parameters to send
591 | * **element**: The element to send
592 |
593 | ````javascript
594 | RestangularProvider.addFullRequestInterceptor((element, operation, path, url, headers, params)=> {
595 | return {
596 | params: Object.assign({}, params, {sort:"name"}),
597 | headers: headers,
598 | element: element
599 | }
600 | });
601 | ````
602 | If a property isn't returned, the one sent is used.
603 |
604 | #### addErrorInterceptor
605 | The errorInterceptor is called whenever there's an error. It's a function that receives the response, subject and the Restangular-response handler as parameters.
606 |
607 | The errorInterceptor function, whenever it returns false, prevents the observable linked to a Restangular request to be executed. All other return values (besides false) are ignored and the observable follows the usual path, eventually reaching the success or error hooks.
608 |
609 | The refreshAccesstoken function must return observable. It`s function that will be done before repeating the request, there you can make some actions. In switchMap you might do some transformations to request.
610 | ````javascript
611 | // Function for settting the default restangular configuration
612 | export function RestangularConfigFactory (RestangularProvider, authService) {
613 | RestangularProvider.setBaseUrl('http://api.test.com/v1');
614 |
615 | // This function must return observable
616 | var refreshAccesstoken = function () {
617 | // Here you can make action before repeated request
618 | return authService.functionForTokenUpdate();
619 | };
620 |
621 | RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
622 | if (response.status === 403) {
623 |
624 | refreshAccesstoken()
625 | .switchMap(refreshAccesstokenResponse => {
626 | //If you want to change request or make with it some actions and give the request to the repeatRequest func.
627 | //Or you can live it empty and request will be the same.
628 |
629 | // update Authorization header
630 | const newHeaders = response.request.headers.set('Authorization', 'Bearer ' + refreshAccesstokenResponse);
631 | const newRequest = response.request.clone({headers: newHeaders});
632 |
633 | return response.repeatRequest(newRequest);
634 | })
635 | .subscribe(
636 | res => responseHandler(res),
637 | err => subject.error(err)
638 | );
639 |
640 | return false; // error handled
641 | }
642 | return true; // error not handled
643 | });
644 | }
645 |
646 | // AppModule is the main entry point into Angular2 bootstraping process
647 | @NgModule({
648 | bootstrap: [ AppComponent ],
649 | imports: [
650 | // Importing RestangularModule and making default configs for restanglar
651 | RestangularModule.forRoot([authService], RestangularConfigFactory),
652 | ],
653 | })
654 | ````
655 |
656 | #### setRestangularFields
657 |
658 | Restangular required 3 fields for every "Restangularized" element. These are:
659 |
660 | * id: Id of the element. Default: id
661 | * route: Name of the route of this element. Default: route
662 | * parentResource: The reference to the parent resource. Default: parentResource
663 | * restangularCollection: A boolean indicating if this is a collection or an element. Default: restangularCollection
664 | * cannonicalId: If available, the path to the cannonical ID to use. Useful for PK changes
665 | * etag: Where to save the ETag received from the server. Defaults to `restangularEtag`
666 | * selfLink: The path to the property that has the URL to this item. If your REST API doesn't return a URL to an item, you can just leave it blank. Defaults to `href`
667 |
668 | Also all of Restangular methods and functions are configurable through restangularFields property.
669 | All of these fields except for `id` and `selfLink` are handled by Restangular, so most of the time you won't change them. You can configure the name of the property that will be binded to all of this fields by setting restangularFields property.
670 |
671 | #### setMethodOverriders
672 |
673 | You can now Override HTTP Methods. You can set here the array of methods to override. All those methods will be sent as POST and Restangular will add an X-HTTP-Method-Override header with the real HTTP method we wanted to do.
674 |
675 | ````javascript
676 | RestangularProvider.setMethodOverriders(["Get","Put"]);
677 | ````
678 |
679 | #### setDefaultRequestParams
680 |
681 | You can set default Query parameters to be sent with every request and every method.
682 |
683 | Additionally, if you want to configure request params per method, you can use `requestParams` configuration similar to `$http`. For example `RestangularProvider.requestParams.get = {single: true}`.
684 |
685 | Supported method to configure are: remove, get, post, put, common (all)
686 |
687 | ````javascript
688 | // set params for multiple methods at once
689 | RestangularProvider.setDefaultRequestParams(['remove', 'post'], {confirm: true});
690 |
691 | // set only for get method
692 | RestangularProvider.setDefaultRequestParams('get', {limit: 10});
693 |
694 | // or for all supported request methods
695 | RestangularProvider.setDefaultRequestParams({apikey: "secret key"});
696 | ````
697 |
698 | #### setFullResponse
699 |
700 | You can set fullResponse to true to get the whole response every time you do any request. The full response has the restangularized data in the `data` field, and also has the headers and config sent. By default, it's set to false. Please note that in order for Restangular to access custom HTTP headers, your server must respond having the `Access-Control-Expose-Headers:` set.
701 |
702 | ````javascript
703 | // set params for multiple methods at once
704 | RestangularProvider.setFullResponse(true);
705 | ````
706 |
707 | Or set it per service
708 | ````javascript
709 | // Restangular factory that uses setFullResponse
710 | export const REST_FUL_RESPONSE = new InjectionToken('RestFulResponse');
711 | export function RestFulResponseFactory(restangular: Restangular) {
712 | return restangular.withConfig((RestangularConfigurer) => {
713 | RestangularConfigurer.setFullResponse(true);
714 | });
715 | }
716 |
717 |
718 | // Configure factory in AppModule module
719 | // AppModule is the main entry point into Angular2 bootstraping process
720 | @NgModule({
721 | bootstrap: [ AppComponent ],
722 | declarations: [
723 | AppComponent,
724 | ],
725 | imports: [RestangularModule],
726 | providers: [
727 | { provide: REST_FUL_RESPONSE, useFactory: RestFulResponseFactory, deps: [Restangular] }
728 | ]
729 | })
730 | export class AppModule {}
731 |
732 |
733 | // Let's use it in the component
734 | @Component({
735 | ...
736 | })
737 | export class OtherComponent {
738 | users;
739 |
740 | constructor(@Inject(REST_FUL_RESPONSE) public restFulResponse) {
741 | }
742 |
743 | ngOnInit() {
744 | this.restFulResponse.all('users').getList().subscribe( response => {
745 | this.users = response.data;
746 | console.log(response.headers);
747 | });
748 | }
749 | }
750 | ````
751 |
752 | #### setDefaultHeaders
753 |
754 | You can set default Headers to be sent with every request. Send format: {header_name: header_value}
755 | ````javascript
756 | import { NgModule } from '@angular/core';
757 | import { RestangularModule, Restangular } from 'ngx-restangular';
758 |
759 | // Function for settting the default restangular configuration
760 | export function RestangularConfigFactory (RestangularProvider) {
761 | RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
762 | }
763 |
764 | // AppModule is the main entry point into Angular2 bootstraping process
765 | @NgModule({
766 | ...
767 | imports: [
768 | // Importing RestangularModule and making default configs for restanglar
769 | RestangularModule.forRoot(RestangularConfigFactory),
770 | ]
771 | })
772 | export class AppModule {
773 | }
774 | ````
775 |
776 | #### setRequestSuffix
777 |
778 | If all of your requests require to send some suffix to work, you can set it here. For example, if you need to send the format like `/users/123.json` you can add that `.json` to the suffix using the `setRequestSuffix` method
779 |
780 | #### setUseCannonicalId
781 |
782 | You can set this to either `true` or `false`. By default it's false. If set to true, then the cannonical ID from the element will be used for URL creation (in DELETE, PUT, POST, etc.). What this means is that if you change the ID of the element and then you do a put, if you set this to true, it'll use the "old" ID which was received from the server. If set to false, it'll use the new ID assigned to the element.
783 |
784 | #### setPlainByDefault
785 |
786 | You can set this to `true` or `false`. By default it's false. If set to true, data retrieved will be returned with no embed methods from restangular.
787 |
788 | #### setEncodeIds
789 |
790 | You can set here if you want to URL Encode IDs or not. By default, it's true.
791 |
792 | ### Accessing configuration
793 |
794 | You can also access the configuration via `RestangularModule` and `Restangular.provider` via the `configuration` property if you don't want to use the setters. Check it out:
795 |
796 | ````js
797 | RestangularProvider.configuration.requestSuffix = '/';
798 | ````
799 |
800 | **[Back to top](#table-of-contents)**
801 |
802 | ### How to configure them globally
803 |
804 | You can configure this in either the `AppModule`.
805 |
806 | #### Configuring in the `AppModule`
807 |
808 | ````javascript
809 | import { RestangularModule } from 'ngx-restangular';
810 |
811 | // Function for settting the default restangular configuration
812 | export function RestangularConfigFactory (RestangularProvider) {
813 | RestangularProvider.setBaseUrl('http://api.restngx.local/v1');
814 | RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
815 | }
816 |
817 | // AppModule is the main entry point into Angular2 bootstraping process
818 | @NgModule({
819 | bootstrap: [ AppComponent ],
820 | declarations: [
821 | AppComponent,
822 | ],
823 | imports: [
824 | RestangularModule.forRoot(RestangularConfigFactory),
825 | ]
826 | })
827 | export class AppModule {
828 | }
829 | ````
830 |
831 | **[Back to top](#table-of-contents)**
832 |
833 |
834 | #### Configuring in the `AppModule` with Dependency Injection applied
835 |
836 | ````javascript
837 | import { RestangularModule } from 'ngx-restangular';
838 |
839 | // Function for settting the default restangular configuration
840 | export function RestangularConfigFactory (RestangularProvider, http) {
841 | RestangularProvider.setBaseUrl('http://api.restngx.local/v1');
842 | RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
843 |
844 | // Example of using Http service inside global config restangular
845 | RestangularProvider.addElementTransformer('me', true, ()=>{
846 | return http.get('http://api.test.com/v1/users/2', {});
847 | });
848 | }
849 |
850 | // AppModule is the main entry point into Angular2 bootstraping process
851 | @NgModule({
852 | bootstrap: [ AppComponent ],
853 | declarations: [
854 | AppComponent,
855 | ],
856 | imports: [
857 | RestangularModule.forRoot([Http], RestangularConfigFactory),
858 | ]
859 | })
860 | export class AppModule {
861 | }
862 | ````
863 |
864 | **[Back to top](#table-of-contents)**
865 |
866 | ### How to create a Restangular service with a different configuration from the global one
867 | Let's assume that for most requests you need some configuration (The global one), and for just a bunch of methods you need another configuration. In that case, you'll need to create another Restangular service with this particular configuration. This scoped configuration will inherit all defaults from the global one. Let's see how.
868 |
869 | ````javascript
870 | // Function for settting the default restangular configuration
871 | export function RestangularConfigFactory (RestangularProvider) {
872 | RestangularProvider.setBaseUrl('http://www.google.com');
873 | }
874 |
875 | //Restangular service that uses Bing
876 | export const RESTANGULAR_BING = new InjectionToken('RestangularBing');
877 | export function RestangularBingFactory(restangular: Restangular) {
878 | return restangular.withConfig((RestangularConfigurer) => {
879 | RestangularConfigurer.setBaseUrl('http://www.bing.com');
880 | });
881 | }
882 |
883 |
884 | // AppModule is the main entry point into Angular2 bootstraping process
885 | @NgModule({
886 | bootstrap: [ AppComponent ],
887 | declarations: [
888 | AppComponent,
889 | ],
890 | imports: [
891 | // Global configuration
892 | RestangularModule.forRoot(RestangularConfigFactory),
893 | ],
894 | providers: [
895 | { provide: RESTANGULAR_BING, useFactory: RestangularBingFactory, deps: [Restangular] }
896 | ]
897 | })
898 | export class AppModule {}
899 |
900 |
901 | // Let's use it in the component
902 | @Component({
903 | ...
904 | })
905 | export class OtherComponent {
906 | constructor(
907 | @Inject(Restangular) public Restangular,
908 | @Inject(RESTANGULAR_BING) public RestangularBing
909 | ) {}
910 |
911 | ngOnInit() {
912 | // GET to http://www.google.com/users
913 | // Uses global configuration
914 | Restangular.all('users').getList()
915 |
916 | // GET to http://www.bing.com/users
917 | // Uses Bing configuration which is based on Global one, therefore .json is added.
918 | RestangularBing.all('users').getList()
919 | }
920 | };
921 | ````
922 |
923 | **[Back to top](#table-of-contents)**
924 |
925 | ### Decoupled Restangular Service
926 |
927 | There're some times where you want to use Restangular but you don't want to expose Restangular object anywhere. For those cases, you can actually use the `service` feature of Restangular.
928 |
929 | Let's see how it works:
930 |
931 | ````js
932 | // Restangular factory that uses Users
933 | export const USER_REST = new InjectionToken('UserRest');
934 | export function UserRestFactory(restangular: Restangular) {
935 | return restangular.service('users');
936 | }
937 |
938 |
939 | // AppModule is the main entry point into Angular2 bootstraping process
940 | @NgModule({
941 | bootstrap: [ AppComponent ],
942 | declarations: [
943 | AppComponent,
944 | ],
945 | imports: [RestangularModule],
946 | providers: [
947 | { provide: USER_REST, useFactory: UserRestFactory, deps: [Restangular] } // Configurating our factory
948 | ]
949 | })
950 | export class AppModule {
951 | }
952 |
953 |
954 | // Let's use it in the component
955 | export class OtherComponent {
956 | constructor(@Inject(USER_REST) public User) {
957 | Users.one(2).get() // GET to /users/2
958 | Users.post({data}) // POST to /users
959 |
960 | // GET to /users
961 | Users.getList().subscribe( users => {
962 | var user = users[0]; // user === {id: 1, name: "Tonto"}
963 | user.name = "Gonto";
964 | // PUT to /users/1
965 | user.put();
966 | })
967 | }
968 | }
969 | ````
970 |
971 | We can also use Nested RESTful resources with this:
972 |
973 | ````js
974 | var Cars = Restangular.service('cars', Restangular.one('users', 1));
975 |
976 | Cars.getList() // GET to /users/1/cars
977 | ````
978 |
979 | **[Back to top](#table-of-contents)**
980 |
981 | ## Methods description
982 |
983 | There are 3 sets of methods. Collections have some methods and elements have others. There are are also some common methods for all of them
984 |
985 | ### Restangular methods
986 | These are the methods that can be called on the Restangular object.
987 | * **one(route, id)**: This will create a new Restangular object that is just a pointer to one element with the route `route` and the specified id.
988 | * **all(route)**: This will create a new Restangular object that is just a pointer to a list of elements for the specified path.
989 | * **oneUrl(route, url)**: This will create a new Restangular object that is just a pointer to one element with the specified URL.
990 | * **allUrl(route, url)**: This creates a Restangular object that is just a pointer to a list at the specified URL.
991 | * **copy(fromElement)**: This will create a copy of the from element so that we can modify the copied one.
992 | * **restangularizeElement(parent, element, route, queryParams)**: Restangularizes a new element
993 | * **restangularizeCollection(parent, element, route, queryParams)**: Restangularizes a new collection
994 |
995 | **[Back to top](#table-of-contents)**
996 |
997 | ### Element methods
998 | * **get([queryParams, headers])**: Gets the element. Query params and headers are optionals
999 | * **getList(subElement, [queryParams, headers])**: Gets a nested resource. subElement is mandatory. **It's a string with the name of the nested resource (and URL)**. For example `buildings`
1000 | * **put([queryParams, headers])**: Does a put to the current element
1001 | * **post(subElement, elementToPost, [queryParams, headers])**: Does a POST and creates a subElement. Subelement is mandatory and is the nested resource. Element to post is the object to post to the server
1002 | * **remove([queryParams, headers])**: Does a DELETE. By default, `remove` sends a request with an empty object, which may cause problems with some servers or browsers. [This](https://github.com/mgonto/restangular/issues/193) shows how to configure RESTangular to have no payload.
1003 | * **head([queryParams, headers])**: Does a HEAD
1004 | * **trace([queryParams, headers])**: Does a TRACE
1005 | * **options([queryParams, headers])**: Does a OPTIONS
1006 | * **patch(object, [queryParams, headers])**: Does a PATCH
1007 | * **one(route, id)**: Used for RequestLess connections and URL Building. See section below.
1008 | * **all(route)**: Used for RequestLess connections and URL Building. See section below.
1009 | * **several(route, ids*)**: Used for RequestLess connections and URL Building. See section below.
1010 | * **oneUrl(route, url)**: This will create a new Restangular object that is just a pointer to one element with the specified URL.
1011 | * **allUrl(route, url)**: This creates a Restangular object that is just a pointer to a list at the specified URL.
1012 | * **getRestangularUrl()**: Gets the URL of the current object.
1013 | * **getRequestedUrl()**: Gets the real URL the current object was requested with (incl. GET parameters). Will equal getRestangularUrl() when no parameters were used, before calling `get()`, or when using on a nested child.
1014 | * **getParentList()**: Gets the parent list to which it belongs (if any)
1015 | * **clone()**: Copies the element. It's an alias to calling `Restangular.copy(elem)`.
1016 | * **plain()**: Returns the plain element received from the server without any of the enhanced methods from Restangular. It's an alias to calling `Restangular.stripRestangular(elem)`
1017 | * **save**: Calling save will determine whether to do PUT or POST accordingly
1018 |
1019 | **[Back to top](#table-of-contents)**
1020 |
1021 | ### Collection methods
1022 | * **getList([queryParams, headers]): Gets itself again (Remember this is a collection)**.
1023 | * **get(id): Gets one item from the collection by id**.
1024 | * **post(elementToPost, [queryParams, headers])**: Creates a new element of this collection.
1025 | * **head([queryParams, headers])**: Does a HEAD
1026 | * **trace: ([queryParams, headers])**: Does a TRACE
1027 | * **options: ([queryParams, headers])**: Does a OPTIONS
1028 | * **patch(object, [queryParams, headers])**: Does a PATCH
1029 | * **remove([queryParams, headers])**: Does a DELETE. By default, `remove` sends a request with an empty object, which may cause problems with some servers or browsers. [This](https://github.com/mgonto/restangular/issues/193) shows how to configure RESTangular to have no payload.
1030 | * **putElement(index, params, headers)**: Puts the element on the required index and returns a observable of the updated new array
1031 | ````js
1032 | Restangular.all('users').getList()
1033 | .subscribe( users => {
1034 | users.putElement(2, {'name': 'new name'});
1035 | });
1036 | ````
1037 | * **getRestangularUrl()**: Gets the URL of the current object.
1038 | * **getRequestedUrl()**: Gets the real URL the current object was requested with (incl. GET parameters). Will equal getRestangularUrl() when no parameters were used, before calling `getList()`, or when using on a nested child.
1039 | * **one(route, id)**: Used for RequestLess connections and URL Building. See section below.
1040 | * **all(route)**: Used for RequestLess connections and URL Building. See section below.
1041 | * **several(route, ids*)**: Used for RequestLess connections and URL Building. See section below.
1042 | * **oneUrl(route, url)**: This will create a new Restangular object that is just a pointer to one element with the specified URL.
1043 | * **allUrl(route, url)**: This creates a Restangular object that is just a pointer to a list at the specified URL.
1044 | * **clone()**: Copies the collection. It's an alias to calling `Restangular.copy(collection)`.
1045 |
1046 | **[Back to top](#table-of-contents)**
1047 |
1048 | ### Custom methods
1049 | * **customGET(path, [params, headers])**: Does a GET to the specific path. Optionally you can set params and headers.
1050 | * **customGETLIST(path, [params, headers])**: Does a GET to the specific path. **In this case, you expect to get an array, not a single element**. Optionally you can set params and headers.
1051 | * **customDELETE(path, [params, headers])**: Does a DELETE to the specific path. Optionally you can set params and headers.
1052 | * **customPOST([elem, path, params, headers])**: Does a POST to the specific path. Optionally you can set params and headers and elem. Elem is the element to post. If it's not set, it's assumed that it's the element itself from which you're calling this function.
1053 | * **customPUT([elem, path, params, headers])**: Does a PUT to the specific path. Optionally you can set params and headers and elem. Elem is the element to post. If it's not set, it's assumed that it's the element itself from which you're calling this function.
1054 | * **customPATCH([elem, path, params, headers])**: Does a PATCH to the specific path. Accepts the same arguments as customPUT.
1055 | * **customOperation(operation, path, [params, headers, elem])**: This does a custom operation to the path that we specify. This method is actually used from all the others in this subsection. Operation can be one of: get, post, put, remove, head, options, patch, trace
1056 | * **addRestangularMethod(name, operation, [path, params, headers, elem])**: This will add a new restangular method to this object with the name `name` to the operation and path specified (or current path otherwise). There's a section on how to do this later.
1057 |
1058 | Let's see an example of this:
1059 |
1060 | ````javascript
1061 | // GET /accounts/123/messages
1062 | Restangular.one("accounts", 123).customGET("messages")
1063 |
1064 | // GET /accounts/messages?param=param2
1065 | Restangular.all("accounts").customGET("messages", {param: "param2"})
1066 | ````
1067 |
1068 | **[Back to top](#table-of-contents)**
1069 |
1070 | ## Copying elements
1071 | Before modifying an object, we sometimes want to copy it and then modify the copied object. We can use `Restangular.copy(fromElement)`.
1072 |
1073 | **[Back to top](#table-of-contents)**
1074 |
1075 | ## Using values directly in templates with Observables
1076 |
1077 | If you want to use values directly in templates use `AsyncPipe`
1078 |
1079 | ````js
1080 | this.accounts = this.restangular.all('accounts').getList();
1081 | ````
1082 |
1083 | ````html
1084 |
1085 |
{{account.fullName}}
1086 |
1087 | ````
1088 |
1089 | **[Back to top](#table-of-contents)**
1090 |
1091 | ## URL Building
1092 | Sometimes, we have a lot of nested entities (and their IDs), but we just want the last child. In those cases, doing a request for everything to get the last child is overkill. For those cases, I've added the possibility to create URLs using the same API as creating a new Restangular object. This connections are created without making any requests. Let's see how to do this:
1093 |
1094 | ````javascript
1095 |
1096 | var restangularSpaces = Restangular.one("accounts",123).one("buildings", 456).all("spaces");
1097 |
1098 | // This will do ONE get to /accounts/123/buildings/456/spaces
1099 | restangularSpaces.getList()
1100 |
1101 | // This will do ONE get to /accounts/123/buildings/456/spaces/789
1102 | Restangular.one("accounts", 123).one("buildings", 456).one("spaces", 789).get()
1103 |
1104 | // POST /accounts/123/buildings/456/spaces
1105 | Restangular.one("accounts", 123).one("buildings", 456).all("spaces").post({name: "New Space"});
1106 |
1107 | // DELETE /accounts/123/buildings/456
1108 | Restangular.one("accounts", 123).one("buildings", 456).remove();
1109 | ````
1110 |
1111 | **[Back to top](#table-of-contents)**
1112 |
1113 | ## Creating new Restangular Methods
1114 |
1115 | Let's assume that your API needs some custom methods to work. If that's the case, always calling customGET or customPOST for that method with all parameters is a pain in the ass. That's why every element has a `addRestangularMethod` method.
1116 |
1117 | This can be used together with the hook `addElementTransformer` to do some neat stuff. Let's see an example to learn this:
1118 |
1119 | ````javascript
1120 | // Function for settting the default restangular configuration
1121 | export function RestangularConfigFactory (RestangularProvider) {
1122 | // It will transform all building elements, NOT collections
1123 | RestangularProvider.addElementTransformer('buildings', false, function(building) {
1124 | // This will add a method called evaluate that will do a get to path evaluate with NO default
1125 | // query params and with some default header
1126 | // signature is (name, operation, path, params, headers, elementToPost)
1127 |
1128 | building.addRestangularMethod('evaluate', 'get', 'evaluate', undefined, {'myHeader': 'value'});
1129 |
1130 | return building;
1131 | });
1132 |
1133 | RestangularProvider.addElementTransformer('users', true, function(user) {
1134 | // This will add a method called login that will do a POST to the path login
1135 | // signature is (name, operation, path, params, headers, elementToPost)
1136 |
1137 | user.addRestangularMethod('login', 'post', 'login');
1138 |
1139 | return user;
1140 | });
1141 | }
1142 |
1143 | // AppModule is the main entry point into Angular2 bootstraping process
1144 | @NgModule({
1145 | bootstrap: [ AppComponent ],
1146 | imports: [ // import Angular's modules
1147 | RestangularModule.forRoot(RestangularConfigFactory),
1148 | ],
1149 | })
1150 |
1151 | // Then, later in your code you can do the following:
1152 |
1153 | // GET to /buildings/123/evaluate?myParam=param with headers myHeader: value
1154 |
1155 | // Signature for this "custom created" methods is (params, headers, elem) if it's a safe operation (GET, OPTIONS, etc.)
1156 | // If it's an unsafe operation (POST, PUT, etc.), signature is (elem, params, headers).
1157 |
1158 | // If something is set to any of this variables, the default set in the method creation will be overridden
1159 | // If nothing is set, then the defaults are sent
1160 | Restangular.one('buildings', 123).evaluate({myParam: 'param'});
1161 |
1162 | // GET to /buildings/123/evaluate?myParam=param with headers myHeader: specialHeaderCase
1163 |
1164 | Restangular.one('buildings', 123).evaluate({myParam: 'param'}, {'myHeader': 'specialHeaderCase'});
1165 |
1166 | // Here the body of the POST is going to be {key: value} as POST is an unsafe operation
1167 | Restangular.all('users').login({key: value});
1168 |
1169 | ````
1170 |
1171 | **[Back to top](#table-of-contents)**
1172 |
1173 | ## Adding Custom Methods to Collections
1174 |
1175 | Create custom methods for your collection using Restangular.extendCollection(). This is an alias for:
1176 |
1177 | ```js
1178 | RestangularProvider.addElementTransformer(route, true, fn);
1179 | ```
1180 |
1181 | ### Example:
1182 | ```js
1183 | // create methods for your collection
1184 | Restangular.extendCollection('accounts', function(collection) {
1185 | collection.totalAmount = function() {
1186 | // implementation here
1187 | };
1188 |
1189 | return collection;
1190 | });
1191 |
1192 | var accounts$ = Restangular.all('accounts').getList();
1193 |
1194 | accounts$.subscribe( accounts => {
1195 | accounts.totalAmount(); // invoke your custom collection method
1196 | });
1197 | ```
1198 |
1199 | **[Back to top](#table-of-contents)**
1200 |
1201 | ## Adding Custom Methods to Models
1202 |
1203 | Create custom methods for your models using Restangular.extendModel(). This is an alias for:
1204 |
1205 | ```js
1206 | RestangularProvider.addElementTransformer(route, false, fn);
1207 | ```
1208 |
1209 | **[Back to top](#table-of-contents)**
1210 |
1211 | ### Example:
1212 | ```js
1213 | Restangular.extendModel('accounts', function(model) {
1214 | model.prettifyAmount = function() {};
1215 | return model;
1216 | });
1217 |
1218 | var account$ = Restangular.one('accounts', 1).get();
1219 |
1220 | account$.subscribe(function(account) {
1221 | account.prettifyAmount(); // invoke your custom model method
1222 | });
1223 | ```
1224 |
1225 | **[Back to top](#table-of-contents)**
1226 |
1227 | # FAQ
1228 |
1229 | #### **How can I handle errors?**
1230 |
1231 | Errors can be checked on the second argument of the subscribe.
1232 |
1233 | ````javascript
1234 | Restangular.all("accounts").getList().subscribe( response => {
1235 | console.log("All ok");
1236 | }, errorResponse => {
1237 | console.log("Error with status code", errorResponse.status);
1238 | });
1239 | ````
1240 |
1241 | #### **I need to send Authorization token in EVERY Restangular request, how can I do this?**
1242 |
1243 | You can use `setDefaultHeaders` or `addFullRequestInterceptor`
1244 |
1245 | ````javascript
1246 | import { NgModule } from '@angular/core';
1247 | import { AppComponent } from './app.component';
1248 | import { RestangularModule } from 'ngx-restangular';
1249 | import { authService } from '../your-services';
1250 |
1251 | // Function for settting the default restangular configuration
1252 | export function RestangularConfigFactory (RestangularProvider, authService) {
1253 |
1254 | // set static header
1255 | RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
1256 |
1257 | // by each request to the server receive a token and update headers with it
1258 | RestangularProvider.addFullRequestInterceptor((element, operation, path, url, headers, params) => {
1259 | let bearerToken = authService.getBearerToken();
1260 |
1261 | return {
1262 | headers: Object.assign({}, headers, {Authorization: `Bearer ${bearerToken}`})
1263 | };
1264 | });
1265 | }
1266 |
1267 | // AppModule is the main entry point into Angular2 bootstraping process
1268 | @NgModule({
1269 | bootstrap: [ AppComponent ],
1270 | declarations: [
1271 | AppComponent,
1272 | ],
1273 | imports: [
1274 | // Importing RestangularModule and making default configs for restanglar
1275 | RestangularModule.forRoot([authService], RestangularConfigFactory),
1276 | ]
1277 | })
1278 | export class AppModule {
1279 | }
1280 | ````
1281 | **[Back to top](#table-of-contents)**
1282 |
1283 |
1284 | #### **I need to send one header in EVERY Restangular request, how can I do this?**
1285 |
1286 | You can use `defaultHeaders` property for this. `defaultsHeaders` can be scoped with `withConfig` so it's really cool.
1287 |
1288 | #### **How can I send a delete WITHOUT a body?**
1289 |
1290 | You must add a requestInterceptor for this.
1291 |
1292 | ````js
1293 | RestangularProvider.setRequestInterceptor(function(elem, operation) {
1294 | if (operation === "remove") {
1295 | return null;
1296 | }
1297 | return elem;
1298 | })
1299 | ````
1300 |
1301 | #### **I use Mongo and the ID of the elements is `_id` not `id` as the default. Therefore requests are sent to undefined routes**
1302 |
1303 | What you need to do is to configure the `RestangularFields` and set the `id` field to `_id`. Let's see how:
1304 |
1305 | ````javascript
1306 | RestangularProvider.setRestangularFields({
1307 | id: "_id"
1308 | });
1309 | ````
1310 |
1311 | #### **What if each of my models has a different ID name like CustomerID for Customer**
1312 |
1313 | In some cases, people have different ID name for each entity. For example, they have CustomerID for customer and EquipmentID for Equipment. If that's the case, you can override Restangular's getIdFromElem. For that, you need to do:
1314 |
1315 | ````js
1316 | RestangularProvider.configuration.getIdFromElem = function(elem) {
1317 | // if route is customers ==> returns customerID
1318 | return elem[_.initial(elem.route).join('') + "ID"];
1319 | }
1320 | ````
1321 | With that, you'd get what you need :)
1322 |
1323 | #### **How can I send files in my request using Restangular?**
1324 |
1325 | This can be done using the customPOST / customPUT method. Look at the following example:
1326 | ````js
1327 | Restangular.all('users')
1328 | .customPOST(formData, undefined, undefined, { 'Content-Type': undefined });
1329 | ````
1330 | This basically tells the request to use the *Content-Type: multipart/form-data* as the header. Also *formData* is the body of the request, be sure to add all the params here, including the File you want to send of course.
1331 |
1332 | #### **How do I handle CRUD operations in a List returned by Restangular?**
1333 |
1334 | ````javascript
1335 | Restangular.all('users').getList().subscribe( users => {
1336 | this.users = users;
1337 | var userWithId = _.find(users, function(user) {
1338 | return user.id === 123;
1339 | });
1340 |
1341 | userWithId.name = "Gonto";
1342 | userWithId.put();
1343 |
1344 | // Alternatively delete the element from the list when finished
1345 | userWithId.remove().subscribe( () => {
1346 | // Updating the list and removing the user after the response is OK.
1347 | this.users = _.without(this.users, userWithId);
1348 | });
1349 |
1350 | });
1351 | ````
1352 |
1353 | #### Removing an element from a collection, keeping the collection restangularized
1354 |
1355 | While the example above removes the deleted user from the collection, it also overwrites the collection object with a plain array (because of `_.without`) which no longer knows about its Restangular attributes.
1356 |
1357 | If want to keep the restangularized collection, remove the element by modifying the collection in place:
1358 |
1359 | ```javascript
1360 | userWithId.remove().subscribe( () => {
1361 | let index = $scope.users.indexOf(userWithId);
1362 | if (index > -1) this.users.splice(index, 1);
1363 | });
1364 | ```
1365 |
1366 | #### How can I access the `unrestangularized` element as well as the `restangularized` one?
1367 |
1368 | In order to get this done, you need to use the `responseExtractor`. You need to set a property there that will point to the original response received. Also, you need to actually copy this response as that response is the one that's going to be `restangularized` later
1369 |
1370 | ````javascript
1371 | RestangularProvider.setResponseExtractor( (response) => {
1372 | var newResponse = response;
1373 | if (_.isArray(response)) {
1374 | _.forEach(newResponse, function(value, key) {
1375 | newResponse[key].originalElement = _.clone(value);
1376 | });
1377 | } else {
1378 | newResponse.originalElement = _.clone(response);
1379 | }
1380 |
1381 | return newResponse;
1382 | });
1383 | ````
1384 | Alternatively, if you just want the stripped out response on any given call, you can use the .plain() method, doing something like this:
1385 |
1386 | ````javascript
1387 |
1388 | this.showData = function () {
1389 | baseUrl.post(someData).subscribe( (response) => {
1390 | console.log(response.plain());
1391 | });
1392 | };
1393 | ````
1394 |
1395 | **[Back to top](#table-of-contents)**
1396 |
1397 | #### How can add withCredentials params to requests?
1398 | ````javascript
1399 | // Function for settting the default restangular configuration
1400 | export function RestangularConfigFactory (RestangularProvider) {
1401 | // Adding withCredential parametr to all Restangular requests
1402 | RestangularProvider.setDefaultHttpFields({ withCredentials: true });
1403 | }
1404 |
1405 | @NgModule({
1406 | bootstrap: [ AppComponent ],
1407 | declarations: [
1408 | AppComponent,
1409 | ],
1410 | imports: [
1411 | // Global configuration
1412 | RestangularModule.forRoot(RestangularConfigFactory),
1413 | ]
1414 | })
1415 | export class AppModule {}
1416 | ````
1417 |
1418 | **[Back to top](#table-of-contents)**
1419 |
1420 | # Server Frameworks
1421 |
1422 | Users reported that this server frameworks play real nice with Ngx-restangular, as they let you create a Nested RESTful Resources API easily:
1423 |
1424 | * Ruby on Rails
1425 | * CakePHP, Laravel and FatFREE, Symfony2 with RestBundle, Silex for PHP
1426 | * Play1 & 2 for Java & scala
1427 | * Dropwizard for Java
1428 | * Restify and Express for NodeJS
1429 | * Tastypie and Django Rest Framework for Django
1430 | * Slim Framework
1431 | * Symfony2 with FOSRestBundle (PHP)
1432 | * Microsoft ASP.NET Web API 2
1433 | * Grails Framework
1434 |
1435 | **[Back to top](#table-of-contents)**
1436 |
1437 |
1438 | # Contributing
1439 | Please read [contributing guidelines here](https://github.com/2muchcoffeecom/ngx-restangular/blob/master/CONTRIBUTING.md).
1440 |
1441 | **[Back to top](#table-of-contents)**
1442 |
1443 |
1444 | # License
1445 |
1446 | The MIT License
1447 |
1448 | **[Back to top](#table-of-contents)**
1449 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ngx-restangular-demo": {
7 | "root": "demo",
8 | "sourceRoot": "demo",
9 | "projectType": "application",
10 | "architect": {
11 | "build": {
12 | "builder": "@angular-devkit/build-angular:browser",
13 | "options": {
14 | "outputPath": "dist/demo",
15 | "index": "demo/index.html",
16 | "main": "demo/main.ts",
17 | "tsConfig": "demo/tsconfig.app.json",
18 | "polyfills": "demo/polyfills.ts",
19 | "assets": [
20 | "demo/assets",
21 | "demo/favicon.ico"
22 | ],
23 | "styles": [
24 | "demo/styles.css"
25 | ],
26 | "scripts": []
27 | },
28 | "configurations": {
29 | "production": {
30 | "optimization": true,
31 | "outputHashing": "all",
32 | "sourceMap": false,
33 | "extractCss": true,
34 | "namedChunks": false,
35 | "aot": true,
36 | "extractLicenses": true,
37 | "vendorChunk": false,
38 | "buildOptimizer": true,
39 | "fileReplacements": [
40 | {
41 | "replace": "environments/environment.ts",
42 | "with": "environments/environment.prod.ts"
43 | }
44 | ]
45 | }
46 | }
47 | },
48 | "serve": {
49 | "builder": "@angular-devkit/build-angular:dev-server",
50 | "options": {
51 | "browserTarget": "ngx-restangular-demo:build"
52 | },
53 | "configurations": {
54 | "production": {
55 | "browserTarget": "ngx-restangular-demo:build:production"
56 | }
57 | }
58 | },
59 | "lint": {
60 | "builder": "@angular-devkit/build-angular:tslint",
61 | "options": {
62 | "tsConfig": [
63 | "demo/tsconfig.app.json"
64 | ],
65 | "exclude": [
66 | "**/node_modules/**"
67 | ]
68 | }
69 | }
70 | }
71 | },
72 | "ngx-restangular": {
73 | "root": "projects/ngx-restangular",
74 | "sourceRoot": "projects/ngx-restangular/src",
75 | "projectType": "library",
76 | "prefix": "lib",
77 | "architect": {
78 | "build": {
79 | "builder": "@angular-devkit/build-ng-packagr:build",
80 | "options": {
81 | "tsConfig": "projects/ngx-restangular/tsconfig.lib.json",
82 | "project": "projects/ngx-restangular/ng-package.json"
83 | },
84 | "configurations": {
85 | "production": {
86 | "project": "projects/ngx-restangular/ng-package.prod.json"
87 | }
88 | }
89 | },
90 | "test": {
91 | "builder": "@angular-devkit/build-angular:karma",
92 | "options": {
93 | "main": "projects/ngx-restangular/src/test.ts",
94 | "tsConfig": "projects/ngx-restangular/tsconfig.spec.json",
95 | "karmaConfig": "projects/ngx-restangular/karma.conf.js"
96 | }
97 | },
98 | "lint": {
99 | "builder": "@angular-devkit/build-angular:tslint",
100 | "options": {
101 | "tsConfig": [
102 | "projects/ngx-restangular/tsconfig.lib.json",
103 | "projects/ngx-restangular/tsconfig.spec.json"
104 | ],
105 | "exclude": [
106 | "**/node_modules/**"
107 | ]
108 | }
109 | }
110 | }
111 | }
112 | },
113 | "defaultProject": "ngx-restangular-demo",
114 | "schematics": {
115 | "@schematics/angular:component": {
116 | "prefix": "app",
117 | "styleext": "css"
118 | },
119 | "@schematics/angular:directive": {
120 | "prefix": "app"
121 | }
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/config/externals.js:
--------------------------------------------------------------------------------
1 | export default [
2 | 'lodash',
3 | '@angular/core',
4 | '@angular/common/http',
5 | 'core-js/fn/object',
6 | 'rxjs/BehaviorSubject',
7 | 'rxjs/Observable',
8 | 'rxjs/add/observable/throw',
9 | 'rxjs/add/operator/filter',
10 | 'rxjs/add/operator/map',
11 | 'rxjs/add/operator/catch',
12 | ]
13 |
--------------------------------------------------------------------------------
/config/rollup-esm2015.conf.js:
--------------------------------------------------------------------------------
1 | import external from "./externals";
2 |
3 | export default {
4 | input: 'tmp/esm2015/ngx-restangular.js',
5 | output: {
6 | file: 'dist/esm2015/ngx-restangular.js',
7 | format: 'es',
8 | sourcemap: true
9 | },
10 | external,
11 | };
12 |
--------------------------------------------------------------------------------
/config/rollup-esm5.conf.js:
--------------------------------------------------------------------------------
1 | import external from './externals';
2 |
3 | export default {
4 | input: 'tmp/esm5/ngx-restangular.js',
5 | output: {
6 | file: 'dist/esm5/ngx-restangular.js',
7 | format: 'es',
8 | sourcemap: true
9 | },
10 | external,
11 | };
12 |
--------------------------------------------------------------------------------
/config/rollup-umd.conf.js:
--------------------------------------------------------------------------------
1 | import external from "./externals";
2 |
3 | export default {
4 | input: 'tmp/esm5/ngx-restangular.js',
5 | output: {
6 | file: 'dist/bundles/ngx-restangular.umd.js',
7 | format: 'umd',
8 | name: 'ngxRestangular',
9 | globals: {
10 | // Angular dependencies
11 | '@angular/core': 'ng.core',
12 | '@angular/common': 'ng.common',
13 | '@angular/common/http': 'ng.common.http',
14 | 'lodash': '_',
15 | 'core-js/fn/object': 'core.Object',
16 | 'rxjs/Observable': 'Rx.Observable',
17 | 'rxjs/BehaviorSubject': 'Rx.BehaviorSubject',
18 | },
19 | },
20 | external,
21 | };
22 |
--------------------------------------------------------------------------------
/config/rollup.conf.js:
--------------------------------------------------------------------------------
1 | import esm5 from './rollup-esm5.conf';
2 | import esm2015 from './rollup-esm2015.conf';
3 | import umd from './rollup-umd.conf';
4 |
5 | export default [
6 | esm5,
7 | esm2015,
8 | umd
9 | ];
10 |
--------------------------------------------------------------------------------
/config/tsconfig-esm2015.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "sourceMap": true,
5 | "target": "es2015",
6 | "module": "es2015",
7 | "baseUrl": "../lib",
8 | "experimentalDecorators": true,
9 | "moduleResolution": "node",
10 | "outDir": "../tmp/esm2015",
11 | "rootDir": "../lib",
12 | "skipLibCheck": true,
13 | "lib": ["dom", "es2015"]
14 | },
15 | "files": ["../lib/public_api.ts"],
16 | "angularCompilerOptions": {
17 | "annotateForClosureCompiler": true,
18 | "strictMetadataEmit": true,
19 | "skipTemplateCodegen": true,
20 | "flatModuleOutFile": "ngx-restangular.js",
21 | "flatModuleId": "ngx-restangular"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/config/tsconfig-esm5.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig-esm2015.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "outDir": "../tmp/esm5",
6 | "rootDir": "../lib"
7 | },
8 | "angularCompilerOptions": {
9 | "annotateForClosureCompiler": true,
10 | "strictMetadataEmit": true,
11 | "skipTemplateCodegen": true,
12 | "flatModuleOutFile": "ngx-restangular.js",
13 | "flatModuleId": "ngx-restangular"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/demo/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/2muchcoffeecom/ngx-restangular/6407f48dd20c77d5a077ef5d666a896664db012b/demo/app/app.component.css
--------------------------------------------------------------------------------
/demo/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |