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...)
Related
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
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/
I am trying to use a video player (the jwplayer) inside my AngularJS project. This post consists with 2 parts: part 1 for background, part 2 is my question. Thanks.
PART 1: Solving the "Error loading player: No playable sources found" problem.
At first the video is not showed, just a black rectangle on the page ui, and a quite misleading console message saying "No suitable players found and fallback enabled".
Hours later I happened to change the jwplayer size configuration from "height:450, width:800" to "height:'100%', width:'100%'". This time jwplayer shows a message on the page ui: "Error loading player: No playable sources found".
That gives me direction. My jwplayer usage looks like this:
<!-- this is my index.html -->
<div id="jw_container">Loading the player ...</div>
<script>
var player = jwplayer("jw_container").setup({
file:"{{model.my_video.video_url}}",
......
Change that file line to a hardcoded absolute video url will work, indicating that is the real problem. So eventually I got:
file: angular.element(document.getElementById('ng-wrapper')).scope().model.my_video.video_url,
and then problem solved, for now. (But still ugly, not intuitive, in my opinion.)
================================ SEPARATOR ===================
PART 2: My real question
Coming from the world of traditional template engines, one might tend to use {{...}} wherever he wants. But in AngularJS, situation is different.
Besides the above example, this is another example bit me before:
<img title="{{my_title}}" src='logo.png'> <!-- This works -->
<img src="{{my_image}}"> <!-- This doesn't. Use ng-src instead. -->
So in general, when and when not to use {{...}} inside the AngularJS view file?
Only for Part 1: If you're working with jwplayer and Angular then I highly recommend calling jwplayer from Angular as opposed to the other way round (what you're doing).
e.g.
myModule.controller('MyController', function ($scope, stuffINeed) {
jwplayer.key = "myKey";
jwplayer("myElement").setup({
file: "MyFileName"
});
As long as jwplayer.js has been loaded (link in index.html or use something like require.js) you're good to go!
Wrap the Jw Player as a Directive. You can use something like this: https://github.com/ds62987/angular-jwplayer
Trying to give my own thoughts on this topic.
Rule #1: Never write {{...}} inside AngularJS's <script>...</script> tag. Simply because AngularJS's template system doesn't work in thay way. Instead, use this:
//This is the usage in the view
angular.element(document.getElementById('the_id')).scope().foo
Alternatively, you can define an extra helper in view file:
//This is another usage in the view
function bar(foo) {
//do something with foo
}
and then use your model in a "usual" way via controller file:
//This is inside controller file
function YourCtrl($scope) {
bar($scope.foo);
}
That is it.
Yet I am still not sure when and when not to use {{...}} inside the html part of view. Leave this part to be answered by someone else. (I am now just a new AngularJS learner in week 2.)
Edit : I added test plunker : http://plnkr.co/edit/BMGN4A
Can you provide a full example? Because I write as below but get message Cannot read property 'videoUrl' of undefined although I have $scope.videodata.videoUrl = "bla bla"; in my controller.
<script type="text/javascript">
jwplayer("myElement").setup({
file: angular.element(document.getElementById('myElement')).scope().videodata.videoUrl,
image : "http://i3.ytimg.com/vi/2hLo6umnjcQ/mqdefault.jpg",
autostart : "false",
id : 'playerID',
width: '700px',
height: '400px',
primary : "flash",
stretching : "uniform",
modes : [{
type : 'html5'
}, {
type : 'download'
}, {
type : 'flash',
src : 'player.swf'
}]
});
</script>
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.
These are my first steps with drupal.
I have created a taxonomy hierarchy for my articles and now I am trying to add a new field to the content type "Article" and "Media" so the content admin can assign a "category" to his new content.
So I've been to Structure > Content Types > Article > Manage Fields
Then "Add new field" with :
1- Label = Category
2- Name = "field_category
3- Field = "Term reference"
**4- Automatically changes to "Select list" but I am unable to see the drop down list options. Clicking the list doesn't do anything, I couldn't select Autocomplete or any other value I've seen on forums & tutorials. Using firebug I could see the options are there, but the list doesn't show up.**
This is happening with all types of fields, even with text fields, the most basic one.
Any idea why is this happening ?
As glumbo mentioned, the problem here is caused by jQuery 1.7 update. As of jQuery 1.6 DOM properties should be accessed using .prop() function.
There is an open issue with some hotfix solution:
You need to replace .attr() jQuery function call with .prop() in /modules/field_ui/field_ui.js at following lines:
100: $(this).html(html).attr('disabled', disabled ? 'disabled' : '');
253: $(ajaxElements).attr('disabled', true);
Please note that this fix modifies a Drupal core module and you'll probably want to use a patch (Dries would kill the kitty anyway:).
The problem is with jquery update. If you are using jquery 1.7 you will get this problem