I want to load URL( external URL 'http://google.com') in Dashboard content,I tried with this code
.state('app.urlloading', {
url: '/url-loading',
controller:function($window){
$window.location.href = 'https://google.com';
},
templateUrl: 'views/tmpl/url-loading.html'
})
1) Is it possible to load a external URL in Dashboard content ?, If I click a button on sidebar of the dashboard only dashboard content should display the URL retaining sidebar and header, now whole dashboard is disappearing after clicking the button then redirecting to the google page.
What about using an iframe
url-loading.html
<iframe src="https://google.com"></iframe>
If you need to open differents url using same template & controller you can use a resolver
// loading google
.state('app.urlloading', {
url: '/url-loading-google',
controller:'UrlLoadingCtrl'
resolve {
url : function(){
return "https://www.google.com"
}
}
templateUrl: 'views/tmpl/url-loading.html'
})
// loading twitter
.state('app.urlloading', {
url: '/url-loading-twitter',
controller:'UrlLoadingCtrl'
resolve {
url : function(){
return "https://www.twitter.com"
}
}
templateUrl: 'views/tmpl/url-loading.html'
})
Controller
.controller('UrlLoadingCtrl', [ 'url', '$scope', function(url, $scope){
$scope.url = url;
})
url-loading.html
<iframe src="{{url}}"></iframe>
If you change location.href, whole page changes. Static HTML usable from states that static HTML link does not matter is external or not.
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://placehold.it/16x9"/>
<iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
But you could use iframes like this that is what are you exactly wanting.
Related
I am having on angular page.
Page1 :
In which configuration is
.when('/Test/:empId', {
templateUrl:'/Templates/test.html',
controller: 'TestController'
})
.when('/Test/:depId', {
templateUrl:'/Templates/test1.html',
controller: 'Test1Controller'
})
Then i have another page
Page 2:
This page is normal mvc razor page having button
Button1
On click of that button i want to show modal which contain
Page1
So i wrote
$.ajax({
url: '/Templates/test.html',
type: 'GET',
success: function (responce) {
var elem = angular.element(responce);
$('#testModalBody').html(elem);
$('#testModal').modal('show');
//console.log('test responce');
}
});
I am just getting html response, it does not execute 'TestController'
So the scope variables are not getting values declared in TestController, and not able to see data html pages. Just see static html template.
Instead of using $.ajax, you should use $http service of Angular JS.
Instead of doing like this $('#testModalBody'), you can use ng-bind-html.
To bind HTML please read below link.
https://www.w3schools.com/angular/ng_ng-bind-html.asp
Below is my controller code,
app.controller('logoutCtrl', ['$scope', '$http','$window','$state',
function ($scope, $http,$window,$state) {
$scope.logout = function() {
console.log('inside logmeout');
delete $window.sessionStorage.token;
$state.go('access.login');
};
}]);
HTML
<li class="last" ng-controller="logoutCtrl">
<a href="" ng-click="logout()">
<i class="material-icons">lock</i> Logout
</a>
</li>
app.router.js
.state('access', {
url: '/access',
template: '<div ui-view class=""></div>'
})
.state('access.login', {
url: '/login',
templateUrl: 'partials/ui-login.html',
controller: 'LoginFormController',
resolve: {
deps: ['uiLoad',
function(uiLoad) {
return uiLoad.load(['scripts/controllers/login.js',
'../bower_components/font-awesome/css/font-awesome.css']);
}
]
}
})
When clicking the logout i am not able to redirect to another state('access.login').
The control is coming inside the logout() and able to print the console message and is deleting the token as well but redirect not happening..
Can i get any help..
In your module definition you need to pass 'ui.router' as a dependency in order to use the Angular-UI-Router in your project:
E.g. angular.module('my_app', ['ionic', 'ui.router'])
It works for me as well.
$state.go('the-state-name-in-quotes')
If your web page is displayed within a view, don't forget to include ui-view in the parent page where you want to display the web page.
<div ui-view>
<!-- Child page will appear here -->
</div>
Hi I am working on a project using angularjs.
My roting logic is
.state( "authenticate", {
url: '/',
templateUrl : "views/login.html",
controller : "LoginCtrl",
data : {
requireLogin : false
}
})
.state( "beats", {
url: '/beats',
templateUrl : "views/beats.html",
controller : "BeatsCtrl",
data : {
requireLogin : true
}
})
.state( "outlets", {
url: '/outlets',
templateUrl : "views/beats.html",
controller : "BeatsCtrl",
data : {
requireLogin : true
}
})
I have ng-view in index.html that includes login.html first (url '/'). after login in each state I want to include a navbar in each template using ng-include.
currently I am writing in each page this line
<div ng-include=" 'templates/navbar.html' "></div>
but I want to include only once and each view should be render below it. But the problem is this navbar template itself getting render in ng-view.
and as far as I know we can not have multiple ng-view in one app.
can anyone please tell me what should be the best approach of doing this.
You could potentially have this nav bar included in the index.html itself, but hide it using ng-if or ng-show till the user is logged in. Once the user is logged in you could have a flag that evaluates to true and this nav bar can appear on every subsequent page.
in index.html
<div id="navbar" ng-if="isUserLoggedIn">
// nav bar code
</div>
And this 'isUserLoggedIn' will be set to true by your LoginCtrl on the scope.
In my ionic blank app, i have two html file index.html and category.html.
i write the controller for index.html in app.js like
.controller('AppCtrl',function($scope){
$scope.menu = function() {
console.log('yesytest');
window.location = "category.html";
};
})
this is working fine and after reaching the category page i create another controller in app.js
controller('categoryCtrl',function($scope){
console.log('ffffffffff');
$scope.beauty = function() {
console.log('yesytest');
window.location = "categorydetails.html";
};
});
i add a ng-click function on a button inside category.html but when i click on that button it is not calling the controller?
You can define your controller either on :
- defining it on your ui router state
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'app/views/loading/index.html'
})
Or by defining it into tour template category.html
<div ng-controller="categoryCtrl"> .... </div>
This is standard AngularJS feature, nothing special with ionic
If you use this :
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
You can use ui-sref="stateId" to do redirection
Example:
<a ui-sref="category"></a>
..Hi Kindly route your controller just define them..This might help.. --> http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/ ^_^
//app.js
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
//index.html
<a ng-href="#/category"></a>
root html:
<html> stuff <div ui-view></div> stuff </html>
partial template
<div class="article-view">
{{date_published}}
</div>
When I navigate using $state.go('root.' + entryStateUrl); the url changes but new state's content (template) is appended right after root's state content. I need to show template on new clean page. How to do it?
Maybe similar to this SO.
Edit
I generated and attached states like this:
$stateProviderRef.state('root.' + generatedStateName,
{ url: 'root/' + generatedStateName,
templateUrl : 'partials/article-view.html',
controller: function($scope){
$scope.date_published = data.date_published;
}
});
UPDATE
When I changed it like this it stopped working:
$stateProviderRef.state(generatedStateName,
{ url: generatedStateName,
templateUrl : 'partials/article-view.html',
controller: function($scope){
$scope.date_published = data.date_published;
}
});
Redirecting to a new page means you won't be able to bind to the controller used from the origin page, since the redirected page won't have any attachment to your js code.