I am using AngularJs to create a SPA on top of the ASP MVC framework. I had everything working great until I enabled HTML5 mode to produce nicer URLs. Now images are not being loaded.
It seems like any requests to my /Images folder are not making it to the server. I have used Fidler to check the traffic and can see all the requests for the partials but nothing for the images.
Here is my AngularJs routes
$stateProvider.
state({
name: 'home',
url: '/',
templateUrl: '/app/public/partials/index.html'
}).
state({
name: 'infoprivacy',
url: '/info/privacy',
templateUrl: '/app/public/partials/info/privacy.html'
}).
state({
name: 'infocookie',
url: '/info/cookie',
templateUrl: '/app/public/partials/info/cookie.html'
}).
state({
name: 'infoterms',
url: '/info/terms',
templateUrl: '/app/public/partials/info/terms.html'
}).
state({
name: 'groups',
url: '/groups',
templateUrl: '/app/public/partials/groups/index.html'
}).
state({
name: 'groupsview',
url: '/groups/view/:id',
templateUrl: '/app/public/partials/groups/view.html'
}).
state({
name: 'jobs',
url: '/jobs',
templateUrl: '/app/public/partials/jobs/index.html',
controllr: 'JobsCtrl'
}).
state({
name: 'jobsview',
url: '/jobs/view/:id',
templateUrl: '/app/public/partials/jobs/view.html'
}).
state({
name: 'jobsnotfound',
url: '/jobs/notfound',
templateUrl: '/app/public/partials/jobs/notfound.html'
}).
state({
name: 'login',
url: '/login',
templateUrl: '/app/public/partials/login.html'
}).
state({
name: 'error',
url: '/error/:errorRef',
templateUrl: '/app/public/partials/error.html'
}).
state({
name: 'cvs',
url: '/cvs',
templateUrl: '/app/public/partials/cvs/index.html'
}).
state({
name: 'cvsedit',
url: '/cvs/edit/:id',
templateUrl: '/app/public/partials/cvs/edit.html'
}).
state({
name: 'cvsedit.withdlg',
url: '/:dlg',
templateUrl: '/app/public/partials/cvs/edit.html'
}).
state({
name: 'profile',
url: '/profile',
templateUrl: '/app/public/partials/profile/index.html'
});
$urlRouterProvider.when('', '/');
$locationProvider.html5Mode(true).hashPrefix('!');
This is the CSS for the background image that is not loading
#menu .item.navProfile {
background: url(/Images/icon-nav-profile.png) right 20px no-repeat;
}
The HTML that includes the menu is loaded using an ng-include
There is an addin for the chrome developer tools called Batarang this will help in debugging Angular JS issues.
Related
I have added to my index.html
I have added $locationProvider to my app.js
When I click on my button it routes me localhost:20498/register correctly now. However whenever I type localhost:20498/register I still get 400 and when I change url to localhost:20498/#/register I get routed to the page correctly. How do I fix this?
my app.js:
var adminPortal = angular.module("adminPortal", [
"ui.router",
'isteven-multi-select',
"ui.bootstrap",
'ngAnimate',
'ui.mask',
]);
adminPortal.config(["$stateProvider", "$urlRouterProvider","$locationProvider", function ($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/",
templateUrl: "js/views/home.html",
controller: "HomeController"
})
.state("register", {
url: "/register",
templateUrl: "js/views/register.html",
controller: "RegisterController"
})
.state("user", {
url: "/user",
abstract: true,
templateUrl: "js/views/user.html",
controller: "UserController"
})
.state("user.settings", {
url: "/settings",
templateUrl: "js/views/user.settings.html",
controller: "UserSettingsController"
})
.state("tracking", {
url: "/tracking",
abstract: true,
templateUrl: "js/views/tracking.html",
controller: "TrackingController"
})
.state("tracking.fullMap", {
url: "/fullMap",
templateUrl: "js/views/tracking.fullMap.html",
controller: "TrackingFullMapController"
})
.state("dispatchOrder", {
url: "/dispatchOrder",
abstract: true,
templateUrl: "js/views/dispatchOrder.html",
controller: "DispatchOrderController"
})
.state("dispatchOrder.edit", {
url: "/edit/:orderId",
templateUrl: "js/views/dispatchOrder.edit.html",
controller: "DispatchOrderEditController"
})
.state("dispatchOrder.search", {
url: "/search",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.tile", {
url: "/searchTile",
templateUrl: "js/views/dispatchOrder.search.tile.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.archive", {
url: "/archive",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.available", {
url: "/available",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.queue", {
url: "/queue",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("hauler", {
url: "/hauler",
abstract: true,
templateUrl: "js/views/hauler.html",
controller: "HaulerController"
})
.state("hauler.edit", {
url: "/edit/:haulerId",
templateUrl: "js/views/hauler.edit.html",
controller: "HaulerEditController"
})
.state("hauler.search", {
url: "/search",
templateUrl: "js/views/hauler.search.html",
controller: "HaulerSearchController"
})
.state("broker", {
url: "/broker",
abstract: true,
templateUrl: "js/views/broker.html",
controller: "BrokerController"
})
.state("broker.edit", {
url: "/edit/:brokerId",
templateUrl: "js/views/broker.edit.html",
controller: "BrokerEditController"
})
.state("broker.search", {
url: "/search",
templateUrl: "js/views/broker.search.html",
controller: "BrokerSearchController"
});
$locationProvider.html5Mode(true);
}])
please help!
Set $locationProvider.html5Mode(true);. Also for relative link set <base href="/"> in index.html.
Try to read official about location doc.
I'm using the ui-sref for making a link, but it's not respond anything
Here's the code for the ui-sref
<a class="col col-40" ng-repeat="table in tables" style="background:{{table.warna}}" ui-sref="app.go({tableID:table.fstRoomNo})">{{table.fstRoomName}}<br/>{{table.fsiStatus}}</a>
and here the app.js config section
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/auth/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app/side-menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
templateUrl: "views/app/home.html",
controller: 'HomeCtrl'
})
.state('app.go', {
url: "/go/:tableID",
views: {
'menuContent': {
controller: 'GoCtrl'
}
},
resolve: {
detail_data: function(TabelService, $ionicLoading, $stateParams) {
$ionicLoading.show({
template: 'Loading table status ...'
});
//alert($stateParams.tableID);
var tableID = $stateParams.tableID;
return TabelService.getDetailTable(tableID);
}
}
});
$urlRouterProvider.otherwise('/login');
})
Posting an answer after the comment above solved the issue.
Regarding the issue with the routing, it is probably because of the spelling error below.
resolve: {
detail_data: function(TabelService, $ionicLoading, $stateParams) {
$ionicLoading.show({
template: 'Loading table status ...'
});
//alert($stateParams.tableID);
var tableID = $stateParams.tableID;
return TabelService.getDetailTable(tableID);
}
}
Where TabelService should be spelled as TableService
i have one issue regarding redirecting path in angular.js.I am explaining my code below.
profileController.js:
if($('#addProfileData')[0].defaultValue=='Update'){
var updatedata={'colg_name':$scope.colgname,'address':$scope.address,'cont_no':$scope.contno,'profile_id':id};
console.log('userupdate',userdata);
$http({
method: 'POST',
url: "php/profile/updateProfileData.php",
data: updatedata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data);
$location.path('.profile');
},function errorCallback(response) {
alert(response.data);
});
}
}
here i am setting path to profile page inside success callback function.But it is redirecting to the root page after update the data.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: '/',
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
.state('dashboard.profile', {
url: '/profile?p_i',
templateUrl: 'dashboardview/profile.html',
controller: 'profileController'
})
.state('dashboard.dept', {
url: '/dept?d_i',
templateUrl: 'dashboardview/dept.html',
controller: 'deptController'
})
.state('dashboard.princpal', {
url: '/princpal?pr_i',
templateUrl: 'dashboardview/princpal.html',
controller: 'princpalController'
})
.state('dashboard.dept_head', {
url: '/dept_head?dh_i',
templateUrl: 'dashboardview/depthead.html',
controller: 'deptheadController'
})
})
Here after update data successfully it is redirecting to login.html page.I need after updating the data the page should redirect to profile.html page.Please help me.
Try replacing the line of code with $location.path('dashboard.profile');
That would do the need for you
You can use $state instead of $location as follows:
$state.go('dashboard.profile')
Also, don't forget to inject the $state service in your controller.
If you want to use $location.path you need to use the url instead of state.
Here is the code:
$stateProvider.
state('dashboard', {
url: '/dashboard/',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
}).
state('dashboard-home', {
url: '/dashboard/home/',
parent: 'dashboard',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
I have a <div ui-view></div> element in dashboard.client.view.html
When I navigate to /dashboard/home/ nothing comes up. The goal is to have home.client.view.html get injected into dashboard.client.view.html.
There is an example as working plunker
Each Child state inherits url from its Parent. So we shoulduse just
url: '/home',
because parent will add the /dashboard.
The state definition has changed url in our child state:
.state('dashboard', {
url: '/dashboard',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
})
.state('dashboard-home', {
//url: '/dashboard/home/',
url: '/home',
parent: 'dashboard',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
And these links are working as expected:
<a href="#/dashboard">
<a href="#/dashboard/home">
Check it in action here
There is another working example, which shows that we can map states without parent:'', but with dot notation:
state('dashboard', {
url: '/dashboard',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
})
//.state('dashboard-home', {
.state('dashboard.home', {
//url: '/dashboard/home/',
url: '/home',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
You can observe it here
I am trying to use satellizer to authorize with a Google account. When I click login, a popup appears showing this:
Invalid parameter
Invalid parameter value for redirect_uri: Missing authority: file://
Request Details:
scope=openid profile email
response_type=code
redirect_uri=file://
display=popup
client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
What am I doing wrong?
Update 1: My Source Code
index.html
<script src="lib/satellizer/satellizer.js"></script>
app.js
.config(function($stateProvider, $urlRouterProvider,$authProvider) {
$authProvider.google({
clientId: 'xxxxxxxxxx.apps.googleusercontent.com'
});
$stateProvider
.state('app', {
url: "/app",
abstract: true,
controller: 'AppController'
})
.state('login', {
url: "/login",
templateUrl: "views/login.html",
controller: 'LoginController'
});
$urlRouterProvider.otherwise('/login');
})
and loginController.js
.controller('LoginController', function($scope,$auth) {
$scope.authenticate = function(provider) {
$auth.authenticate(provider);
};
});