I have an angularjs application. The app is supposed to be a hybrid mobile app for android and iOS. I have a JavaScript file in the project which is not a part of any module. In that JavaScript file I need to call the respective template URL, either through $state or any method which loads the controller also.
For $scope I found many ways of accessing it outside that angularjs project but could not find the same for $state.
we can use java-script
window.location.href //to change location
for example:
suppose right now I am in https://www.google.co.in/
now i want to navigate to https://news.google.co.in/
we can simply write
window.location.href ="https://news.google.co.in/"
it will navigate to that page
Now in your project you might have defined your routing like this
function routeConfig($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('landing.home', {
url: '/home',
templateUrl: "app/components/homeFolder/home.html",
controller: 'homeController',
controllerAs: 'homec'
})
.state('landing.hometwo', {
url: '/home1',
templateUrl: "app/components/OnHand/Templates/OnHandhome.html",
controller: 'OnHandController',
controllerAs: 'Onhand'
})
})
Now if you are in angularjs controller you will simply use
$state.go('landing.home');// to navigate to your required location
But if you are not in angularjs Module you can change window.location to navigate to required page
for example to achieve ---$state.go('landing.home'); you can write
window.location.href ="https:complete url"
or otherwise
window.location.hash ="#/home1" //the url which is defined for that state
Related
So having an issue with AngularUI Router. The problem I'm having is it's unable to access any states via entering the URL or refreshing while on a state other than home. The returned error is Cannot GET /state-name however the ui-sref="state-name" works perfectly fine.
Not using a Node server or Express routing, just Angular and running web server using Gulp-Connect.
Technology:
AngularJS 1.5.3
Angular UI 0.2.18
Gulp 3.9.1
Routes.js
angular.module('myApp').config(function(
$httpProvider,
$stateProvider,
$locationProvider,
$urlRouterProvider
){
$locationProvider.html5Mode({enabled: true, requireBase: false});
$stateProvider
.state('home',{
url:'/',
templateUrl: 'path/to/home.tmpl.html'
})
.state('state-name',{
url:'/state-name',
templateUrl: 'path/to/state-name.tmpl.html'
});
$urlRouterProvider.otherwise('/');
});
Is there something I'm missing to allow for refreshing on a state or navigating via URL?
You should have a state called state-name to be able to access it. From your state providers, I can't see any state with this name state-name. Currently your available states are home and route_1.
To access 'state-name', you need to add this state:
.state('state-name',{
url:'/state-name',
templateUrl: 'path/to/state-name.tmpl.html'
})
For accessing the URL directly, using the state's name, you need to use the bang notation. For example:
For home: http://localhost/#!home
For state-name: http://localhost/#!state-name
Of course, substitute http://localhost by your host + context + whatever you need.
I have to setup a wordpress site which was developed by another team locally. They used angularjs. I am very new to angular. I placed the wordpress files in wamp server. The name of the folder is playbook.
When I tried to access the site by using url localhost/playbook, I got a javascript error saying localhost/home not found.
I checked the javascript file and I saw routing like this
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/home'
})
When I added /playbook at the start like below of templateUrl, page displayed
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/playbook/home'
})
Why is this happening. Shouldn't the route take the path up to localhost/playbook?
You need to specify the extension .html for the template.Assuming your file is called home.html, replace your current code with
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/playbook/home.html'
})
Regarding the usage of a more specific path.Consider this, you are coding a multi-module app in Angular.To seperate concerns, you may have a file structure that is based on each module.So my routes could look something like this. For my file, this was defined in app.js , which was inside the JS folder in my whole application.Additionally, you may choose to define routes in a seperate folder altogether. There is no reason for it to default to a particular file or folder.
foodApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',
{
templateUrl:'js/apps/choiceScreen/choice.html',
controller:'choiceCtrl'
})
.when('/cafe',
{
templateUrl:'js/apps/cafe/cafeScreen.html',
controller:'cafeCtrl'
})
.when('/showCafe/',
{
templateUrl:'js/apps/eachScreen/itemView.html',
controller:'itemCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
I have some routes with some views that use my index.html as template. On a specific view (for instance login page) I don't want to use index.html as template. How to do this with Angular:
My routes:
.when('/user/:id/update',{
templateUrl: 'views/updateUser.html',
controller: 'updateUserCtrl'
})
.when('/role', {
templateUrl: 'views/role.html',
controller: 'RoleCtrl'
})
.when('/login', {
controller: 'RoleCtrl' //Here I want a page withou template
})
I already tried use ui-route like this:
$stateProvider
.state('contacts', {
abstract: true,
template: '<ui-view/>',
url: '/contacts'
})
.state('contacts.list', {
// loaded into ui-view of parent's template
templateUrl: 'contacts.list.html',
url: '/list'
})
.state('contacts.detail', {
// loaded into ui-view of parent's template
templateUrl: 'contacts.detail.html',
url: '/detail'
})
In Both cases my pages always inherit from my index.html.
with ui-router at least you can do abstract: true to set the route to no template and stack controllers onto views for separated behavior.
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
otherwise, with vanilla angularjs, theoretically you could just do template : "" if you wanted to load a controller with no template.
http://weblog.west-wind.com/posts/2013/Oct/15/Routing-to-a-Controller-with-no-View-in-Angular
The way it works is not recommended, because your browser reloaded all content of your app and it breaks all concept of a Single Page Application.
One of approaches is using ng-view/ui-view in your template (html file) and $location in your service/controller to replace the url address if user authentication was ok.
Take a look in this plnkr with two examples that work:
http://plnkr.co/edit/vPyH5lwbwYCMx6RCnVb0?p=preview
For the views where you do not want index.html's base template (header, footer, etc) to appear - you can use a div that overlays the entire page (in that component's html and css).
I want to implement a pagination function using AngularJS. Then I'm trying to achieve it by using same state transition and adding 'same name' query parameter.
app.config ["$locationProvider", "$stateProvider", "$urlRouterProvider", ($locationProvider, $stateProvider, $urlRouterProvider) ->
$locationProvider.html5Mode true
$urlRouterProvider.otherwise '/'
$stateProvider
.state 'shops',
url: "/shops?page"
controller: "shopsController"
templateUrl: "shops.html"
.state 'shops.shop_detail',
url : "/:shop_id"
controller: "shopDetailController"
templateUrl: "shop_detail.html"
.state 'shops.shop_detail.menus',
url: "/menus?page"
controller: "menusController"
templateUrl: "menus.html"
]
For example, if you want to see Page 2 of list of shops, URL inputed in browser is like the following.
/shops?page=2
And if you want to see Page 2 of list of menus in an specific shop, URL inputed in browser is like the following.
/shops/:shop_id/menus?page=2
But when I run this code, the following error occurred.
Error: error:modulerr
Module Error
Failed to instantiate module app due to:
Error: Duplicate parameter name 'page' in pattern '/shops/:shop_id/menus?page?page'
I think this kind of implementation of pagination using query parameter is popular. But I cannot do this using UI-Router.
Please tell me the solution.
I have my backend web framework loading my AngularJS app with following URL
http://localhost/New/Alpha/App
I also have it set up so that anything after App will still load the same thing
http://localhost/New/Alpha/App/home
http://localhost/New/Alpha/App/settings
...
I'm trying to make my AngularJS app to work in the way that it would pick up the bit of URL after App and load a controller/template accordingly. I have a problem with routing in my AngularJS app though
var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: "fail"
});
$locationProvider.html5Mode(true);
});
main.controller("mainController", function($scope) {
console.log("home")
});
If I try this URL
http://localhost/New/Alpha/App/home
it changes the URL to
http://localhost/fail
instead of leaving the URL as it is and loading the template/controller. If however I change the config and give it a full relative URL it does work as supposed to
.when("/New/Alpha/App/home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
My problem is, that the part of URL before App - /New/Alpha cannot be hardcoded in. It could be /New/Beta, /New/Gamma, etc.
Is what I want to do possible at all without hardcoding the full relative URL match?
UPDATE Sorry, forgot to mention that the number of URL segments before App can change, as in it could be /New/Beta/App and it also could be /New/Another/Beta/App. I don't suppose something like */App or /New/*/App is possible instead of /New/:placeholder/App?
Will this work for you?
var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/New/:greek/App/home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: "fail"
});
$locationProvider.html5Mode(true);
});
main.controller("mainController", function($scope) {
console.log("home")
});
You could then retrieve the greek with $routeParams.greek from within your controller.
The general solution to this problem is to have the server pass the app URL to your client-side code. In other words, use server-side code to dynamically write the equivalent of the following on the page:
var appUrl = '/New/Alpha/App';
Then setting up the route provider becomes:
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when(appUrl + "/home", {
templateUrl: "/assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: appUrl + "/fail"
});
$locationProvider.html5Mode(true);
});
That way the knowledge of the application base URL lives in one place — server-side (which makes sense as only the server is in a position to truly know, if you think about it).
In your specific case, if the application base URL is implicit in the URL structure, you could calculate the following client-side:
var appUrl = window.location.pathname.match(/^\/New\/.*\/App/);
Needs work, but you get the idea. Then you can set up the route provider exactly as above.