I want to navigate from page A to B, so in my page A (history.html) view I did this
<a href="#/history/{{data.id}}">
<li class="item">
{{data.items}}
</li>
</a>
and in my app.js the state is set like this
.state('app.history', {
url: "/history",
views: {
'menuContent': {
templateUrl: "templates/history.html",
controller: 'historyCtrl'
}
}
})
.state('app.history2', {
url: "/history/:id",
views: {
'menuContent': {
templateUrl: "templates/history2.html",
controller: 'history2Ctrl'
}
}
})
So supposedly it should be fine but it navigated to somewhere, what else is needed? Am I miss something? I visit the link manually by adding some numbers at the end, eg http://localhost:8100/#/app/history/123 and it worked just fine.
I solved it by doing this
<div class="list">
<a ng-repeat="data in savedData" href="#/app/history/{{data.id}}">
{{data.items}}
</a>
</div>
which I have no idea why lol
Did you try to use ng-href instead of href?
As I now, href link may be wrong if the angular library doesn't finish loading at the time user click on it.
use ng-href instead:
<a ng-href="{{'#/app/history/'+data.id}}">
<li class="item">
{{data.items}}
</li>
</a>
Also it would be better if you could nest a inside li
<li class="item">
<a ng-href="{{'#/app/history/'+data.id}}">
{{data.items}}
</a>
</li>
Related
I am attempting to have the page go to a div section of the page based on what they click. I have the div for each section id'd with the proper tag. I have done a test where I can load the page and type url.com/services#insertidhere and it will go to the correct location. The issue is when I try to implement it in the state it won't go to the location. It just goes to the page normally even though the URL shown is correct.
HTML Index Snippet
<div ng-repeat="x in blue.services">
<div class="wrapIMG">
<img src="{{x.icon}}" />
<img class="clone" src="{{x.icon}}" />
</div>
<h4>{{x.title}}</h4>
<hr/>
<p>{{x.text}}</p>
<a ui-sref="services({id: x.title})" class="button2">About This</a>
</div>
myapp.js Snippet
app.config(function($stateProvider){
$stateProvider
.state('index', {
url:"/",
templateUrl: 'main.html',
data: {
cssId: 'home'
}
})
.state('services', {
url: "/services/#:id",
templateUrl: 'services.html',
data: {
cssId: 'services'
}
})
});
Services HTML Snippet
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
I believe the issue has to be with .state URL but it shows correctly in the URL but it just isn't going to the location.
Angular uses the # in URLs for page routing (so do many other SPA frameworks).
To anchor the link to a specific id on a page, use the $anchorScroll service.
Example:
<div id="scrollArea" ng-controller="ScrollController">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
<script>
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
</script>
$scope.toPage = function(){$state.go('index');}
Did you try this?
I need some help to implement list and details page.
I have motorList.html page where i am listing all motors as hyperlink retrieved from server (database).
motorList.html
<div>
<ul class="phones">
<li ng-repeat="motor in motors" >
<a href="#/motors/{{motor.Id}}">{{motor.Name}}
</li>
</ul>
</div>
I want when user clicks on any motor link, system should navigate to motorDetails.html page and show the details for clicked/selected motor.
For this i defined my routes as following in app.js
app.js
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/motors', {
templateUrl: 'View/motorlist.html',
controller: 'motorController'
}).
when('/motors/:motorId', {
templateUrl: 'View/motordetail.html',
controller: 'motorDetailsController'
}).
otherwise({
redirectTo: '/motors'
});
}]);
motorDetails.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<ul class="phones">
<li ng-repeat="motor in motors" class="thumbnail">
<p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
</li>
</ul>
</div>
</body>
</html>
motorDetailsController.js
var app = angular.module('myApp', ['ngSanitize', 'ui.select']);
app.controller('motorDetailsController', function ($scope, $routeParams, motorService) {
$scope.motors = null;
$scope.getMotorDetails = function (Id) {
motorService.getByMake(Id)
.success(function (motors) {
$scope.motors = motors;
})
.error(function (error) {
$scope.status = 'Unable to load motor data: ' + error.message;
});
}
});
Problem:
When i click on any motor hyperlink, it does not navigate to motorDetails.html page but url changes e.g. http://localhost:12270/View/motorList.html#/motors/161.
I am new to AngularJs routing and for sure i am missing something here but not sure what is wrong.
Could anyone guide me please.
Thanks
You should add ng-view directive on your page, which will show the template loaded from the $routeProvider by watching the URL. You need to add ng-view directive somewhere in your body.
Additionally you should incorporate the changes suggested by #Dvir.
Markup
<body>
<div>
<ul class="phones">
<li ng-repeat="motor in motors" class="thumbnail">
<p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
</li>
</ul>
</div>
<div ng-view></div>
</body>
Update
Ideally you should have ng-view directive there in motorList.html, which gets loaded(But I'm treating it as the index.html page where all the css & js references are there)
Also you don't need to include the html, head & body tag in partial as its going to treated as partial, So remove body,head & html tag and make it simple by placing required template only.
motorDetails.html
<div>
<ul class="phones">
<li ng-repeat="motor in motors" class="thumbnail">
<p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
</li>
</ul>
</div>
That's because href is a regular attribute and it's not evaluated by angularJs.
To make this expression to be your desired link you have to use ng-href so angularJs will evaulate the expression and assign it to an href html attirbute.
You have to change
href="#/motors/{{motor.Id}}"
to
ng-href="#/motors/{{motor.Id}}"
In addition to get its id. you have to use $routeParams in the controller.
For instance:
var id = $routeParams.motorId
UPDATE
I missed that but #Pankaj Parkar right. You have to use ng-view to make the routeProvider to assign the relevant view to the right placeholder.
How to use ng-view ?
You have to make an element where do you want to make the view appear.
It can be part of the page or all the page.
Put the element wherever you want and you'll understand.
For instance:
<body>
<div id="nav">
</div>
<ng-view>
<!-- this is the place your html template will apear -->
</ng-view>
</body>
Issue is quite simple. I have been trying for hours now but just couldn't get the template to load via angularJS client side routing. Not using any server side routing.
So, used various combinations of paths. If I use "/home" in button href it straight away gives error that it couldn't find "/home". But with "#/home", I don't get that error but it still wouldn't load the template.
Any help would be greatly appreciated.
Created a new plunker: http://plnkr.co/edit/F7KoWbBuwsXOQLRPF0CN?p=preview
Template directory:
Project ---
|
|
CSS
|
|
JS
|
|
templates---
|
|
home.html
JS:
var myApp = angular.module("myApp",['ngRoute']);
myApp.controller('appController',function($scope,$http){
//mytext = 0; instantiating variables without using var gives referencing error due to "use strict";
$scope.angular = angular;
$scope.mytext = "Harsh";
$scope.formSuccess = false;
$http({method:"GET", url:"JS/carousel-data.json"}).
success(function(data) {
$scope.carouselData = angular.fromJson(data);
}).
error(function(data) {
console.log("Error loading images");
});
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html',
controller: 'appController'
})
.when('/edit', {
templateUrl: 'templates/home.html',
controller: 'appController'
});
});
HTML:
<body ng-controller="appController">
<header id="pageHeader" class="col-md-12 col-sm-12 col-xs-12 header">
<nav class="col-md-5 col-sm-6 col-xs-10 menu">
<ul class="nav nav-pills" id="menuLinks">
<li class="dropdown visible-xs">
Sapient <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Home</li>
<li>Edit</li>
</ul>
</li>
<li role="presentation" class="hidden-xs" >Home</li>
<li role="presentation" class="hidden-xs" >Edit</li>
</ul>
</nav>
</header>
<div ng-view></div>
</body>
It's rather unclear how you've set up things? Is the HTML your index or is that your home.html?
Secondly you already declare the controllers of your pages to be appController, no need to define that with the ng-controller directive anymore.
Apart from that you're loading the same template on each href, could it be that you're just seeing the same page like declared?
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html', <---
controller: 'appController' <---
})
.when('/edit', {
templateUrl: 'templates/home.html', <---
controller: '**appController'<--
});
It should be noteworthy that there is a more extensive module for routing. You can find it at ui-router.
I just started changing some code from another person and tried to add a simply html with a controller. My problem is, that my html wont load and if I navigate to it .. the system simply displays: Loading...
here is the html:
<div ng-controller="MxjobdetailCtrl">
<p>this is going to be the detail view</p>
<form name="detailForm" class="css-form" novalidate>
Name:
Referenz:
Zusatzinfo:
IH - Objekt:
</form>
and here is the rather emtpy controller:
angular.module('sipApp')
.controller('MxjobdetailCtrl', function ($scope) {
});
the app.js looks like this:
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: 'HomeCtrl'
})
.state('main', {
url: "/main",
templateUrl: "views/main.html",
controller: "MainCtrl"
})
.state('test',{
url: '/mxjobdetail',
templateURl: "/views/components/mxjobdetail.html",
controller: "MxjobdetailCtrl"
})
.state('bpLogbook', {
url: '/bpLogbook',
templateUrl: 'views/business-processes/bpLogbook.html',
controller: "BpLogbookCtrl"
})
.state('bpLogbook.mxobjectList', {
url: "/mxobjectList",
templateUrl: "views/business-processes/bpLogbook.mxobject.html",
controller: "BpLogbookMxObjectCtrl"
})
.state('bpLogbook.logbook', {
url: "/:mxobjectId",
templateUrl: "../views/components/logbook.html",
controller: "LogbookCtrl"
})
;
})
and the index html looks like:
<div class="sidebar sidebar-fixed" id="sidebar">
<ul class="nav nav-list">
<li ui-sref-active="active"><a ui-sref="home">View Home</a></li>
<li ui-sref-active="active"><a ui-sref="main">View Main</a></li>
<li ui-sref-active="active"><a ui-sref="bpLogbook">Logbuch</a></li>
<li ui-sref-active="active"><a ui-sref="test">DetailView Test</a> </li>
</ul>
</div>
still, if I click on the DetailView Test link, nothing except a "Loading..." is displayed.
Does Anyone have any idea why a simple html with an emtpy controller won't load?
Thanks in advance,
It might be just a typo: note the capital R in your templateURl -- it should be templateUrl.
Also, you don't need the leading slash in your view url, and you don't need the ng-controller in your template, since you already specified the controller in the state definition.
You don't need to define ng-controller inside your html template:
<div>
<p>this is going to be the detail view</p>
<form name="detailForm" class="css-form" novalidate>
Name:
Referenz:
Zusatzinfo:
IH - Objekt:
</form>
....
</div>
Here is the Javascript
function gotoUrl($scope, $location, $http, $window) {
$scope.setRoute = function (route) {
$location.path(route);
};
My code is
<ul class="nav navbar-nav navbar">
<li><a href="#" data-ng-click="setRoute('summary')"><span
class="icon-bar-chart"></span> Summary</a></li>
<li><a href="#
" data-ng-click="setRoute('transactions')"><span
class="icon-reorder"></span>
Transactions</a></li>
<li><a href="#" data-ng-click="setRoute('budgets')"><span
class="icon-calendar"></span>
Budgets</a></li>
</ul>
The routes are configured as
app.config(function ($routeProvider) {
$routeProvider
.when('/summary', {templateUrl: '../static/partials/summary.html', controller: 'SummaryController'})
.when('/transactions', { templateUrl: '../static/partials/listTransaction.html', controller: 'TransactionsManagerController'})
.when('/profile', {templateUrl: '../static/partials/profile.html', controller: 'ProfileController'})
.when('/new', {templateUrl: '../static/partials/addTransaction.html', controller: 'TransactionAddController'})
.when('/budgets', {templateUrl: '../static/partials/budgets.html'})
.otherwise({redirectTo: '/summary'});
});
When I click on Transactions, it takes me to Summary
When I change the code from <a> to <button>, it works, what is that I am doing wrong here?
http://docs.angularjs.org/api/ng.directive:a
Modifies the default behavior of the html A tag so that the default
action is prevented when the href attribute is empty.
Try setting href="" instead of href="#". If you are using hashbang mode routing, the latter results in a full-page reload, which is what seems to be happening in your case as well. Any link with href="#" that you click will cause your app to fully reload the page and load the default route -- in your case Summary.
You can get rid of gotoUrl function and modify DOM to
<span></span>Transactions
AngularJS will take care of the rest.
change this code segment
<li><a href="#
" data-ng-click="setRoute('transactions')"><span
class="icon-reorder"></span>
Transactions</a></li>
to
<li><a href="/transactions"><span
class="icon-reorder"></span>
Transactions</a></li>