I am making an ionic application and i want to open url in system browser i have installed ionic inappbrowser plugin but i dont know how to use it can some help me with the code.
I want to open {{object.url}} in an browser.
I am using ionic 1
HTML
<body ng-app="newsapp" ng-controller="newscontroller">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Tech Crunch</h1>
</ion-header-bar>
<ion-content>
<section class="list">
<article ng-repeat="object in news">
<a navigate-To="{{object.url}}" class="item item-thumbnail-center">
<img ng-src="{{object.urlToImage}}" height="100%" width="100%">
<h2 class="nowhitespace">{{object.title}}/</h2>
<p class="nowhitespace">{{object.description}}</p>
<h6><i>Published At</i> {{object.publishedAt}}</h6>
</a>
</article>
</section>
<ion-infinite-scroll on-infinite="loadMore()" distance="1%">
</ion-infinite-scroll>
</ion-content>
</ion-pane>u
</body>
app.js
var app = angular.module('newsapp', ['ionic']);
.directive("navigateTo",function($ionicGesture){
return{
restrict: 'A',
link:function($scope,$element,$attr){
var tapharndle = function(e){
var inAppBrowser = window.open{encodeURI{$attr.navigateTo},'_blank','location=yes','toolbar=yes'};
};
var tapGesture = $ionicGesture.on{'tap',tapharndle,$element};
}
}
})
$http({
method: "GET",
url: "https://newsapi.org/v1/articles?source=techcrunch&
sortBy=latest& ``apiKey=90b77760d33d4c76af4c6c53862c9e72"
}) .then(function(newsdata){
angular.forEach(newsdata.data.articles, function(newsarticle) {
$scope.news.push(newsarticle);
});
$scope.lastarticleID= newsdata.data.lastID;
//$scope.news =newsdata.data.articles;
console.log(newsdata);
} )
});
You can use the latest $cordovaInAppBrowser Plugin, which provides a web browser view. It could be used to open images, access web pages, and open PDF files.
Use cordova plugin add cordova-plugin-inappbrowser command from console to add the plugin.
The following configuration of location sets the visibility of URL:
var defaultOptions = {
location: 'no',
clearcache: 'no',
toolbar: 'no'
};
Further instructions are provided on the page of URL given.
Related
I am new to the concepts of ionic and angularjs , so I created a basic layout to navigate to pages from ionic footers. I am not able to navigate eventhough everything in my code seems to be fine. Can someone help me out?
As you can see, I have included 'ion-nav-view' tag in the index as well as the footer template:
index file :
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-nav-view> </ion-nav-view>
footer.view.html :
<ion-nav-view></ion-nav-view>
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon ion-home" ui-sref="home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star" ui-sref="favorites"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a" ui-sref="settings"></i>
Settings
</a>
</div>
home.view.html
<h1>Home view</h1>
app.js
$stateProvider
.state('footer', {
url : '/footer',
templateUrl : 'footer/footer.view.html'
})
.state('footer.home',{
url : '/home',
templateUrl : 'home/home.view.html'
})
.state('footer.settings',{
url : '/settings',
templateUrl : 'settings/settings.view.html'
})
.state('footer.favorites',{
url :'/favorites',
templateUrl : 'favorites/favorites.view.html'
});
$urlRouterProvider.otherwise('/footer/home');
Change Your state to
.state('settings',{
url : '/settings',
templateUrl : 'settings/settings.view.html'
})
and make sure the following thins
your html file should be in settings folder and its name should be settings.view.html
Definitely it will work ...
This should help. It not simple example but OK.
You can call this in your footerCtrl
$('html,body').animate({
scrollTop: $(el).offset().top
}, 500);
1.I was building a ionic Mobile App in that i have a gallery and i was trying to view a image as pop-up from gallery, pop-up was
working fine and it fetch the image path too but unable to see image
on pop-up.
here my app.js
function galleryController($scope, $http, $rootScope, $location,$ionicModal, profile){
/*alert(0);*/
profile.galleries(window.localStorage['token']).success(function(data){
/*alert(JSON.stringify(data));*/
if(data.status == 200)
{
$scope.gallery = data.data.gellary;
//alert(JSON.stringify(data));
}
$ionicModal.fromTemplateUrl('partials/gallery.html', function(modal) {
$scope.gridModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// open video modal
$scope.openModal = function(selected) {
$scope.data = selected;
$scope.gridModal.show();
};
// close video modal
$scope.closeModal = function() {
$scope.gridModal.hide();
};
//Cleanup the video modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.gridModal.remove();
});
});
};
kangaroo.directive('gridImage', function(){
alert("yyyyyyyyyyyyyyyyyyy");
return function($scope, element, attrs){
var url = attrs.gridImage;
element.css({
'background-image': 'url(' + url +')',
});
};
});
I was fetching image from s3 Amazon by using api , this is html
code in my gallery.html where i get the data from my controller i
can see the image in gallery and not able to see on pop-up don't
know what was the problem.
**gallery.html page**
<ion-header class="bar bar-header bar-balanced">
<!-- <button class="button button-icon icon ion-navicon"></button> -->
</ion-header>
<div class="padding" >
<div ng-controller="galleryController">
<ion-content class="content has-header ionic-pseudo" style="margin-top:19px">
<div ng-repeat="x in gallery" >
<img ng-src="{{x.thumb_img}}" ng-click="openModal(x)" alt="" class="gallery_i" />
</div>
</ion-content>
<script id="partials/gallery.html" type="text/ng-template">
<div class="modal" ng-click="closeModal()">
<img ng-src="{{data.thumb_img}}" />
</div>
</script>
</div>
</div>
please help me out of this
Thanks in advance.
THE SITUATION:
I need to display a Twitter timeline in my Ionic app. Just that. No further action is needed (login, retweet etc..)
ATTEMPT 1 - SIMPLE EMBED (as in a normal website)
In the view:
<a class="twitter-timeline" href="https://twitter.com/MY_TWITTER" data-widget-id="TWITTER_WIDGET_ID">Tweets by #MY_TWITTER</a>
The script in index.html:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Is not working. Testing the actual app in the phone, is not showing up. Testing the app in the browser it appears only after refreshing the page.
Bu if i put that same lines of code into a simple angular web app (not a Ionic app) than it works fine.
Why there is this strange behavior? Is ionic related?
ATTEMPT 2 - NGTWITTER
This is the code as explained in this tutorial: http://devdactic.com/twitter-rest-api-angularjs/
The controller:
.controller('TwitterCtrl', function($scope, $ionicPlatform, $twitterApi, $cordovaOauth) {
var twitterKey = 'STORAGE.TWITTER.KEY';
var clientId = 'MY_CLIENT_ID';
var clientSecret = 'MY_CLIENT_SECRET';
var myToken = '';
$scope.tweet = {};
$ionicPlatform.ready(function() {
myToken = JSON.parse(window.localStorage.getItem(twitterKey));
if (myToken === '' || myToken === null) {
$cordovaOauth.twitter(clientId, clientSecret).then(function (succ) {
myToken = succ;
window.localStorage.setItem(twitterKey, JSON.stringify(succ));
$twitterApi.configure(clientId, clientSecret, succ);
$scope.showHomeTimeline();
}, function(error) {
console.log(error);
});
} else {
$twitterApi.configure(clientId, clientSecret, myToken);
$scope.showHomeTimeline();
}
});
$scope.showHomeTimeline = function() {
$twitterApi.getUserTimeline({screen_name: 'MY_TWITTER_FEED'}).then(function(data) {
$scope.home_timeline = data;
});
};
$scope.submitTweet = function() {
$twitterApi.postStatusUpdate($scope.tweet.message).then(function(result) {
$scope.showHomeTimeline();
});
};
$scope.doRefresh = function() {
$scope.showHomeTimeline();
$scope.$broadcast('scroll.refreshComplete');
};
$scope.correctTimestring = function(string) {
return new Date(Date.parse(string));
};
});
The view:
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="My tweet..." ng-model="tweet.message" ng-maxlength="140">
</label>
<button class="button button-small" ng-click="submitTweet()">
Tweet
</button>
</div>
</div>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div ng-show="home_timeline.length == 0">Loading tweets...</div>
<div ng-repeat="entry in home_timeline" class="list card">
<div class="item item-avatar">
<img ng-src="{{entry.user.profile_image_url}}"/>
<h2>{{entry.user.name}}</h2>
<p>{{correctTimestring(entry.created_at) | date:'medium'}}</p>
</div>
<div class="item item-body">
<p ng-bind-html="entry.text"></p>
<img ng-if="entry.extended_entities" ng-src="{{ entry.extended_entities.media[0].media_url }}" style="width: 100%;"/>
</div>
</div>
In this way i can properly see the twitter feed requested plus the possibility to write tweets.
Is not exactly what i want, because it requires the user to login into Twitter and allow the app to be granted access to his twitter account, while i just want to display a twitter feed and nothing more.
Besides, once the twitter section of the app is opened the app is not working anymore as excepted, some links in the menu stop to work.
THE QUESTION:
How can i simply display a twitter timeline inside a Ionic app?
Thank you!
I uploaded a sample project in git hub for Twitter Login in Ionic framework if you have any queries please let me know
Before cloning the project follow these step's :
1)Create a developer project in Twitter Developer console
2)Replace the APPID and APPSECRET in project with your values created in twitter developer console
3)Please write the call back url in twitter developer application as http://tinyurl.com/krmpchb
4)Have a look at README.md file in github
i need to use a ionic slide box to show some images in my application. I used ionic slide box it does not seem to work with a ng-repeat.
this is my html part
<ion-view title="Promotions" ng-controller="PromotionsCtrl">
<ion-content class="has-header" scroll="true" padding="true">
<ion-slide-box>
<ion-slide ng-repeat="obj in promotions">
<img ng-src= {{obj.img}}>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
my controller
.controller('PromotionsCtrl', function($scope, $http, $window, $ionicSlideBoxDelegate,$interval) {
$http.get( 'http://******.com/B*****/service2.php?q=promotions', { cache: true})
.then(function(res){
$scope.promotions = res.data['top'];
$ionicSlideBoxDelegate.update();
});
})
You have to use update() if you are using ng-repeat with slideboxes.
See here:
http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/
The newer version .rc4 of ionic updates the slide box on its own. Try updating your Ionic Lib.
This is my sample,the slide works,but when the delegate-handler updated,the parameter of the "does-contunue" can't work,I'm Still looking for a solution...
html:
<ion-slide-box on-slide-changed="slideHasChanged($index)" does-continue="true" auto-play="true" delegate-handle="image-viewer" style="height:30%;">
<ion-slide ng-repeat="slide in slideList">
<div class="box" style="background-image: url('{{slide.url}}');background-size:100% 100%;></div>
</ion-slide-box>
controller:
angular.module("myApp.controllers", ["myApp.services"])
.controller("myController", function ($scope, $ionicSlideBoxDelegate, myService,$timeout) {
$timeout(function(){
var slideList = myService.getSlides();
$scope.slideList = slideList;
$ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
},2000)
})
service:
angular.module("myApp.services", [])
.factory("myService", function () {
return{
getSlides: function () {
var slideList = new Array();
slideList.push("imgs/a.jpg");
slideList.push("imgs/b.jpg");
slideList.push("imgs/c.jpg");
return slideList;
}
}
})
As #Karan said, the update is call by itself. But there is still some problems. As mentioned in the issue, you can disable the slider if the data is not ready. Then everything will be fine.
In my AngularJS application, I'm using a router with an ng-view directive.
Besides it I would like to add a generic header (same for all the views). So I did the following:
<!-- index.html -->
<body ng-app="myApp">
...
<div ng-controller="TopmenuCtrl" class="header">
<div ng-include="template.url"></div>
...
</div>
<div ng-view></div>
</body>
The view is dynamic depending on the session token:
<!-- views/topmenu.html -->
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">About</a></li>
<li><a ng-href="#">Contact</a></li>
<li ng-show="token"><a ng-href="#" ng-click="doLogout()">Logout</a></li>
</ul>
And the topmenu controller with the logout method:
// controllers/topmenu.js
$scope.template = {url: 'views/topmenu.html'};
$scope.doLogout = function() {
localStorageService.clearAll();
$window.sessionStorage.token = '';
$location.path('/login');
};
The problem is: When I click on "logout" in the app, the topmenu controller is called and destroy the session but the main one from the router is called too and display an error because the session was destroyed!
The only (not satisfactory) solution I found to prevent this is to add this code in each controllers of the app:
if ($window.sessionStorage.token = '') {
return;
}
Is there a way to execute the header controller but not the main ng-view controller?
I finally found my answer: https://stackoverflow.com/a/11672909/900416.
Now my logout link looks like: <a href ng-click="doLogout()">Logout</a>.