I am using angular ui-router to retrieve a page, but on the documentation, it only shows how to pass in parameters in the url, not the template url.
Is there anyway where it can be passed in the templateUrl?
Below is my code
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="contacts({contactId: 1})">State 1</a>
And the angular config:
myApp.config(function($stateProvider) {
$stateProvider
.state('contacts', {
url: "/states?myParam={contactId}",
templateUrl: "states1.html"
});
});
templateUrl can be a function that takes stateParams parameter:
.state('contacts', {
url: "/states?myParam={contactId}",
templateUrl: function(stateParams) {
return "states" + stateParams.contactId + ".html";
}
})
Why would you want it?
The only reason I can think about is that you want to customize the template on the server-side based on the passed arguments. Which goes against the idea of templates :)
Templates should be generic enough.
Related
I am building a application which has different modules. and two modules can have same pages. So based on url i am making the appropriate ajax call to load data. So I am tring to setup my states in below way:
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController as LoginController'
}).state('logout', {
url: '/logout',
templateUrl: '',
controller: 'LogoutController as LogoutController'
}).state('module', {
url: '/:module',
params: {
module: DataService.getCurrentModule()
}
}).state('module.cover', {
url: '/cover',
templateUrl: 'cover.html',
params: {
module: 'leads'
}
}).state('module.leads', {
url: '/leads',
templateUrl: 'leads.html',
controller: 'LeadsController as ctrl',
abstract: true
})
Given that at the time of login I will fetch all modules and save it in DataService, which is happening. Then after login two things will be done. One navigation urls which i have formatted in below way:
<a href={'#/'+ module.code +"/" + (menu.type|| menu)}>
<i className={classes}></i> <span >{menu.name || menu }</span>
</a>
which is setting the correct url, and second in app.js in "run" I am checking if login is done them I am doing :
$location.path(DataService.getCurrentModule() + "/" + (home.type || home) );
which is also happening, but issue is desired controller and html page is not being loaded. Am I missing something here. Or should I have done things little differently?
Thanks for help in advance.
Avoid href when working with ui.router. To navigate to the required states use:
In HTML: ui-sref="myStateName({param1: 1, param2: 2})"
In Javascript inject the service $state and do: $state.go('myStateName', {param1: 1, param2: 2});
In your case, lets assume that there are 2 modules in an array in the $scope:
$scope.myModules = [{code: 'modA'},{code: 'modB'}];
Now in the HTML, to go to the module.cover state you would do:
<a ui-sref="module.cover({module: myModules[0].code})">My Link</a>
If you want to do it for all modules, put it inside an ng-repeat:
<a ng-repeat="mod in modules" ui-sref="module.cover({module: mod.code})">My Link</a>
Also, for state configuration, consider:
ALL STATES NEED A TEMPLATE: even if they are abstract states, they require a template to work properly. If the parent state doesn't have a template, not even one of its childs is gonna show. In this case, the state module doesn't have a template, so it will never work. define a template for it as simple as template: '<div ui-view></div>'
When you define a parameter in the URL, there's no need to define it again in with a params property. That is used only when you need parameters that you don't want to show in the URL
Well, I've implemented angularJS and I am calling different views which is being handled by $routeProvider . The problem is that for eg:
$routeProvider.
when('/prodDetails/:prodID', {
templateUrl: 'templates/productDetails.html',
controller: 'ProductController'
}).
Now, if I click on:
<a ng-href="#prodDetails/{{ prod.id }}">View Product</a>
The browser url will show prod.id in the url tab. How can I manipulate url to hide sensitive info in it.
Use Angular UI Router. it will solve your problem without doing anything. you can then pass parameter using params object given by angular-ui-router.
You can use angular ui router
You can achieve that by doing:
$stateProvider.
state('productDetail', {
url: '/prodDetails',
templateUrl: 'templates/productDetails.html',
controller: 'ProductController',
params: {
productId: 'defaultId'
}
})
And in the html:
<a ui-sref="productDetail({productId: prod.id})">View Product</a>
You can have access to the productId from the controller with the service $stateParams.
EDIT:
Let's say you have a encodeId and a decodeId functions:
<a ui-sref="productDetail({productId: encodeId(prod.id)})">View Product</a>
and in the controller:
app.controller(function($stateParams) {
var id = decodeId($stateParams.productId);
});
I had my old code which worked just fine:
$urlRouterProvider.otherwise('/next');
$stateProvider
.state('next', {
url: '/next',
templateUrl: 'partials/next.html',
controller: function($scope, $state){
}
});
But then I got the brilliant idea to better organize my code, so I ended up with:
$urlRouterProvider.otherwise('/next');
$stateProvider
.state('app', {
abstract: true
})
.state('app.next', {
url: '/next',
templateUrl: 'partials/next.html',
controller: function($scope, $state){
}
});
Which is basically the same thing, but uses a dot notation, and an abstract state (not that it matters; even if I remove the abstract state, it still won't work).
The app does take me to /next, however the page is blank (only the base template is shown, not the content of /partials/next.html. The request for it is made, but it's simply not shown.
The relevant HTML code is just:
<div class="container" ui-view>
</div>
I was (somewhat) following the tutorial from https://scotch.io/tutorials/angular-routing-using-ui-router if that helps anything.
What am I doing wrong?
add in abstract state property:
template : '<div ui-view></div>'
It should looks like:
$urlRouterProvider.otherwise('/next');
$stateProvider
.state('app', {
abstract: true,
template : '<div ui-view></div>'
})
.state('app.next', {
url: '/next',
templateUrl: 'partials/next.html',
controller: function($scope, $state){
}
});
of course you can use templateUrl intead template. It is also very usefull to use layout templates in abstract state.
edit to answer comment:
Can I ask why this is necessary?
It is necessary, because angular run first abstract state, and its template. And then your actual state. But angular needs to know where put content of normal state template in parent abstract state template.
This template : '<div ui-view></div>' means that abstract state has simple template with only position of normal state template.
I am trying to create a link in my template angularjs by doing something like:
<a ng-href="/#!/content/[[value.id]]">[[key]]</a>
But I am wondering myself if is possible do something like symfony2 does, example:
routing.yml
home_redirect:
path: /
defaults:
_controller: FrontendBundle:Controller:function
path: /home
permanent: true
options:
expose: true
And using it in your twig template by doing:
one link to home
That is really, really helpful because I don't have to "hardcode" all my routes.
To ensure a proper routing, you can use ui-router.
Here is an exemple on plunker
How this works :
1 - Follow the installation guide on their github
2 - Write your state definition :
app.config(function($stateProvider, $urlRouterProvider){
//If no route match, you'll go to /index
$urlRouterProvider.otherwise('/index');
//my index state
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index2.html',
controller: 'IndexCtrl'
})
//the variable state depending on an url element
.state('hello', {
//you will be able to get name with $stateParams.name
url: '/hello/:name',
templateUrl: 'hello.html',
controller: 'HelloCtrl'
})
});
3 - Write links by their state name :
//add this directive to an html element
//This will go to /index
ui-sref="index"
//This will go to /hello/
ui-sref="hello"
//This will go to /hello/ben
ui-sref="hello({name:'ben'})"
//This will go to /hello/{myname}
ui-sref="hello({name:myname})"
4 - Get the param into your controller :
//inject $stateParams
app.controller('HelloCtrl', function($scope, $stateParams){
$scope.controller = "IndexCtrl";
//get the param name like this
$scope.name = $stateParams.name;
});
Hope it helped. Also keep in mind the ui-router got some really powerful tools such as resolve and nested state/view. You'll probably need theses now or later.
PS : If the plunker don't work, just fork it and save again.
You could do this :
'use strict';
angular.module('AngularModule')
.config(function ($stateProvider) {
$stateProvider
.state('YourStateName', {
url: '/your/url',
views: {
'aViewName': {
templateUrl:'views/components/templates/yourTemplate.html',
controller: 'YourController'
}
},
resolve: {
}
});
});
// then in your controller
angular.module('AngularModule')
.controller('MyController',function($scope, $state){
$scope.goTo = function(){
$state.go('YourStateName');
}
}
);
//in your html make sure the <a> tag is in scope with the 'MyController'
<a ng-click='goTo'>[[key]]</a>
or
you can just do this :
<a ng-href="/your/url"></a>
that way you bypass the controller you can still put logic in the controller that was specified in the state
While using ui-view in AngularJS, I'm trying to use URL parameters inside of nested views.
For entities of a given type, I want to be able to show all of the entities when navigating to the url /entities, but I would also like to see only the entities of a given type if I go to entities/ofcategory/categoryName. Lastly, I also want to be able to navigate to /entities/details/entityName to see the details of one entity.
Is this structure possible?
This is my ui-routercode:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('entities', {
url: '/entities',
templateUrl: 'app/entities/views/entities.html'
})
.state('entities.ofcategory', {
url: '/ofcategory/:categoryName',
templateUrl: 'app/entities/views/entities.ofcategory.html'
}
.state('entities.details', {
url: '/details/:entityName',
templateUrl: 'app/entities/views/entities.details.html'
});
}]);
If I'm navigating to entities/ofcategory/aname or /entities/details/aname I enter the regular entities controller instead of the category or detailsController
One option is to add an abstract state, which serves as a parent to all your entities states. In that case all your urls become relative to this parent state. Please note that you have to define a ui-view in the template of the abstract state, so it could be used for loading the child templates.
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('entities', {
url: '/entities',
abstract: true,
templateUrl: 'app/entities/views/entities.html'
})
.state('entities.all', {
url: '/',
templateUrl: 'app/entities/views/entities.all.html'
})
.state('entities.ofcategory', {
url: '/:categoryName',
templateUrl: 'app/entities/views/entities.ofcategory.html'
}
.state('entities.details', {
url: '/details/:entityName',
templateUrl: 'app/entities/views/entities.details.html'
});
}]);
app/entities/views/entities.html:
<div>
<h1>Entities<h1>
<div ui-view></div>
</div>