When I'm starting my application the following url is opened: http://localhost:8080/#/. What I'm trying to do is to open this url: http://localhost:8080/ when the application is loaded, but I'm not able to achieve this.
I'm using AngularJS and $routeProvider to load content based on url. I'm quite not sure how it works and documentation is not clear to me. This is the code:
'use strict';
angular.module('login', ['login.filters', 'login.services', 'login.directives', 'login.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
Can you help me spot unwanted '#' ?
Angular will load pages dynamically and stores/reads the current page from in the url after the # symbol.
You could try enabled html5 mode for location
How to remove the hash # from the angularjs ng-route
Take a look here: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
This describes how to achieve what you want, as well as educating you on what the # is for and how Angular utilizes it
Related
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
I have followed the instructions from https://github.com/angular-ui/ui-router/wiki/URL-Routing
but cannot get this to work properly.
I have the following:
var application = angular.module('application', ['ui.router']);
application.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/test");
$stateProvider
.state('index', {
url: "/test/:param",
templateUrl: "App/Test.html",
controller: function ($scope, $stateParams) {
alert($stateParams.param);
}
});
$locationProvider.html5Mode(true);
});
Without the /:param this works as you would expect - i.e. the ui-view is correctly populated with Test.html. However, whenever I put the /:param in I get an error. The error is:
GET http://localhost:3880/test/App/Test.html 404 (Not Found)
App is the route of my angular stuff and Test.html should have a path of
http://localhost:3880/App/Test.html
which it does if not trying /:param. However, when trying /:param you can see that there is an extra /test/ in the path before /App.
Please someone help, as I would like to consume the parameter in the controller once it is correct.
You URL for this route should be like this : http://localhost:3880/test/app Where app is param.
Use absolute path for templateUrl. relative url wont work.
templateUrl: "/path/to/App/Test.html",
What's wrong with this AngularJS configuration code?
(function () {
var ip = 'x.x.x.x';
var app = angular.module('cmal', ['controllers', 'directives', 'services', 'ngRoute'])
.constant("baseUrl", "http://" + ip + ":303/angular")
.config( function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', { templateUrl: "index.html"});
$routeProvider.when('/users', { templateUrl: "users.html"});
$routeProvider.otherwise({template: "Sorry, the page you are trying to reach doesn't exist."});
});
})();
EDIT: it's not the slash error. This still doesn't work for me and all i get in the console is "Uncaught object"
EDIT 2: Well i didn't realize you needed to import another js script for routing. But so now that I have done that, I get no error, but none of the routes work.
You are probably not including the separate angular-route script.
Take a look at this answer for more details.
This isn't really an answer, but an alternative solution...I used a separate routing framework.
UI-Router (a link to the egghead tutorial)
I'm very new to Angular and I'm currently building a few test/dummy apps to get my head around the way it works and become more-familiar with SPA's in Angular. However, I've stumbled into an issue when I start adding routes to my application and loading the content via ng-view
$locationProvider doesn't seem to be working correctly because if I go to localhost/sdfsdf then I get cannot GET /sdfsdf when in reality the page should be redirecting to /cocktails.
routes.js
var cocktailApp = angular.module('cocktailApp', ['ngRoute', 'cocktailControllers']);
cocktailApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/cocktails', {
templateUrl: '/partials/cocktail-list.html',
controller: 'cocktailsController'
})
.otherwise({
redirectTo: '/cocktails'
});
$locationProvider.html5mode(true);
}]);
Angular only recognizes anchor URL syntax for URLs pasted directly on the browser. So you have to you try http://localhost/#/sdfsdf instead to make your routing work. Please note that anchor syntax /# was added in previous URL.
We are using Cordova/Phonegap with AngularJs and trying to use routing; the routing isn't working, it's not changing view, and is coming up with the below error in the console:
Failed to load webpage with error: The requested URL was not found on this server.
Our routing controller is:
var app = angular
.module('myApp', [])
.config(function ($routeProvider, $compileProvider) {
$routeProvider.when('/', {
templateUrl: 'index.html'
}).when('/HomeScreen/:id', {
templateUrl: 'app/views/homeScreen.html'
}).otherwise({
redirectTo: '/'
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
When we change .otherwise({ redirectTo: '/HomeScreen/1'}) it works but then the anchors in index.html with the same href (/HomeScreen/1) don't work.
We have tried Html5 mode and hashbang mode with neither working.
We are using angularjs version 1.0.7.
Most likely the issue is that the #/ is getting some of the browsers confused. This might help:
$locationProvider.html5Mode(true);
This will use push state to do the navigation instead.