https://github.com/waseemdev/ng-ionix
Helper components for Ionic Framework that let you build an app without typescript, only HTML/CSS.
https://github.com/waseemdev/ng-ionix
Last synced: 9 months ago
JSON representation
Helper components for Ionic Framework that let you build an app without typescript, only HTML/CSS.
- Host: GitHub
- URL: https://github.com/waseemdev/ng-ionix
- Owner: waseemdev
- License: mit
- Created: 2018-02-15T14:30:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-27T15:18:48.000Z (over 8 years ago)
- Last Synced: 2025-05-24T08:09:24.006Z (about 1 year ago)
- Language: TypeScript
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionix
Experimental library for Ionic Framework helps you build an app without Typescript, only HTML/CSS.
Built on top of [ng-interactions](https://github.com/waseemdev/ng-interactions).
# Setup
1. install via npm:
```
npm i ng-ionix@latest --save
```
2. Import IoxModule in you module
```typescript
import { IoxModule } from "ng-ionix";
@NgModule({
imports: [
IoxModule,
....
]
})
export class AppModule { }
```
# Http
## `iox-apis`
`api` is a component that make and call an HTTP request.
```html
```
#### `api` Properties:
| Property | Desc. |
| ------------- | ------------- |
| url | api url |
| method | default is `get` |
| anonymous | default is true |
| authorized | default is null |
| cache | whether or not to cache the data, default is false |
| persistDataKey | whether or not to save returned data (mapped data) in Local Storage |
| executingMessage | loading message you want to show during executing the api, default is null, so no loading message will show |
| successMessage | toast message you want to show if completed successfuly, default is null, so no toast will show |
| errorMessage | toast message you want to show if received an error, default is null, so no toast will show |
| pagingQueryParam | the name of page parameter to pass in url query, default is `page` e.g. ?page=1 |
| startPageNo | the number should starts paging results at, default is `1` |
| hasNextPage | determines whether it has a next page or not |
| dataPath | the actual data path you want to store it in `data` property. |
| response | `readonly` HTTP response |
| data | `readonly` represents mapped data from response, if `dataPath` wasn't provided will be the same as `response` |
| error | `readonly` HTTP error |
| executing | `readonly` whether is executing or not |
# `action`
`action` is a custom action built on top of `ActionBase` from ng-interactions.
You can pass the name of action as a string or an `api` object.
When `action` is attached to ion-content, will be executed after the element is loaded. otherwise it will be executed on click event.
### 1. api action:
Use `[action]` to call and execute `api`, and when it is bound to `ion-content` that has `ion-refresher` or/and `ion-infinite-scroll`, it will implement `ionRefresh` and `ionInfinite` events.
Example:
```html
...
```
### `[actionParams]` for `api`:
You can pass query parameters to `api` using `[actionParams]` in two ways:
1. an array of values: ['category_1', 4], so will be applied to `api` query variables in order.
2. an object with keys that match variables in api url: { cat: 'category_1', id: 4 }.
```html
```
### 2. 'pushView':
```html
Push
```
### 3. 'popView':
```html
```
### 4. 'setRootView':
```html
Set Root
```
### 5. 'closeView':
```html
Cancel
Ok
```
### 6. 'showModal':
```html
Show Modal
```
### 7. 'showToast':
```html
Show Toast
```
### 8. 'submitForm' (see Forms):
```html
Show Toast
```
### Http Settings:
```javascript
import { IoxHttpOptions } from "ng-ionix";
...
constructor(httpOptions: IoxHttpOptions) {
httpOptions.domain = 'https://www.mydomain.com';
httpOptions.apiBasePath = '/api/v1';
}
```
### Http Authorization:
```javascript
import { IoxAuthService } from "ng-ionix";
...
constructor(authService: IoxAuthService) {
authService.authorizationHeader = 'Bearer';
authService.accessToken = 'user access token should be stored here';
authService.authenticateAsync = (): Observable => {
return new Observable(observer => {
// check if user is authenticated or not, refresh the token if expired.
observer.next(true);
});
};
}
```
### Intercept Http Request:
```javascript
import { HttpRequest } from "@angular/common/http";
...
constructor(httpService: IoxHttpService) {
httpService.iterceptRequest = (httpRequest: HttpRequest) => {
// change the request...
return true; // true to allow the execution
};
}
```
### Add Custom Action:
```javascript
import { IAction } from "ng-ionix";
export class MyCustomAction implements IAction {
name: string = 'customPushView';
constructor(private app: App) {
}
execute(params: any): Observable {
return Observable.fromPromise(this.app.getActiveNavs()[0].push.apply(this.app.getActiveNavs()[0], params));
}
}
// in App or AppModule
import { IAction, ActionsProvider } from "ng-ionix";
...
constructor(actionsProvider: ActionsProvider, myAction: MyCustomAction) {
actionsProvider.add(myAction);
}
```
# Forms
`iox-form` takes care of building FormGroup, and calling `api`.
## iox-form Properties:
| Property | Desc. |
|----------|-------|
| submitAction | an `api` object |
| submitParams | an array of parameters as follows: **0:** whether or not to send only changes. **1:** tag name, 'update' will group all fields that has 'update' tag and compose them in one object and send it to api as a body. '!update' will take all fields that its tag not equals to 'update' **2:** parameter for api |
```html
Save
```
## field-def Properties:
| Property | Desc. |
|----------|-------|
| name | field name |
| default | default value for the field |
| required | `boolean` |
| min | `number` |
| max | `number` |
| minLength | `number` |
| maxLength | `number` |
| regex | `string` |
| tag | `string` to mark fields and group them, so you can include/exclude them before submitting the form |
## validations
`validations` component helps you to display validation errors for a control/field.
Form example:
```html
...
{{ 'email' | translate }}
...
Save
```
# Dialogs
## 1. confirm
```html
Show Confirm
```
## 2. loading
```html
Show Loading
```
## 3. toast
```html
Show Toast
```
Also you can use `showOn` preporty on toast, loading or confirm to show it when the value is true.
```html
10">
```
# Variables
## View Parameters
Use `iox-view-params` to read parameters passed to current page.
```html
```
## Storage
Enable you to access LocalStorage.
```html
{{ storage?.get('some-key') }}
Save
```
## Global Variables
Access global variables across all the pages.
```html
{{ vars?.get('some-key') }}
```
## Local Variables
Temporary variables inside the page.
```html
{{ vars?.get('some-key') }}
Save
```