I'm suffering a problem with ui-router when I add a wrong segment to the route.
An example... http://xxx.xxxxx.xxx/roles works fine. This is a route defined without parameters. But if I add another segment in the browse http://xxx.xxxxx.xxx/roles/kk the $urlRouteProvider.otherwise('/') does not work and the application is trying to load all web resources (css, html, javascript, etc.) from a route like http://xxx.xxxxx.xxx/roles/app/app.css returning a lot of errors in console.
This code is in my app.config:
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
And this is an example of route definition:
angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('roles', {
url: '/roles',
templateUrl: 'app/modules/admin/roles/index.html',
controller: 'RolesCtrl',
authenticate: true
})
.state('logs', {
url: '/logs',
templateUrl: 'app/modules/admin/logs/index.html',
controller: 'LogsCtrl',
authenticate: true
})
.state('parameters', {
url: '/parameters',
templateUrl: 'app/modules/admin/parameters/parameters.html',
controller: 'ParametersCtrl',
authenticate: true
});
}]);
Any help with this behavior?
Regards
Jose
Not fully sure where is theissue here... but I created working plunker, which should help to see what is needed to see the HTML 5 and ui-router working together. In case that server side is configured properly, this should work out of the box. Please, check this firstly:
How to: Configure your server to work with html5Mode
Now, this would be adjusted state def, to show the deep url nesting:
$stateProvider
.state('roles', {
url: '/roles/:id',
...
})
.state('roles.logs', {
url: '/logs',
...
})
.state('roles.logs.parameters', {
url: '/parameters',
...
});
To make all these call below wroking:
<nav>
roles/11/<br />
roles/22/logs<br />
roles/33/logs/parameters<br />
</nav>
<nav>
<a ui-sref="roles({id:1})">roles </a><br />
<a ui-sref="roles.logs({id:2})">roles.logs</a><br />
<a ui-sref="roles.logs.parameters({id:3})">roles.logs.parameters</a><br />
</nav>
we have to not forget to properly set the base url, in our example:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
...
<base href="/cTRk4o9HRELCQ4OK/" />
But for plunker we should set that dynamically:
<script>
document.write('<base href="'+ document.location.pathname +'" />')
</script>
Check working example here
You also have to define an state that points to the otherwise url, this way UI Routers knows how to handle the default state.
var app = angular.module('demo', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('roles', {
url: '/roles',
templateUrl: 'roles.html'
})
.state('otherwise', {
url: '/',
templateUrl: 'otherwise.html'
})
$urlRouterProvider
.otherwise('/');
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<div ng-app="demo">
<ul>
<li>Roles</li>
<li>Otherwise</li>
<li>Not Found</li>
</ul>
<ui-view></ui-view>
<script type="text/ng-template" id="roles.html">
<h2>Roles Template</h2>
</script>
<script type="text/ng-template" id="otherwise.html">
<h2>Otherwise Template</h2>
</script>
</div>
Related
I am new to Angular JS and stuck in an issue...i dont know what is happening.Please help to fix it.
I have index file and app.js is connected ,app is using ngRoute...see code below.
var app = angular.module('routedapp',['ngRoute']);
//app.config("$routeProvider",function($routeProvider)) also tried this
app.config(function($routeProvider) {
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
app.controller('contactCtrl', function($scope){
$scope.lalteen = function(){
console.log("clicked");
}
})
and have 4 pages... index.html , home.html , post.html and contact.html.
//index.html code
<html>
<head>
<title>Routed</title>
</head>
<body ng-app="routedapp" >
<div>welcome</div>
<div>
<p ng-click="lalteen()">click me</p>
</div>
<!-- views here-->
<div ng-view >
</div>
<script src="vendor/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
initially, when index.html page loaded it shows home.html content in view ,home.html has 3 links to home,post and contact page....when i click any one....it does not change view but keep changing url like:
http://localhost/route/#!/#%2F //for home <a> tag
http://localhost/route/#!/#contact //for contact <a> tag and other like that.
PS: following is structure of my content in post.html, home.html and contact.html looks like...
<div>This is post page</div>
<p><a href="#/">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
I am new...plz dnt mind my long explanition...thanks
UPDATE
OK, so I could figure out what you are trying to do and why your routing is not working.
First revert the change so you will have the link section as per your original format:
<div>This is post page</div>
<p><a href="#">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
And then in your script inject the $locationProvider service and set the default route prefix to an empty string.
app.config(function($routeProvider, $locationProvider) {
//note that this line does the magic ;)
$locationProvider.hashPrefix('');
//normal routing here
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
Created a working plunker for you here.
I have an MVC application with Header and Content using Angularjs.
I have defined an ng-app in Content and load the content pages using $routeProvider. This is working fine.
I have a link in Header from where I want to show a page in Content area - this is outside of the ng-app. How can I do this without setting ng-app at the top ? Also suggest if there is some other way to accomplish the same, as many Master page websites are built around this UI design only.
Below is my code showing Master.cshtml and app.js. Let me know incase I need to provide some more code -
Master.cshtml -
#inherits WebViewPage
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
<title>#ViewBag.PageTitle</title>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angularjs/app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<li><a ng-href="#/headerLinkPage1">View cart</a></li>
</div>
</div>
</nav>
<div class="container-fluid" ng-app="rootApp">
<div ng-view></div>
</div>
</body>
</html>
app.js -
var serviceBaseAddress = 'http://localhost/MyWebApi/api/';
var rootApp = angular.module('rootApp', ['ngRoute', 'contentPage1', 'headerLinkPage1'])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/contentPage1', {
templateUrl: '../ContentPage1/Index'
}).
when('/headerLinkPage1', {
templateUrl: '../HeaderLinkPage1/Index'
}).
otherwise({
redirectTo: '/contentPage1'
});
}]);
If I understand you question correctly, you want modularity in your angular routes, you can use ui router to achieve this, I basically created a main app called app and then two sub apps called app1 and app2, try http://plnkr.co/edit/sk5EmMWQgcIfYlOteWtt , Let me know if thats not what you are looking for
(function() {
angular.module('app1', [])
.config(function($stateProvider) {
$stateProvider
.state('app1', {
url: '/app1',
abstract: true,
template: '<div ui-view="app1View"></div>'
})
.state('app1.child1', {
url: '/child1',
views: {
'app1View' : {
template: '<div>child 1, app 1</div>'
}
}
})
})
})();
(function() {
angular.module('app2', [])
.config(function($stateProvider) {
$stateProvider
.state('app2', {
url: '/app2',
abstract: true,
template: '<div ui-view="app2View"></div>'
})
.state('app2.child1', {
url: '/child1',
views: {
'app2View' : {
template: '<div>child 1, app 2</div>'
}
}
})
})
})();
So this way your sub modules app1 and app2 are completely independent of each other and you can add or remove more sub modules or sub routes within each of these sub modules
ngRoute not working while no errors are reported to console .
given no errors to console, how is it possible to follow execution of ngRoute procedures ?
i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.
index.html has navigation links and ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js defines the router and the controllers :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials simply make use of ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
solved :
my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working .
shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .
the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .
Please check this code
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
Js file
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
first page HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
here is your working code click
Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):
$routeProvider
.when('content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
});
If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors
Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second
your route configuration is not correct, you assume route function is execute for each and every link u click but its not.
so your route function should be like
function router($routeProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'partials/first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
}).
otherwise({
templateUrl: 'partials/default.html'
});
}
note that urls should be like <a href="#/content/first"> // note the slash after #
to match that the routes in route function should be like when('/content/first', { note the leading slash
here is the working Plunker
Define your Routes in routes.js
var route = angular.module('route', ['ngRoute']);
route.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/home", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/product", {
templateUrl: "views/product-info.html"
})
.otherwise({redirectTo :'/'});
});
Attach the router to your Main Module.
angular.module('myApp', ['route']);
Import both the scripts in your index.html
im just starting to learn angular and ioninc to build an app.
I just started a new app with ionic included and made a list of items from a json file. This works perfect, but since im jump into routing i just see a blank page and i don't get my mistake.
this is my index.html:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Spätifinder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="css/ionic.css">
<script src="angular.min.js"></script>
<script src="js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="spaetifinder">
<ion-header-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></ion-header-bar>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
this is ma app.js file:
var app = angular.module('spaetifinder', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
app.controller('StoreController', [ '$http', function($http) {
var store = this;
store.storeList = [ ];
$http.get('http://m.xn--sptifinder-r5a.de/apiv1/jsonp.php?action=list&lat=52.437595&long=12.987900&distance=100').success(function(data){
store.storeList = data;
});
this.loadImage = function(hasImage){
if(hasImage = 0) {
return "http://www.spätifinder.de/images/fotos/no-foto.jpg";
}
else {
return this.ID;
}
};
}]);
and this should be my template for home (home.html)
<!-- our list and list items -->
<ion-list>
<a href="#" class="item item-thumbnail-left" ng-repeat="spaeti in spaetis.storeList">
<img ng-if="spaeti.has_image == 0" ng-src="http://www.spätifinder.de/images/fotos/no-foto.jpg">
<img ng-if="spaeti.has_image == 1" ng-src="http://www.spätifinder.de/images/fotos/{{spaeti.ID}}_crop.jpg">
<h2>{{spaeti.Name}}</h2>
<p>{{spaeti.BusinessHours}}<br>{{spaeti.Street}}, {{spaeti.ZIP}} {{spaeti.City}}</p>
</a>
</ion-list>
Im just don't get it what is wrong with that, maybe you see an mistake there?
thanks in advance
luc
I think that your issue is in your routing configuration. You only define one state at the / URL. You then set your fallback to /home which doesn't exist. You probably want your home state to be located at /home.
EDIT: Scratch that i think i see your problem, you have a ; at the end of your state block, i had to remove mine to get it to work it took me along time last night to figure that our, hope it helps you.
Old answer:
Im not sure maybe this will help but here is mine, the only thing i see wrong with yours is what #Jon7 already pointed out.
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainController'
})
$urlRouterProvider.otherwise('/main');
I had some trouble understanding the routing too. I learned a lot from this Codepen example.
Codepen example routing
You need to add controller and perhaps a view as well...
so from this
.state('home', {
url: '/',
templateUrl: 'home.html'
});
to
.state('home', {
url: '/',
views: { //optional
'viewname':{
templateUrl: 'templates/home.html'
controller: 'StoreController'
}
}
});
Your mistake is the otherwise statement. It should be:
$urlRouterProvider.otherwise('/')
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
template: '<p>Hello, world!</p>'
})
})
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html'
})
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
I am using ui-router for my router. I want to implement i18n and for it I've created the following states
$stateProvider
.state('main', { url: '/:lng', abstract: true, template: '<div ui-view></div>'})
.state('main.index', { url: '/', templateUrl: '/views/index.html'})
.state('main.gallery', { url: '/gallery', templateUrl: '/views/gallery.html', controller: 'GalleryCtrl'})
And created the following links
a(ui-sref='main.index') Home
a(ui-sref='main.gallery') Gallery
However this links look like:
for index //
for gallery //gallery
I have found out that in uiSref directive he cannot inherit params from abstact main state.
Am I doing wrong with states?
Upadate:
I have one problem. I binded params to the scope object. In the ui-sref directive there is a watcher that tracks the params change, but in the handler of the watcher there is the following checking
if (newVal !== params) update(newVal);
However, when I try to debug the params is changing to the new param (I actually don't understand how, because params is assigned only once) and in the if check newVal === params
params = $scope.$eval(attr.params) //something like this
I even tried to use Object.observe on param object but it doesnot trigger before "watch" handler is triggered.
Now, I changed if check to make my code work.
There's nothing wrong with your state definitions from what I gather, but you're not passing any parameters to your ui-sref? Your state main.index & main.gallery still expect you to give it.
Working plunkr: http://plnkr.co/edit/uaII8LkMKoAHnacrLybQ?p=preview (Launch it seperate window to see url changes)
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
<a ui-sref='main.index({lng:5})'>Home</a> <br/>
<a ui-sref='main.gallery({lng:5})'>Gallery</a>
</html>
JS:
// Code goes here
angular.module("app", ["ui.router"]).config(["$stateProvider",
function($stateProvider) {
$stateProvider
.state('main', {
url: '/:lng',
abstract: true,
template: '<div ui-view></div>'
})
.state('main.index', {
url: '/',
template: '<span>Index</span>'
})
.state('main.gallery', {
url: '/gallery',
template: '<span>Gallery</span>',
})
}
]);