I'm trying to handle the 'wheel click' and 'right-click > open in new tab/window' in order to load the targeted view in the new tab/window.
Let's say in one of my view, I have something like this :
<li>Time Tracking</li>
<li>Dashboard</li>
The changeView() function in my controller looks like this :
this.changeView = function(viewPath) {
$location.path(viewPath);
};
And the route configuration like this :
// Routes configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'requests/requestsList.html',
controller: 'requestsController',
controllerAs: 'r'
})
.when('/requests', {
templateUrl: 'requests/requestsList.html',
controller: 'requestsController',
controllerAs: 'r'
})
.when('/projects', {
templateUrl: 'projects/projectsList.html',
controller: 'projectsController',
controllerAs: 'p'
})
.otherwise({
redirectTo: '/'
});
}]);
How could I handle the displaying of a new view in a different tab/window ?
Also, is there a syntax in my $routeProvider that allows me to combine the / and /requests in the same when(...) ?
Simple HTMl will help you there. Add in your HTML code a target="_blank"
Try using $window service:
this.changeView = function(viewPath) {
$window.open(viewPath, '_blank');
};
Related
I am setting up my angular routes in the app.js as so:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
});
These URLs do work because when I type in localhost:9000/framedata or /characters it displays the view I expect. When I used the navigation bar that defines the links as expected there is a '#%2F' that is added like so: http://localhost:9000/#!/#%2Fcharacters
<ul class="nav navbar-nav">
<li class="active">tekkenMitzu?</li>
<li><a ng-href="#/characters">Characters</a></li>
<li><a ng-href="#/framedata">Frame Data</a></li>
</ul>
I hope this gives sufficient information, please let me know if I should give you some more information, if it is necessary I can upload this to a domain so you can see the 'live' version.
Try this below code
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);// it will remove the #
});
And your URL having some white space if you remove the space then the %2F will clear
More details, please checkout it
AngularJS converting my ng-href url "slash" into "%2f"
This is my app.js
var mainApp = angular.module("myapp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/search/login.html'
}).
when('/dashboard', {
templateUrl: 'admin/index.html'
}).
otherwise({
redirectTo: '/'
});
}]);
mainApp.controller('logincntrl',function($scope,$location){
$scope.submit=function(){
var uname=$scope.username;
var upass=$scope.password;
if($scope.username=="admin" && $scope.password=="admin"){
$location.path('/dashboard');
}
};
});`
After clicking on submit.It will redirect to dashboad..That is seperate folder with index.But as i have given view on the first page ..my dashboard contain coming on the first page even with styling..how to make seperate view for dashboard page
You can use <ng-view><ng-view> to have load different
partials. You can have a look into this to have an ideahttp://codepen.io/dhanrajjay/pen/dOjmxL/
For some reason my ngRoute dosent work properly? I dont know but it dosent show any error on the console either. Here is my Cloud9 File. And here is my script.js:
var app = angular.module('ChattApp', ["firebase", "ngRoute"])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'HtmlFiles/login.html',
controller: 'LoginController'
})
.when('/Register', {
templateUrl: 'HtmlFiles/registration.html',
controller: 'RegistrationController'
})
.otherwise({
redirectTo: '/'
});
});
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://uniquecoders.firebaseio.com/");
return $firebaseAuth(ref);
}
]);
It looks like you're not injecting the $routeProvider into the config function.
Take a look at the tutorial for the $routeProvider here or take not of the screenshot below.
So I'm trying to use angular routing in my application. The problem is that the route "/" does not get initialized automatically. So I first go to "/" and the main content of the page is empty (the template is not loaded at all), I click the link to /settings and settings are loaded, then I click a link to "/" and this time the template is initialized correctly. So how do I make the thing initialized at the beginning?
Here's my routing configuration:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
I tried calling $location.url("/profile") from a controller and it did help, but the url has to be changed and I would rather keep the "/"
use otherwise({ redirectTo: "/" })
Update : here how it should be
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
}).otherwise({ redirectTo: '/' });
I am building a simple gallery with Angular and I am trying to have a template shown on some route, which is very easy with angular.
some.site/#/gallery
is done with
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/gallery', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery'
})
.otherwise({
redirectTo: '/'
});
}
]);
But then I want to have a div popup when user clicks on thing and goes to
some.site/#/gallery/thing/1
Note that I still want my gallery to be on the background.
My initial idea was to have that div always hidden unless there's */thing so that I could just get the id like so */thing/:id when needed, but this approach seems rather ugly, because why have that thing hanging in there all the time?
Are there any other, better ways of doing that?
What you can do is set a $routeParam depending on your route, let's say:
if url is /gallery, then 'showPopup' = false
if url is /gallery/thing/:id, then 'showPopup' = true
and then in your html you bind the popup state to $routeParams.showPopup.
To do so, you can set the params directly in your mapping:
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/gallery', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery',
resolve: {
ignored: function ($route) {
$route.current.params.showPopup = false;
}
}
})
.when('/gallery/thing/:id', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery',
resolve: {
ignored: function ($route) {
$route.current.params.showPopup = true;
}
}
})
.otherwise({
redirectTo: '/'
});
}
]);
Hope I helped !