I am implementing meta tags in angularjs using this code :
.state('home', {
url: "/home/",
metaTags: {
title: 'abc',
description: 'xyz',
keywords: 'xyz',
properties: {
'og:title': abc'
}
},
views : {
"" : {
templateUrl:"/home/home.html",
controller: 'homeCtrl',
controllerAs:'vm',
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('home'); // Resolve promise and load before view
}]
}
})
It is working fine because I fixed the meta tags but, I want to send dynamic data from a controller to mainApp.
In easy way , I want to send dynamic data from homeCtrl to mainApp.
Is there any way to do this in angularjs?
Thanks in advance.
https://docs.angularjs.org/api/ng/service/$rootScope (rootScope usage guide and doc)
https://www.w3schools.com/angular/angular_scopes.asp (Usage examples)
Related
I want to navigate from one url /projects to url /projects/{name} , but I need to resolve resource by $stateParams.id. How can I do it?
Now I have something like this:
$stateProvider.state('project.detail', {
...
url: '/projekt/{name}/{id}',
...
resolve: {
project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
return ProjectService.get({id : $stateParams.id}).$promise;
}]
}
...;
But when I remove {id} from the url: '...', it does not work.
My front end navigation is :
ui-sref="project.detail({name: project.name, id: project.id})"
And I do not want to have url .../projects/hyperloop/5462
but only .../projects/hyperloop
Thank you!
You can use parameters without specifying them in state URLs. You can specify them in params property in state config:
$stateProvider.state('project.detail', {
...
url: '/projekt/{name}',
params: {
id: null
},
resolve: {
project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
return ProjectService.get({id : $stateParams.id}).$promise;
}]
}
...
})
Please check ui-router docs for more details
Because I have to build my urls SEO friendly and because I can't trust the user output. I want redefine this input when the resolve function returns me success.
Example :
The user writes : http//mydomain.com/city/Newcastle upon Tyne .
The API returns me the correct slug : newcastle-upon-tyne-0191 and loads the template.
I want reverse the user inputs with this slug like this before the templates load :
http//mydomain.com/city/newcastle-upon-tyne-0191.
I'm using UI router, it is a way for do this ($state, $stateparams) ?
Here is the part of my router code which work with :
.state('villes.ville', {
url: "/:ville",
cache: false,
parent: 'villes',
templateUrl: "partials/ville.tpl.html",
metaTags: {
title: '{{city.label}} ({{city.zip_code}})',
},
resolve: {
city: function(City, $state, $stateParams){
return City.get({
slug: $stateParams.ville,
shape: true,
details: true
}).$promise.then(
function(data){ return data },
function(error){ $state.go('/404') });
}
},
controller : 'villeCtrl'
})
I am using ui-router in the following format to load a directive. the controller is not specified in the state but inside the directive itself.
.state('app.main', {
url: '/main',
template: '<my-directive>',
data: {
dataName1: 'dataVal1',
dataName2: 'dataVal2',
}
})
this works well for most cases. however, I am not able to inject a resolve to the directive this way. I have tried the following but keep getting a 'unknown provider' error inside the directive.
.state('app.main', {
resolve: {
simpleObj: function () {
return { value: 'simple!' };
}
},
url: '/main',
template: '<my-directive>',
data: {
dataName1: 'dataVal1',
dataName2: 'dataVal2',
}
})
Is there a way to make the resolve work with this scenerio?
Try the below code:
resolve: {
demoResolve: ['myResolvingService', function(resolver) {
resolver.myValue = 'Foo';
return '`enter code here`Foo';
}]
I am not able set up and maintain an route param. When I set the param. It goes to the correct place. However, if I change the route the content does not change. I tried to make one view object, but home.name state does not render with this approach. I can only get templates to show using two absolute paths.
Could not resolve '#/home/Adam Harvey' from state 'home'
I found a great link https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
To start: I created a simple list with ng-repeat. Here is a shortened example
$scope.iterants =
[
{
name: 'Adam Harvey',
type: 'Hotel',
dates: '01/21/2015-01/22/2015',
location: 'Rockville Maryland',
status: 'Confirmed'
},
{
name: 'Jana Harvey',
type: 'Hotel',
dates: '01/21/2015-01/22/2015',
location: 'Rockville Maryland',
status: 'Confirmed'
}
];
In my html template I want to place a ui-sref on top of each person's name as a link to view them on another template.
<td><a ui-sref="itinerary.name{{name:person.details}}">{{person.name}}</a></td>
In my config I set up like so with the controller getting passed the $stateParams
.config(function config( $stateProvider ) {
$stateProvider.state( 'home.name', {
url: '/home/:name',
views: {
"main": {
controller: 'AboutCtrl',
templateUrl: 'src/app/about/about.tpl.html'
}
},
data: {pageTitle:'About'}
});
})
.controller( 'AboutCtrl', function AboutCtrl( $scope, $stateParams ) {
$stateParams.name;
});
In the home controller. I have set up my config and controller like so...
.config(function config( $stateProvider ) {
$stateProvider.state( 'home', {
url: '/home',
views: {
"main#": {
controller: 'HomeCtrl',
templateUrl: 'src/app/home/home.tpl.html'
},
resolve: [{
name: ['$stateParams', function($stateParams){
return $stateParams.name;
}]
}]
},
data:{ pageTitle: 'Home' }
});
})
Updates
The issue is your usage of the ui-sref directive. You have to pass the state name and then parameters as an object, like so:
<td><a ui-sref="home.name({ name: person.name })">{{person.name}}</a></td>
I an trying to list out all the URL's that exist in the stateprovider (angularjs 1.2.26).
given the example below, (very much cut down state list):
angular.module('app')
.config(function ($stateProvider) {
$stateProvider
.state('app.vendors', {
url: '/vendors',
templateUrl: 'app/vendor/list.html',
controller: 'Vendor.ListController as vm',
})
.state('app.vendor', {
url: '/vendor/{vendorId}',
templateUrl: 'app/vendor/details.html',
controller: 'Vendor.DetailsController as vm',
data: {
subnav: [
{ title: 'Details', icon: 'fa-align-left', state: 'app.vendor', permissions: 'get-vendor', exactStateOnly: true },
{ title: 'Sites', icon: 'fa-archive', state: 'app.vendor.sites', permissions: 'get-site' },
{ title: 'NCRs', icon: 'fa-copy', state: 'app.vendor.ncrs', permissions: 'get-vendor' }
],
requiredPermissions: ['get-vendor']
}
})
.state('app.vendor.sites', {
url: '/sites',
templateUrl: 'app/vendor/site/list.html',
controller: 'Vendor.Site.ListController as vm',
data: {
requiredPermissions: ['get-site']
}
})
.state('app.vendor.site', {
url: '/site/{siteId}',
templateUrl: 'app/vendor/site/details.html',
controller: 'Vendor.Site.DetailsController as vm',
data: {
requiredPermissions: ['get-site']
}
})
.state('app.vendor.ncrs', {
url: '/ncrs',
templateUrl: 'app/vendor/ncr/ncrList.html',
controller: 'Vendor.NCR.NCRListController as vm',
data: {
requiredPermissions: ['get-vendor']
}
});
});
to get to a particular vendor you would use state:
app.vendor({vendorId: 1})
to get to its site
app.vendor.site({vendorId: 1, siteId: 2})
if I pass in the $state object to a controller I can list all the states with state.get().
If I list them the urls only contain the last part (i.e. what is in the config, and relative to its parent). I can use $state.href('app.vendor.site') which will give me almost the whole url, but misses out the parameters. I am trying to find a way at runtime to know what or at least how many parameters it requires.
My goal is to try and create a basic smoke test for every page in our Angular app to ensure it loads something and doesn't through errors in the console. I dont want to have to manually maintain a list of urls with params. (all our params are int IDs so I can simply use "1" in the params to test the url).
The private portion of the state contains params and ownParams objects. You can use a decorator to access those internal variables. See my previous answer regarding exposing the entire internal state object using a decorator: UI-Router $state.$current wrapper for arbitary state
After decorating your state objects, use the $$state() function to retrieve the private portion. Then query the state for its params and generate the href.
angular.forEach($state.get(), function(state) {
var paramKeys = state.$$state().params.$$keys();
var fakeStateParams = {};
angular.forEach(paramKeys, function(key) { fakeStateParams[key] = key; });
console.log($state.href(state, fakeStateParams));
});