Hi I am new to Ionic and,
I am using AngularJS with Ionic v1 here load more scrolling is too much slowed.
I have tried two ways
Service
Factory
both ways are very slow. how can I speed up my load more option.
These are the values i am getting from the api REST service
{
"shared_status": "false",
"wall_post_id": "740",
"post_post": "getU.online",
"post_added_by": "589",
"post_company_name": "The Business Club",
"post_business_sector": null,
"post_busin_type": "Limited Company",
"post_added_by_image": "1471523735.png",
"post_added_by_name": "Russ Wheeler",
"post_added_on": "14 hours ago",
"post_date": "2017-01-31 18:48:36",
"post_mine": true,
"image_list": [{
"file_name": "http:\/\/www.domain.com\/uploads\/wall_posts\/tmp\/\/1485888514.jpg"
}],
"like_status": "activated",
"like_test": false,
"like_test_1": "Unlike",
"like": " Like",
"num_like": "1",
"no_of_reply": 1,
"comment": "comment"
}
Use only ionic directive wherever possible as they are designed keeping mobile performance in mind. Using non-ionic directives will but, at the cost of performance.
So, if you are using some custom / plugin based solution .. remove that and instead use <ion-infinite-scroll>
Here is sample :
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
Read more :
https://ionicframework.com/docs/api/directive/ionInfiniteScroll/
First Check your API calls latency. If they are okey then use followings
to increase ionic app performance loading list and etc.
Try to do following things.
Add crosswalk plugin (This will increase your .apk file size but performance wise it will be good option )
If you can use one time data-binding(::) in your list item use it
Use track by in you ng-repeat list item (eg. ng-repeat="item in items track by item.id" or ng-repeat="item in items track by $index")
When application in production remove console.log if have any
Also you can find out some more performance tips in this link
Related
I defined the name of some fields in my translation file and now I want to add some validation messages. This would be my translation file i.e:
{
"field-name": "Name",
"field-email": "Email",
"required": "The field {{field}} is mandatory"
}
Is there any way to tell angular translate to cross-reference and pass as parameter the key of another translation? Something like:
<span translate translate-values="{field: 'field-name'}">
required
</span>
or
<span translate translate-values="{field: 'field-email'}">
required
</span>
I searched the docs and googled it but got no results.
If this is not possible, what would be the less bloated way to implement it? Take into account this is for a SPA (Single Page App) and the user can change the language without reloading the page.
I managed to deal with it using $translateProvider.postProcess().
It even works with translate-values, and nested translate-values parameters (with some care not to have two parameters with the same name)
Check it here: https://codepen.io/Onnizuka/pen/ePwKMK
I have created the table with 50 rows and gave the css overflow is scroll to parent element of table. Each time of scrolling I will add 5 row in the table. It’s working fine in html. But I converted this to ionic framework, I got performance lag. Can any one suggest, why performance issue is occurring when perform DOM operation in ionic framework?
Remember to use the one-time-binding operator '::' in every angular directive that should execute or evaluate only once, I mean if you don't need to be watching for changes (ng-click, ng-class, ng-if, ng-switch...) and also in labels, texts, fields and stuff filled with your data.
Doing a ng-repeat with too much angular interaction can create a lot of watchers. Hence, the perfomance of your app will decrease dramatically. Imagine an ng-repeat of a portion of html with 1 ng-click, 1 ng-class and three fields. These are 5 watchers, so 5 X 50 rows are 250 watchers...
Also if your list is not going to change you can use algo :: on the ng-repeat directive. Example:
<div ng-repeat="item in ::ctrl.items"></div>
Instead of ng-repeat="item in items", for ionic you can use collection-repeat="item in items. It is a really optimized version of ng-repeat for ionic. For more info checkout this link: collection-repeat in ionic
I'm using Ionic framework for my new application.
I have an issue, I want to know how it would be possible to insert views dynimacally.
I make a request to the server requesting news, the response in in JSON which look like :
{
"title":"news 1",
"image":"http://www.server.com/news_image1.png",
"description":"news_description"
},
{
"title":"news 2",
"image":"http://www.server.com/news_image2.png",
"description":"news_description"
},
{
"title":"news 3",
"image":"http://www.server.com/news_image3.png",
"description":"news_description"
}
I want to insert data dynmaically to the ion-view and be able to swipe between the news like the image below :
So if you just have an idea how can that be possible !
You could do a slide box and the use a ng-repeat to dynamically create slides. Although if you are making a bunch of slides i would use collection repeat. Check out slide boxes here http://ionicframework.com/docs/api/directive/ionSlideBox/ . and ng-repeat and collectio-repeat here and here https://docs.angularjs.org/api/ng/directive/ngRepeat , http://ionicframework.com/docs/api/directive/collectionRepeat/
Basically, what I need to do is create a Fullscreen window display for a shop using data that is being used on their current website, now, I have choosen to use AngularJS for this project, mainly because I want to learn it and the best way to learn is doing.
I have a JSON file containing an array of items, it currently contains the following data:
{
"prop_id" : "",
"prop_title" : "",
"prop_postcode" : "",
"prop_price" : "",
"prop_image" : "",
"prop_desc" : "",
"template" : "views/prop-no-thumbs.html",
"info_image" : "",
"duration" : "4000"
},
So, I have a unique ID, the template that I wish to use to display this item and the duration I want the view to be present on the screen. These will vary.
What would be the best way to handle this in AngularJS, I have made a start using some example code I found on GitHub but can't seem to get it to automatically rotate (question can viewed here: AngularJS: Slide divs automatically with a set duration on page load ).
Any ideas? Should I also be using a third party plugin? Does anyone have any tutorials or resources to handle something like this?
You could use the angular ui bootstrap carousel directive and tweak with css (remove the arrows, resize it, etc...)
I'm trying to create a form whose layout is entirely data driven.
Example data source:
{
title : "Form Test",
fields : [{
name : "FieldA",
type : "string",
value : "initial value"
}, {
name : "FieldB",
type : "selection",
options : ["1", "2", "3"],
value : "2"
}, {
name : "FieldC",
type : "struct",
value :
[{
name : "FieldC1",
type : "string",
value : "initial value"
}, {
name : "FieldC2",
type : "string",
value : "initial value"
}
]
}
]
}
I think can use ng-repeat and ng-switch to choose the form element depending on the 'type', however I get stuck when it comes to doing this recursively when I get to 'FieldC'.
<span ng-switch on="field.type">
<div ng-switch-when="string">STRING: {{field.value}}</div>
<div ng-switch-when="selection">SELECTION: {{field.value}}</div>
<div ng-switch-when="struct">STRUCT: ????</div>
<div ng-switch-default>DEFAULT:{{field.value}}</div>
</span>
Essentially I want a way that when I encounter a "struct" it recursively applies the ng-switch to the struct fields? Is there any way to "reference" the template so it can be used in multiple places on the same page? The support for template "partials" seems to need to be coordinated server-side via routes which seems like overkill here. Is this something where I need to start digging into creating my own directives?
EDIT I just stumbled across this that looks like it has a decent chance of doing what I want (I have yet to properly test it), is that in the right direction?
You'll want to build a directive that takes this kind of data and builds the form from it.
The way to treat the recursion is to treat every level, including the top level, as another struct. I built a version here: http://jsfiddle.net/U5Kyp/9/
Make sure you read the directive guide in the docs so you understand what's happening: http://docs.angularjs.org/guide/directive
Here is an update of accepted answer for angular.js 1.0.1 There were a few non-compatible changes in stable version:
ng-app is now required directive
scope syntax and semantics were changed
http://jsfiddle.net/9qAfM/1/
In my opinion this is a bad case of the inner platform effect. Quoting wikipedia: "tendency of software architects to create a system so customizable as to become a replica, and often a poor replica, of the software development platform they are using".
AngularJS already has a powerful mechanism for traversing a tree of objects and building a stack of scopes and controllers out of it. You could argue that it is exactly what AngularJS IS.
If you are forced to build forms out of such abominable JSON, I think the easiest way is to turn them into HTML (by means of a simple template language of any kind, server side or client side) and then using the $compile service to turn them into an angularjs application.