I am new to AngularJS and i am playing a bit with the routes. But the UI Router does not "convert" my URL to he correct href Attribute.
My View:
<a ui-sref="music.detail({postID: post.id})" class="text-ellipsis">{{post.first_name}}</a>
And this is from my router.js
.state('music.detail', {
url: '/{postId}',
templateUrl: 'tpl/music.detail.html'
})
But the HTML Output is still without the ID. {{post.id}} is working fine and returns the ID of the JSON Object.
<a ui-sref="music.detail({postID: post.id})" class="text-ellipsis ng-binding" href="#/music/">Tremaine Stehr</a>
Am i something missing here?
check your html
<a ui-sref="music.detail({postId: post.id})" class="text-ellipsis ng-binding" >Tremaine Stehr</a>
Related
I'm new to angularJS. I'm using angularjs to implement a website. The website has two pages. The first page list all items and if user click on it, it will redirect to detail information page.
I have my routes configure as below:
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/list", {
templateUrl : "list.html",
controller : "listCtrl"
})
.when("/detail/:id"){
templateUrl : "detail.html"
}
});
In the list.html. I use ng-repeat to display a list of items and a listener on to listen mouse click.
<ul class="list-group">
<li class="list-group-item" ng-repeat="i in items">{{i.name}}
<a href="#" ng-click="goToEdit($index)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</li>
</ul>
I want to redirect view to detail information in the ng-click function.
I tried $location.path() but it not working.
$scope.goToEdit = function(index){
console.log($location.path());
$location.path("/detail/" + index);
console.log($location.path());
}
This way won't work.
Even though the second log on console show location.path() has been changed to " /detail/id".
If I add $scope.$apply() after $location.path(); Then I will get a action already in progress error.
Do you have any solution???
Thanks
It might have something to do with use href="#" which is not good when using hash based routing
You could just set the href yourself and don't really need the controller function or ng-click
<a ng-href="#/detail/{{$index}}" >
Note that you should really give each item a unique identifier as $index could change due to using filters in ng-repeat or removing data from array
Also you don't have a controller identified for your second route
I've got an asp.net MVC application and I'm trying to apply mini-spas
My angular js setp:
appNg.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/AccountManager/UserLogin", {
templateUrl: "/App_ng/AccountManager/Views/AccountManagerUserLoginView.html",
controller: "accountManagerUserLoginController",
})
.when("/AccountManager/UserSignup", {
templateUrl: "/App_ng/AccountManager/Views/AccountManagerUserSignupView.html",
controller: "accountManagerUserSignupController",
});
$locationProvider.html5Mode(true);
console.log("Config.Complete: appNg");
});
my baseref in _layoutpage in head tag (at the top)
<base href="/" />
my links on layoutpage:
WORKING:
<i class="fa fa-sign-in"></i> <span>ng UserSignup</span>
<i class="fa fa-sign-in"></i> <span>ng UserLogin</span>
<i class="fa fa-sign-in"></i> <span>CNN.COM</span>
NOT WORKING:
<i class="fa fa-sign-in"></i> <span>ng About2</span>
The first 3 links work as expected, but the last link does not, the address in the browser url bar changes, but the page stays the same.
I want angular to ignore the route and let me call the server to get a new page, so that I can load the new page with embedded the mini-spa related to the new address. Since the address that is not working is not present in the $routeProvider routes, I was hoping that angular would have not filtered the address. How can I solve the issue?
Yes, I know I can use target _blank on the a tag but this can't be done (from my trials), since this will create issues with links that should be filtered by angular when in a specific mini-spa.
I've also read AngularJS - How can I do a redirect with a full page load? without any success.
This one bites me pretty frequently. We use ui-router, but I think ngRoute is the same. Try target="_self" in your anchor tag.
<a target="_"self" href="/AngTestRoute/about2"><i class="fa fa-sign-in"></i> <span>ng About2</span></a>
Glancing at some of my own projects, I think I also use the fully qualified url, and not just the path. So maybe
<a target="_"self" href="http://myserver/mybasepath/AngTestRoute/about2"><i class="fa fa-sign-in"></i> <span>ng About2</span></a>
I have the following state.
.state('categories', {
url: '/categories',
templateUrl: 'categories',
controller: 'CategoriesController',
})
And template url loads:
<div>
<a ui-sref="categories.bob">my link text</a>
</div>
But ui-sref isn't compiled. How is the right way to slove this case ?
--[EDIT]--
I mean html loaded form template is not compiled by AnulgarJS. For example
<a ui-sref="categories.bob">my link text</a>
should be
<a ui-sref="categories.bob" href="#/categories/bob">my link text</a>
I assume you want to pass bob as an optional parameter? If that is the case try the following:
Defining a new state:
.state('categories.name', {
url: '/:name',
templateUrl: 'subcategorytemplate',
controller: 'SubCategoryController',
})
The route:
<div>
<a ui-sref="categories.name({name:"bob"})">my link text</a>
</div>
You will find your route parameter in ui-router's $stateParams service by calling $stateParams.name. For further information look here.
In fact i found my problem. My nasted state url's was wrong.
.state('categories.category', {
url: '/:category',
templateUrl: function($params) {
console.log($params);
return 'categories/' + $params.category;
},
})
But I still don't understend how and why <a ui-sref="someUrl"> are rendered like <a ui-sref="someUrl" href="#>someUrl"> buy if I load html with templateUrl no href attribute is generated. So is there a way to make it generate href attribute too ?
How to load my nested view in parent ui-view ?
I have an Angular (1.2.1) app running UI-router (0.2.13), and the following state structure:
$stateProvider.state('home', {
template: "<div home></div>",
url: '/'
}).state('home.geo', {
url:'/geo/{geo}'
}
Transitioning from parent to child or between children with different {geo} parameter values works as expected. Transitioning from child to parent works - i.e. the contents of the template and $state.current change as expected - but the URL does not update in the browser.
To be clear, an example: I'm in /geo/california and I click a button with ui-sref='home'. I've confirmed that the correct href='#/' has been placed on the button, and clicking it causes the $state to transition back to the home state, but /geo/california remains in my address bar.
What am I missing here?
Update in respose to #UlukBiy's comment: No, home does not have a ui-view in its template. The ui-view is in the template of it's parent: The overall structure is:
<body>
<div app-nav></div>
<div ui-view></div>
</body>
So the home directive gets inserted into the ui-view, but it contains no ui-views of its own. Is that my problem? I'm new to UI-router, and assumed there was some low-level misunderstanding about the role of states vs. directives when I posted this. If so, please help me correct it.
This scenario should be working. There is a working example (click the blue button right-top to run example in separate window, showing the address bar)
I updated your state def a bit:
$stateProvider
.state('home', {
url: "/",
template: 'Home view <hr /> Geo view: <div ui-view></div>',
})
.state('home.geo', {
url:'^/geo/{geo}',
templateUrl: 'tpl.html',
})
All these links do work as expected:
<a href="#/home">
<a href="#/geo/california">
<a href="#/geo/czechia">
<a ui-sref="home">
<a ui-sref="home.geo({geo:'california'})">
<a ui-sref="home.geo({geo:'czech'})">
So, the most important change here is that for a child state we should use this url:
url:'^/geo/{geo}',
instead of the url:'/geo/{geo}'. Check the doc:
Absolute Routes (^)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
Check the working example here
For some reason it does not work as expected for routes with parameters. It does not even render src attribute for such anchors. I made a simple plunk to demonstrate this and here is the code:
<body ng-controller="MainCtrl">
<a ui-sref="categories/foo">category</a>
<a ui-sref="blah">blah</a>
</body>
and routes:
$stateProvider
.state 'blah',
url: 'blah'
.state 'categories',
url: "categories/:name"
First work fine, second - not. Why this happening? What am I doing wrong?
to Navigate to state, with params
ui-sref also takes an state name as function like syntax with object of params(you want to pass to state) as an argument
So replace
<a ui-sref="categories/foo">category</a>
with
<a ui-sref="categories({name:'foo'})">category</a>
you can specify params like this (using the routes you have defined):
<a ui-sref="categories({name:'foo'})">category</a>