I'm using the following state configuration:
app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider",
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
views: {
'': {
templateUrl: "Scripts/app/common/views/home.html",
controller: 'homeController'
}
},
data: {}
})
...
$locationProvider.html5Mode(true);
}
]);
And some server WebAPI help pages are not working because the following PATHs are used:
/Help/Api
/Help/Api/POST-api-Get-Users
/Help/ResourceModel?modelName=User
etc.
Currently help pages are not working, and I don't want to add to angular the following states:
- url: "/Help"
- url: "/Help/Api"
etc.
Is there a way to simple ignore all angular states started with "/Help*"? I want to have client angular pages and the same time server pages too. And I don't want to have two different master pages (one with angular, and another without).
Related
I am having problems with the ui-sref directive (rarely) when deploying to Heroku. The application is working properly locally. I am using angular 1.6.8, ui-router 1.0 and I cannot figure out how to solve the issue.
My config.js file looks like this:
materialAdmin
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('not-authorised', {
url: '/not-authorised',
templateUrl: '404.html'
})
//------------------------------
// LOGIN
//------------------------------
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
...
$locationProvider
.html5Mode(false)
.hashPrefix('');
}]);
EDIT: I am able to reproduce it locally if I run grunt build in production mode. I am a bit lost right now, but suspecting about the minification of the files.
This are the errors I am getting on the console:
dashboard should be a defined route if you are going to use it with ui-sref=""
I am currently working on a web development project and I am having a problem in implementing UI-router (AngularJS).
I want to set a default state when the page loads and also default state for the child view.
If I use abstract:true method that is not the solution because when I want to again active that state it won't be possible.
Hope this will give you answer to your Question
var App = angular.module('TechdefeatApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/")
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/components/home/homeView.html",
controller:"homeController"
})
.state('member', {
url: "/member/:seo_url",
templateUrl: "app/components/member/memberView.html",
controller:"memberController"
})
.state('category', {
url: "/category/:seo_url",
templateUrl: "app/components/category/categoryView.html",
controller:"categoryController"
})
}]);
you need to use at $urlRouterProvider service,
first inject this service, after that write
$urlRouterProvider.otherwise('/otherwise').
Pay attention that the /otherwise url must be defined on a state as usual:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
good luck!
I am using AngularJS ui-Router and node js.Response is coming as JSON. Normally, the page was rendered properly. If I refresh the same page manually, it displays JSON Data instead of HTML.
Kindly, help me to fix this issue.
angular.module('app.routes',[])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider
.html5Mode({
enabled:true,
requireBase:false
})
.hashPrefix('');
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider.state('/', {
templateUrl: '/views/login.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'views/index.html',
controller: 'AdmCtrl',
})
.state('admin1', {
templateUrl: 'views/index1.html',
controller: 'AdmCtrl1',
})
You have turned on html5Mode routing.
This is a declaration that your internal angular route URLs are the same as your server's URLs.
In practise, it looks like you have actually configured the server to send the data as JSON instead.
You need to change your server side code to serve up HTML documents for those URLs instead of JSON.
Alternatively, turn off html5Mode and go back to hashbangs.
We have an AngularJS SPA, and we have been using Adal.js for authentication. Till now we were handling the routes using $routeProvider (ngRoute module), but due to some recent requirement, we need to move away from the route provider method and adopt $stateProvider (in ui-router). However out authentication mechanism needs to remain similar. Can adal.js work with $stateProvider in the similar fashion as it works with $routeProvider?
We are using requiredADLogin paramter in the routes to specify which routes need Azure AD Authentication. The code looks like below:
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {
$routeProvider
.when('/', {
controller: 'homeCtrl',
templateUrl: '/Templates/home.html',
requireADLogin: true
})
.otherwise({
//template: "Invalid"
redirectTo: '/'
});
On changing to $stateProvider will a code like below be valid:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("dashboard", { url: "/dashboard", templateUrl: "Templates/dashboard.html" })
.state("health", {
parent: "dashboard",
url: "/agent_tier1",
templateUrl: "Templates/health.html",
requireADLogin: true
})
});
Or if we can put the requireADLogin property in the parent state.
adal.js will work with ui-router, requireADLogin should be at every state you want to protect not just in the parent state.
If you are using the component router, ADAL will not work:
https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283
Warning to anyone who is trying to upgrade a low level pre angular 2.0 app to typescript, ADAL will be a challenge.
In my AngularJS app i've made a simple URL configuration by Angular-UI-router:
config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state({
name: 'land',
url: "/",
templateUrl: "main_ang.html",
controller: 'showSomethingCtrl'
})
.state({
name: 'tournaments',
url: "tournaments/",
templateUrl: 'tournaments_list_ang.html',
controller: 'showTournamentsCtrl'
});
$locationProvider.html5Mode(true);
})
First this app was Django based, but right now i want it to be rewritten in terms of Django Rest Framework and AngularJS, that is why i commented out '/tournaments/' URL from Django's urls.py:
urlpatterns = patterns('',
url(r'^$', "chess_tournaments.views.Main", name='main'),
# url(r'^tournaments/$', 'chess_tournaments.views.TournamentsView', name='tournaments'),
# url(r'^tournament/(?P<tournament_id>\d+)/$', 'chess_tournaments.views.TournamentDetailView',
# name='tournament_detail'),
url(r'^tournament_new/$', 'chess_tournaments.views.TournamentDetailView', name='tournament_new'),...
Everything goes well when i navigate to 127.0.0.8000 first and then click proper link with ui-sref="tournaments". But navigating to 127.0.0.8000/tournaments leads to "Page not found (404)" error. I guess i should serve angular's app first to client's browser, but what is the right way to do that?