I try to define stateParams in the controller, but it returns me an empty object {}
My app.js:
angular.module('testApp', ['ui.router','ngResource'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'views/header.html'
},
'messages': {
templateUrl : 'views/messages.html',
controller : 'MessageController'
},
'chat': {
templateUrl : 'views/chat.html',
controller : 'ChatController'
},
'footer': {
templateUrl : 'views/footer.html'
}
}
})
.state('app.chat', {
url: ':id'
});
$urlRouterProvider.otherwise('/');
})
My controller.js:
angular.module('testApp')
.controller('IndexController', ['$scope', '$stateParams', function($scope,$stateParams) {
$scope.chosenMessage = $stateParams;
}]);
And my template:
<div ui-view="messages" class="col-xs-6"></div>
<div ui-view="chat" class="col-xs-6"></div>
I need an id from StateParams to define choosen message and chat content for the message.
The solution:
I have defined $state instead of $stateParams, and check for $state.params.id to get current state.
Related
Currently I am able to add routing mechanism in AngularJs with the following code :
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/login', {
templateUrl : '/templates/login.html',
controller : 'login'
});
});
What I need is an url in the format like /app/:appname which should fetch template called /template/:appname.html. I know that the appname can be accessed from controller using :
$routeParams.appname;
But how can I render template based on that parameter ?
You could do this:
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/app/:appname', {
templateUrl : '/templates/app-template.html',
controller : 'AppCtrl',
resolve: {
appPath: function ($route) {
return $route.current.params.appname;
}
}
})
});
in AppCtrl,
App.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = [
'$scope'
'appPath'
];
function AppCtrl($scope, appPath) {
$scope.template = appPath + '.html';
}
in app-template.html, use ng-include as such
<div ng-include src="template"></div>
Hope this helps.
templateUrl can be use as function which returns a url.
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/:appname',{
templateUrl: function(params){
return "templates/"+params.appname +".html"
},
controller: 'Ctrl'
});
});
My $stateProvider:
$stateProvider
.state('home', {
url: "/home",
views: {
"header": {templateUrl: "templates/header.html"},
"footer": {
templateUrl : "templates/footer.html",
controllerAs : "footerCtrl",
controller : function($scope){
footerCtrl($scope);
}
}
}
})
function footerCtrl($scope){
console.log($scope);
$scope.var1 = "Fulvio";
this.var2 = "Cosco";
}
template Html:
<div>
{{var1}}
{{footerCtrl.var2}}
</div>
If I try to write ng-controller="footerCtrl" into the DIV no data-binding and I get an error, whereas if I don't write it no errors and no data-binding.
Change your code to:
function footerCtrl() {
this.var1 = "Fulvio";
this.var2 = "Cosco";
console.log(this);
}
// Declare the controller
yourAngularModule.controller('footerCtrl', footerCtrl);
$stateProvider
.state('home', {
url: "/home",
views: {
"header": {templateUrl: "templates/header.html"},
"footer": {
templateUrl : "templates/footer.html",
controllerAs : "footer", // The controller alias
controller : "footerCtrl",
}
}
})
Use it like this:
// templates/footer.html
<div>
{{footer.var1}}
{{footer.var2}}
</div>
Like this you have a real controllerAs syntax.
I am unable to change my Url using $state.go but i am getting that page for which i have requested in $state.go , I have also used route.js
angular.module("myApp")
.controller('myController', ['$scope','$state', function ($scope, $state) {
$scope.showDetails = function(data){
if(some true condition){
$state.go("create.preemp");
}
else if(some true condition){
$state.go("create.prepolicy");
}
}
}])
angular.module("myApp")
.config(function ($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/',
templateUrl: 'signin/signin.html',
controller: 'signinController'
})
.state('create.preemp', {
url: '/create.preemp',
templateUrl: 'preemp.html',
controller: 'preempController'
})
.state('create.prepolicy', {
url: '/create.prepolicy',
templateUrl: 'prepolicy.html',
controller: 'prepolicyController'
})
$urlRouterProvider.otherwise('/');
})
??
I'm trying to define a controller within an abstract state so that I can have a single controller for all my views but the functions inside controller are not getting called if the controller is defined outside.
.state('update', {
url : '/update',
abstract: true,
template: '<ui-view/>',
controller : function($scope) { //works
$scope.hello = function() {
alert("hello");
}
}
controller : 'updateController' // Doesn't work
})
.state('update.detail', {
url : '/view/:id',
views : {
"" : {
templateUrl : 'update-detail.html'
},
"header#update.detail" : {
templateUrl : 'header.html'
},
"genericnavigation#update.detail" : {
templateUrl : 'generic-navigation.html'
},
"mnavigation#update.detail" : {
templateUrl : 'mobile-navigation.html'
},
"updatecontent#update.detail" : {
templateUrl : 'update-content.html'
}
}
})
HTML
header.html
<div ng-click="hello();"></div> //Click event doesn't get fired for ( controller : 'updateController' )
app.controller('updateController', ['$scope', '$state', function($state, $scope) {
console.log("inside update")
$scope.hello = function() {
alert("hello");
}
}]);
Look how you defined your controller:
['$scope', '$state', function($state, $scope)
The arguments are not in the right order. So the $state variable is in fact the scope, and the $scope variable is in fact the state.
I am trying to pass parameters to a state in angular.js ui-router like the following:
.state('details', {
url: '/details/:index',
templateUrl: 'views/details.html'
})
The index is being passed through an ng-repeat index
<div ng-repeat="program in programs">
<h2>{{program.name}}</h2>
<p>{{program.description || "No Description"}}</p>
<p><a ui-sref="details({index: $index})">View details ยป</a></p>
</div>
my question is how in details.html do i read the index passed in the url of the state?
Inject $stateParams in your controller.
Example.
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1/2")
$stateProvider
.state('route1', {
url: "/route1/:index",
templateUrl: "route1.html",
controller: function($stateParams, $scope) {
$scope.index = $stateParams.index
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
});