I have set up a route as follows in my AngularJS app.
audit.config(["$routeProvider",function($routeProvider){
$routeProvider
.when('/AuditData/:auditCode', {
templateUrl: 'templ/AuditData.html',
controller: 'AuditDataController'
})
.when('/', {
templateUrl: 'templ/AuditSelect.html',
controller: 'AuditSelectController'
})
.when('/AuditSetup', {
templateUrl: 'templ/AuditSetup.html',
controller: 'AuditSetupController'
}}]);
The routing works as expected. The user is shown a list of audit codes in AuditSelect that are loaded from a REST service. Each item in the list is to be a link to the data associated with that code, i.e.: #/AuditData/:auditCode, <a href="#/AuditData/code123">.
(templ/AuditSelect.html):
<div>
<table>
<tr>
<th>Audit Code</th>
<th>Description</th>
</tr>
<tr ng-repeat="auditCode in auditCodes">
<td> {{auditCode.auditCode}}</td>
<td>{{auditCode.description}}</td>
</tr>
</table>
</div>
My problem is that when the users clicks on the link, they are taken back to '/' and not '/AuditData/:auditCode'.
Update:
I found what was wrong :-) I was missing a bang in the href in my template. I've also switched to using ng-href (which didn't work without the bang either, but does with it)
<td><a ng-href="#!/AuditData/{{auditCode.auditCode}}">{{auditCode.auditCode}}</a></td>
Related
can someone help me with this nested views in angular js.
I use this dot notation
$stateProvider
.state('contacts/:id', {
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
}
})
.state('contacts/:id.list/:id', {
templateUrl: 'contacts.list.html'
});
function MainCtrl($state){
$state.transitionTo('contacts/:id.list/:id' );
}
In html I call state change also like this
<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>
But always I get
angular.js:12477 Error: Could not resolve 'contact/2.list/2' from state 'contact/:id'
Thnx
EDIT:
I make a change like #Maxim Shoustin answered. Now state changed, but in child navigation when I click on item, parent ui-view is full refreshed (child navigation and ui-view) not only child
now my state looks like this
.state('client', {
url: '/client/info/:itemID',
templateUrl: 'clientInfo.html',
controller: 'detailControllerClient as vm',
})
.state('client.detail', {
url: '/detail/:itemID',
templateUrl: 'itemInfoById.html',
controller: 'detailControllerClient as vm',
})
And html is here. (infoDisplay.html is parent view inside index.html. This ui-view in code bellow is child view (client.detail))
infoDisplay.html
<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12">
<table class="table-hover">
<thead>
<tr>
<th>item ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in clientDetail">
<td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>
You cannot use id.list with id because Angular determines like duplicated name id in pattern. But id_list is ok. For example
See ui-sref Docs
Where state is:
.state('contacts', {
url: '/contacts/:id_list/:id',
templateUrl: 'contacts.html'
})
and HTML:
<a ui-sref="contacts({'id_list': value.id, 'id': value.id})" >contacts</a>
Demo Plunker
I am trying pass id in the url so that it can be use by other page more specifically the detail page but i keep getting nothing. the url is going to the correct route but the id is not getting passed in. i have no idea what i'm doing wrong.
here my app.js file:
$stateProvider.state('contact', {
url: '/contact',
templateUrl: 'templates/contact.html',
controller: 'mainController'
});
$stateProvider.state('contact.detail', {
url: '/detail/:id',
templateUrl: 'templates/contact.detail.html',
controller: 'detailController'
});
and here is my controller file:
myApp.controller('detailController', ['$scope', '$stateParams',
function ($scope, $stateParams) {
'use strict';
$scope.peoples = $scope.peoples[$stateParams.id];
}]);
and here is my contact file:
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-striped">
<thead>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="person in peoples">
<td><a ui-sref="contact.detail({id: person.id})">{{person.firstname}}</a></td>
<td>{{person.lastname}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div ui-view></div>
</div>
</div>
There is a working example
One thing is:
searching with indexer, e.g. $scope.peoples[someIdValue] will not find by ID but by position (index)
The second point would be:
do not re-assign a reference $scope.peoples with new value (and lose that reference)
So, this should be the fix (using lodash to find person)
.controller('detailController', ['$scope', '$stateParams',
function($scope, $stateParams) {
//$scope.peoples = $scope.peoples[$stateParams.id];
$scope.person = _.find($scope.peoples, {id: $stateParams.id});
}])
Check that all in action here
I have an AngularJS Application which uses ngRoute to handle the routing of the app. The routing itself is working (the URL is being redirected to the correct page and the correct partial is open) however, I cannot retrieve the item which I need in the second page.
The first page lets you search for a list of documents (dummy at the moment but will eventually link to an API). The list items are clickable and will route you to the second page where the details of the document are listed.
I will outline the way I am attempting to achieve this at the moment but I am open to suggestions if anyone has ideas about how this solution can be improved.
app.js
angular.module("app", ["ngRoute", "ngAnimate"])
.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "Views/main.html",
controller: "MainController"
})
.when("/document/:id", {
templateUrl: "Views/document.html",
controller: "DocumentController"
})
.otherwise({redirectTo: "/main"});
});
main.html
<link rel="stylesheet" href="Stylesheets/main.css" type="text/css">
<div id="docSearchPanel" class="col-xs-12">
<ng-include src="'Views/Partials/documentSearchForm.html'"></ng-include>
</div>
<div id="formSearchResultsArea">
<div id="documentsFoundHeader">Documents Found</div>
<div id="documentsTableContainer">
<table id="documentsTable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="doc in documents" ng-click="showDocument()">
<td>{{doc.documentID}}</td>
<td>{{doc.documentTitle}}</td>
<td>{{doc.documentStatus}}</td>
</tr>
</tbody>
</table>
</div>
</div>
main.ctrl.js
angular.module("app").controller("MainController", function($scope, $location){
//This is populated by a function I have removed to keep the code simple
$scope.documents = []
$scope.showDocument = function(){
$scope.activeDocument = this.doc;
$location.path("document/"+this.doc.documentID);
};
});
document.html
<form ng-submit="downloadForm()" class="col-xs-12 col-md-6">
<h2>Document Details</h2>
<div class="row">
<h3>{{activeDocument.documentTitle}}</h3>
</div>
<div class="row" ng-repeat="field in selected.fields">
<div class="form-group">
<div class="document-attribute-header col-xs-5">{{field.key}}</div>
<div class="document-attribute-value col-xs-7">{{field.val}}</div>
</div>
</div>
</form>
document.ctrl.js
angular.module("app").controller("DocumentController", function($scope, $location, $routeParams){
$scope.activeDocument = getActiveDocument($routeParams.id);
function getActiveDocument(id){
for (var d in $scope.documents){
var doc = $scope.documents[d];
if (doc.documentID == id)
return doc;
}
}
});
The $scope-objects in the two controllers are not the same. You either make "documents" a member of the $rootScope (which you would need to inject in both controllers) or you make a documents-service which you inject.
Hope, that helped.
I have a searchbox , list of items , when I click on each item it will take me to the item info tempate.
right now in my below code the searchbox is inside the items.html and it only appears in there meaning it does not appear when i am on the intem.html template viewing the info .
Can you assist me in keeping my searchbox view-able in all pages and outside the ng-view? and yet the items list will not appear when I am viewing an item info but the searchbox appears . but when I search , the ng-view will show the search results in this ng-view instead of the item info ?
This is the current code :
items.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/items', {
templateUrl: 'items.html',
controller: 'ItemsController',
//some API code happens here to get the search results list
}
})
.when('/items/:id', {
templateUrl: 'item.html',
controller: 'ItemController',
//some API code happens here to get the info
}
}
})
.otherwise({
redirectTo: '/items'
});
<div class="container">
<hr>
<div ng-view></div>
</div>
<!--items.html-->
<input class="form-control" type="text" placeholder="Search ..." ng-model="search" >
<table>
<tr ng-repeat="item in items | filter:search">
<td><a ng-href="#/items/{{item.id}}" ></a>
<td> {{ item.title }}</td>
</tr>
</table>
<!-- item.html>
Here's my route...
angular.module('ng').
config(function ($routeProvider) {
$routeProvider.
when('/User_View', { templateUrl: '/rest/tbot/run/User_View' });
});
In the template it has the following...
<div ng-controller="TMUser">
TMUser is defined in the template in a script block. But the code in the controller doesn't appear to run. Why is this?
The controller shouldn't be defined in the template file. I don't think Angular can know about it and load it that way. Define it in a code file that will be executed before the route change happens.
You can also specify the controller in the routeProvider configuration object, like:
when('/User_View', { templateUrl: '/rest/tbot/run/User_View', controller:'TMUser' });
This fiddle demonstrates a very simple example (source)
Above answer is correct.
But i achived the same thing using ng-include and ng-hide, what exactly ng-view and routing does.
I have created a partial page without controller and included that in parent page and made that partial page hidden after a button click i am just displaying the page.
Routing has there on benifit. you can pass the paramter and change the view accordingly ang browser history.
here is my page conatins below code inside a child controller.
<span ng-include="'/PartialPages/ChangeDetails.htm'"></span>
which refers my parital page
<div id="ChangeInfo" ng-show="datashow">
<table width="100%">
<thead>
<tr>
<th>File Name</th>
<th>File Create Date</th>
<th>File Modified Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in FilesDetails" ng-class="{TableStrip : ($index % 2)}">
<td>{{file.FileName}}</td>
<td>{{file.CreateDate}}</td>
<td>{{file.ModifiedDate}}</td>
</tr>
</tbody>
</table>
<hr />
</div>
and the controller code
var deploymentVerifierModule = angular.module("DeploymentVerifierApp", ['DeploymentServiceModule']);
deploymentVerifierModule.controller("DeploymentVerifierCntrl", function ($scope, DeploymentService) {
$scope.datashow = false;
$scope.PleaseWait = false;
$scope.VerifyChange = function () {
//Get the Change ticket number from textbox
$scope.PleaseWait = true;
var changeticketnum = document.getElementById("ChangeNumber").value;
DeploymentService.GetChangeDetails(changeticketnum).then(function (data) {
$scope.FilesDetails = angular.fromJson(data);
$scope.PleaseWait = false;
$scope.datashow = true;
}, function (error) { });
};
});
still i did not get some of your point why do you want controller to be in template. and templateurl property contains the extenstion of page also.