I have a project with Django and Angular.
I have a page located at http://localhost:8000/install/#/, that is part of the install app. There I have a button which POST a form, then I want the function in my controller to redirect to http://localhost:8000/, my index page.
$http.post('install/send_install_form/', installation) //installation is a dictionary
.then(function(data){
alert('You will be redirected')
setTimeout(function(){
// REDIRECTION TO THE INDEX..?
},
4000
)
},
function(data){
alert("Error")
})
How do we link between and out of apps with Django-Angular?
Thank you!
Redirect within the angularJS app:
scope.$apply(function() {
$location.path("/route");
});
Redirect outside the angularJS app:
window.location.replace('http://google.ca/');
Related
I am working on mobile app using:
Ionic 2.1.4
Cordova 6.4.0
Angular 1.5.3
I've one view with external url using InAppBrowser plugin and I have a link in this website should redirect to certain view in my app
this issue is $location.url() not redirecting and not working at all, but when I tested the event I found it trigger normally.
here is my full code
angular.module('yogipass').controller('iframe',function ($location) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log('here');
var ref=cordova.InAppBrowser.open('http://192.168.42.218/index.html', '_blank', 'location=no');
ref.addEventListener('loadstart', function(event) {
if (event.url.match("mobile/login")) {
console.log('worked!') // this logged normally
$location.url('/login');
ref.close();
}
});
}
])
You have to run digest cycle manually as you are changing location path from asynchronous event which is outside angular context.
Do wrap you code in $timeout function, which will fire up digest cycle. Apparently that will help to update location.
$timeout(function(){
$location.url('/login');
})
We have an Ionic app which polls a node/express API.
When the app starts it fetches the JSON data correctly from the API. When we update the data and fetch it again from the Ionic app, we still see the old data from the time that the app was launched.
We've tried to clear both the Angular cache and the Ionic cache in a variety of ways, but that doesn't seem to make a difference.
Things we've tried are:
$ionicConfigProvider.views.maxCache(0);, cache-view="false" on the template, setting cache: false on the state, tried accessing the state via $state.go($state.currentState, {}, {reload : true});, $ionicHistory.clearHistory(); and $ionicHistory.clearHistory();, $route.reload and $window.location.reload.
Controller:
function contactsController(Contacts, $stateParams) {
var vm = this;
var params = $stateParams.id;
Contacts.getAllContacts.then(function success(response) {
vm.data = response.data;
vm.selectedContact = response.data[params];
});
}
Factory
function contactsFactory($http, $stateParams) {
return {
getAllContacts: $http.get('https://api-call'),
update: function(url) {
$http.patch('https://api-call/update', [$stateParams.id, url]);
},
};
}
Express Back end
app.get('/', function (req, res) {
ref.once("value", function(snapshot){
res.send(snapshot.val());
});
});
app.patch('/update', function(req, res) {
var id = req.body[0];
ref.child(id).update({"imageURL": req.body[1]});
});
Thanks
Modify your view like this
<ion-view cache-view="false" view-title="My Title!">
Try console.log(vm) and verify that the updated data are obtained. If its only the view thats not being updated despite updated data being logged, I would try the following along with cache-view="false".
$scope.apply(function (){
// update your view here
vm.data = response.data;
vm.selectedContact = response.data[params];
});
By using Firebase's once() you have effectively removed all callbacks attached to value besides the first one:
Listens for exactly one event of the specified event type, and then
stops listening
Try switching to on() instead.
app.get('/', function (req, res) {
ref.on("value", function(snapshot){
res.send(snapshot.val());
});
});
It may be that your issue is not related to caching at all...
When I install Ionic 2 Open layers map on android device, i can see Open layers map successfully on the android screen. But when i close it and open the app again, i cant see the map. To solve this problem , what i do is: i uninstall the app, restart my device, then reinstall the app, after that i can see the map.
Please provide me a permanent fix.
Placing this in app config worked for me with
$ionicConfigProvider.views.maxCache(0);
$ionicConfigProvider dependency in config.
Good morning, i'm creating a dashboard in AngularJS with a lot of features. That site is a multi user application so every user most login before using it. With AngularJS i can define only one ng-app and one ng-view, but I need to have a template for login pages (login, lost password, onboarding wizard etc) and another template for the dashboard pages that appears afer succefull login (user managing, settings). I use token authentication. How can i accomplish this task? Now i'm triyng to hide elements like header and left menu when the user is not logged in but i doesn't seem a good solution.
First you can have multiple ng-app in a single page. But you will have to do manual bootstrapping. As only first ng-app is automatically bootstrapped by Angular. Take a look at this stack overflow discussion
AngularJS Multiple ng-app within a page
For adding authorization token to your requests, you will have to use interceptors. Here is the example code for an interceptor from book 'angularjs up and running'
angular.module('notesApp', []).factory('AuthInterceptor', ['AuthInfoService', '$q',
function(AuthInfoService, $q) {
return {
request : function(config) {
if (AuthInfoService.hasAuthHeader()) {
config.headers['Authorization'] = AuthInfoService.getAuthHeader();
}
return config;
},
responseError : function(responseRejection) {
if (responseError.status === 403) {
// Authorization issue, access forbidden
AuthInfoService.redirectToLogin();
}
return $q.reject(responseRejection);
}
};
}]).config(['$httpProvider',
function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
}]);
In our app, we actually have two Backbone SPA applications. The first one is for login, registration and other features for unauthenticated users. The URL for this would be something like http://www.example.com/registration#signin. Once you login, you are redirected to our main Backbone app at http://www.example.com/ui#home.
In my main UI app, I am using Backbone.history without pushState. The App file looks something like:
define(function (require) {
var App = new Marionette.Application();
App.addInitializer(function (options) {
...
});
...
App.on('initialize:after', function () {
$(function(){
if (Backbone.history) {
Backbone.history.start({ root: '/ui' });
}
});
$.log("**WebApp**: Marionette app started.");
});
return App;
});
Of course, everything works flawlessly in any browser except IE 9 (and maybe 10, I need to check). In IE 9, all the routing works fine. Clicking links such as http://www.example.com/ui#anotherpage works. However, when the user clicks the Back button in their browser, they are not sent back to the last route fired. Instead, they are sent to http://www.example.com/registration#signin, which is the last page served by Node, our web server. As I click through links, I can see that history.length and Backbone.history.history.length are not updating.
All routes are fired from links/URL's. I'm not using router.navigate() within the code. Here are examples of our Router:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.AppRouter.extend({
appRoutes: {
"": "showHome",
"home": "showHome",
"foo": "showFoo"
}
});
});
And Controller:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.Controller.extend({
showHome: function () {
require(['webapp','modules/home'], function (WebApp) {
WebApp.module("Home").start();
WebApp.module("Home").controller.showModule();
});
},
showFoo: function () {
require(['webapp', 'modules/foo'], function (WebApp) {
WebApp.module("Foo").start();
WebApp.module("Foo").controller.showModule();
});
}
});
});
UPDATE:
On further research, it turns out the problem is that older versions of IE don't record hash changes in their history. See - Change location.hash and then press Back button - IE behaves differently from other browsers. But I'm still not sure what the workaround for this would be. I'm guessing it would somehow involve manually handling hash change events with a plugin such as jQuery Hashchange and doing... something? Manually setting IE's history? Or crafting a custom history object and using it when we detect a Back button in IE?
I was having the same problem in one of our apps for IE.
Starting backbone history like below works.
Backbone.history.start({
pushState: true,
hashChange: false
});
Update: As mentioned By T Nguyen,
When you set pushState to true, hash URL's no longer trigger routes. Unless you add server-side support for all your Backbone routes, you need to add an event handler on the client side which captures appropriate links and calls .navigate() on the route
I am pretty new to backbone js and I am having some problem getting the pushstate functionality of my app to work. Here is an eg of my route:
var TodoRouter = new (Backbone.Router.extend({
routes: {
"": "index",
"item/add": "AddTodoItem",
"list/add": "AddTodoList"
},
AddTodoItem: function() {
//e.preventDefault();
alert("add new item");
},
AddTodoList: function(e) {
//e.preventDefault();
alert("add new list");
},
Start: function(){
//note: my directory structure is localhost/playground/todo/
Backbone.history.start({pushState: true, root: "/playground/todo/"});
},
initalize: function(){
},
index: function(){
var todoListView = new TodoListView({ collection: TodoItemCollection });
}
}));
Here is how I call my route:
$(function() {
TodoRouter.Start();
});
And lastly here is how I call a link:
New List
The problem that I am running into is that when I call the link, the page stays the same, no alert and the browser displays:
http://localhost/playground/todo/#list/add
Now here is the funny part, if I refresh the page, the url become:
http://localhost/playground/todo/list/add
and I get the alert. So I have a feeling I am missing a key point somewhere. Any help would be greatly appreciated!
You have pushState: true and that's why it preferred the slash / instead of hash #
Either change that or remove the hash
You're trying to use Backbone Routes and html5 pushState.
As the backbone documentation said:
"if you have a route of /documents/100, your web server must be able
to serve that page, if the browser visits that URL directly."
So if you want to trigger some functions through uri (localhost/webapp/#about) you just need to use Backbone Routes.
If you want to use Backbone Routes and pushState, you'll need a back-end to answer requests made to your readable url (localhost/webapp/about) and need to use backbone.navigate method to avoid the browser understand <a href="#someRoute"> as a html anchor.
here you can see a complete example
You can't trigger your route, because when pushState:true the href="#route" has the same behavior as a html anchor.