I've a table containing edit button to update the record. When I'm passing single id to ng-href its working fine and opening form page:
Ex: In my index.html table
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}">Edit</a>
But I want to pass one more parameter along with row._id to ng-href like:
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>
Its not working and redirecting to home page.
Here's my controller:
$timeout(function () {
if ($routeParams.id !== undefined) {
$http.get('/providerlist/'+$routeParams.id, {
params:{
id:$routeParams.id,
collectionName:$routeParams.collectionName
}
}).success(function (response) {
alert(response);
$scope.providerList = response;
$scope.id = response['_id'];
});
}
});
app.js for routing:
var ProviderApp = angular.module('ProviderApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'templates/home/index.html',
controller: 'HomeController',
controllerAs: 'home'
})
.when('/provider', {
templateUrl: 'templates/provider/index.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
.when('/provider/:id', {
templateUrl: 'templates/provider/form.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
.otherwise({
redirectTo: '/home'
});
}]);
Here what exactly I want to do is after clicking on edit button it should redirect to form.html with parameter/data of id and collectionName
Any help would be appreciated.
If you want to use multiple params in ng-href you should also update your route url in app.js.
when you used multiple parameters in ng-href but no route matching with this route then worked otherwise route that redirect to home.
you can try it.
in html:
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>
add a route in app.js like
.when('/provider/:id/collectionName/:cName', {
templateUrl: 'templates/provider/form.html',
controller: 'YourController'
});
and in controller need to change like:
$http.get('/providerlist/'+$routeParams.id +'/collectionName/'+ $routeParams.cName)
.success(function (response) {
alert(response);
$scope.providerList = response;
$scope.id = response['_id'];
});
so server side route should be like: /providerlist/:id/collectionName/:cName
The path in ngRoute path can contain named groups starting with a colon and ending with a star like :name* , All characters are eagerly stored in $routeParams under the given name when the route matches.
For example, routes like : /color/:color/largecode/:largecode*/edit
For this sample URL : /color/brown/largecode/code/with/slashes/edit
And extract:
color: brown
largecode: code/with/slashes.
So in your case it the Route will be
.when('/provider/:id*\/collectionName/:collectionName*\', {
templateUrl: 'templates/provider/form.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
This will ensure that even if there are special characters and forward slashes in your resultant href link you are redirected to proper controller and page...
Related
I am trying to make a nested views, here is the plunker https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/. The state changes but the template not changes.
Can anyone correct me what have I done wrong
Goto Link > Second Nested .
On Clicking the button , state changes successfully but the content is not injected. I want the link page content to be replaced by the second-nested content
Try to put abstract:true on the 'father' root like:
var routerApp = angular.module('routerApp', ['ui.router','ncy-angular-breadcrumb']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home/list');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
abstract: true,
templateUrl: './partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: './partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.second', {
url: '/second',
templateUrl: './second.html',
});
});
routerApp.run(['$rootScope', '$state', function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function (event, toState) {
console.log("state Change")
});
}]);
but Remember .. if you put abstract: true .. the url is not a real one .. it's a prefix .. or as i call it .. a father of other routing ..so you can not call it in the .otherwise()
And in your link (and routing) of the second view .. just remove the .list ... so like this:
.state('home.second', { //<-- HERE .. REMOVE THE .list
url: '/second',
templateUrl: './second.html',
});
and in the link:
// AND HERE ..
<a ui-sref="home.second" class="btn btn-danger">Second Nested</a>
Answer is pretty simple - you are initializing 3rd level of nesting states but in ./partial-home-list.html you've didn't add ui-view directive.
Add <ui-view></ui-view> in ./partial-home-list.html and you will see that it works as you defined.
If you want to display home.list.second as separate page then define second state like this
.state('home.second', {
url: '/home/list/second',
templateUrl: 'second.html',
});
Remember to update ui-sref to home.second on button
--
Just to get nested breadcrumb I have not "nice" solution but will work.
-- Partial home list html
<div ng-if="state.current.name != 'home.list.second'">
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
<div ncy-breadcrumb></div>
<a ui-sref="home.list.second" class="btn btn-danger">Second Nested</a>
</div>
<ui-view></ui-view>
App js
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope, $state) {
$scope.state = $state;
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.list.second', {
url: '/second',
templateUrl: 'second.html',
});
If we edit the URL forcefully the web page shows the same content with different URL.
For example http://www.example.com/# and http://www.example.com/#/abc serves same content.
Wants to Redirect edited URL on Home page every time show correct path in URL.
.state('system.confirmation', {
url: '/confirmation',
templateUrl: 'tpls/views/system/confirmation/confirmation.html',
controller: 'ConfirmationController',
controllerAs:'confirmationController',
}
What you're looking for is the otherswise() function. Try adding this in your config function:
$urlRouterProvider.otherwise('/')
This will make sure that all uncaught routes will be redirected to your base URL.
$rootScope.$on('$routeChangeStart', function (event, next, last) {
console.log(event, next, last)// get all info, about current controller
$scope.someFunction();
});
You can do everything with this, before change any routes, this function will call, there you can check for something you are talking about.
try this
App.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/index', {
templateUrl : 'views/site/index.html',
controller : 'indexController'
})
// route for the about page
.when('/about', {
templateUrl : 'views/site/about.html',
controller : 'aboutController'
})
.when('/404', {
templateUrl : 'views/site/404.html',
controller : '404Controller'
})
.when('/signup', {
templateUrl : 'views/site/signup.html',
controller : 'signupController'
})
.when('/forgotPass', {
templateUrl : 'views/site/forgotPassword.html',
controller : 'forgotPassController'
})
.when('/login', {
templateUrl : 'views/site/login.html',
controller : 'loginController'
}).otherwise({
redirectTo: '/404'
});;
});
App.controller('404Controller',['$scope', function($scope) {
$scope.message = 'Page not found 404.';
}]);
i'm investigating if i can have what the title says.
Here's my thought.
Let's assume that i've got this routes:
.when('/', {
templateUrl : 'partials/homepage.html',
})
.when('/test', {
templateUrl : 'partials/test.html',
})
.when('/page/:pageID', {
templateUrl : 'partials/page.html',
})
.when('/page/single/:pageID', {
templateUrl : 'partials/page-single.html',
})
Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just fine.
Now the app is changed and there is only one controller with all the information needed and must remain one controller. And the routes will be something like that:
.when('/:templateName/:pageID', {
controller: 'myCtrl'
})
Can i set from the controller the template id by getting the templateName parameter? And if so how about the last route example /page/single/:pageID? How can i know that there is a second option in route?
I can take the templateName parameter and see it changing with the $routeChangeSuccess method but i cannot find any way to set the template on the fly.
Any ideas?
One solution could be the following one:
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:templateName/:pageId', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.templateName + '.html';
},
controller: 'YourCtrl'
});
}
]);
From the AngularJs 1.3 Documentation:
templateUrl – {string|function()} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
Array.<Object> - route parameters extracted from the current $location.path() by applying the current route
I would move your singleton logic from your controller to a service. Since you didn't provide much code below is an example to give you an idea how it could work.
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/homepage.html',
controller: 'SingleController'
})
.when('/test', {
templateUrl: 'partials/test.html',
controller: 'SingleController'
})
.when('/page/:pageId', {
templateUrl: 'partials/page.html',
controller: 'SingleController'
});
});
app.provider('appState', function() {
this.$get = [function() {
return {
data: {}
};
}];
});
app.controller('SingleController', function ($scope, appState) {
$scope.data = appState.data;
});
But if it must be a singleton controller you actually could use the ng-controller directive before your ng-view directive so it becomes a $rootScope like scope for all your views. After that just add empty function wrappers in your $routeProvider for the controllers.
I have a route like this:
$routeProvider.when('/test/item/:item', {
templateUrl: '/test/test.html'
, controller: 'TestController'
});
Now I want to load different templateUrl depending on different :item value, How do I do it in angularJS?
for example:
$routeProvider.when('/test/item/:1', {
templateUrl: '/test/test1.html'
, controller: 'TestController'
});
$routeProvider.when('/test/item/:2', {
templateUrl: '/test/test2.html'
, controller: 'TestController'
});
Thanks in advance.
templateUrl can be a function as well and you get the first argument will be route params:
So you can do something like this:-
$routeProvider.when('/test/item/:item', {
templateUrl: function(param){
return '/test/test' + param.name + '.html'
/*if(param.name === 'somevalue'){
return someurl;
}
return someotherurl;*/
}
, controller: 'TestController'
});
templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
{Array.} - route parameters extracted from the current $location.path() by applying the current route
I have following three buttons on top of my page with input box underneath it.
<div>
<form>
<div>
Enter Show Name<input type="text" ng-model="showName" />
</div>
</form>
</div>
<div>
<button ng-click="href="/api/renameShow"">Rename Show</button>
<button ng-click="href="/api/updateShow"">Update Show</button>
<button ng-click="href="/api/checkShow"">Check Show</button>
</div>
My module code with routes is
var showApp = angular.module("showApp", ["ngRoute", "ngResource", "ui"]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/',
{
controller: '',
templateUrl: 'main.html'
}).
when('/api/renameShow', { controller: 'renameShowCtrl', templateUrl: '/templates/renameShow.html' }).
when('/api/updateShow', { controller: 'updateShowCtrl', templateUrl: '/templates/updateShow.html' }).
when('/api/checkShow', { controller: 'checkShowCtrl', templateUrl: '/templates/checkShow.html' });
Basically what I am trying to do is that when one of the buttons is clicked the ng-click calls the corrosponding page passing the parameter "showName" with it.
Please let me know how to fix it. Thanks
First of all you need to tell your destination controllers (the page you are referring to) to expect and accept a parameter when we navigate to that page:
$routeProvider.when('/api/renameShow/:showName?', {
controller: 'renameShowCtrl',
templateUrl: '/templates/renameShow.html'
})
The question mark after the parameter denotes that it's an optional parameter. You can achieve the same with anchor tags:
Go to view 2
If you insist on using buttons, write a custom function hooking onto the ng-click of the button, and then pass whatever parameter you want like this from your current controller:
<button ng-click="customNavigate('Mike')">Rename Show</button>
And in the controller:
$scope.customNavigate=function(msg){
$location.path("/view2"+msg)
}
and then in the destination controller:
app.controller("renameShowCtrl",function($scope,$routeParams){
$scope.showName=$routeParams.showName
});
Say we need psoid in sodtl.htm:
In HTML - so.html:
<tr ng-controller="SoController" ng-repeat="x in sos">
<td>{{x.date}}</td>
<td>Dtl</td>
</tr>
In AngularJs - app.js - Config:
app.config(function ($routeProvider)
{
$routeProvider.
when ('/sodtl/:psoid?',
{
templateUrl : 'pages/sodtl.html',
controller : 'SoDtlController'
}
)
});
In Controller - app.js:
app.controller('SoDtlController', function ($scope, $http, $location, $routeParams) {
$scope.message = " $routeParams.psoid = " + $routeParams.psoid;
});
Thus you can use psoid in showing data in sodtl.html page.