I want to define a abstract in route provider as we can define it in a state provider to for parent.
.when('/home', {
title: 'home',
templateUrl : 'templates/home.html',
controller : 'HomeController'
})
.when('/about', {
title: 'about',
templateUrl : 'templates/about.html',
controller : 'AboutController'
})
i want to define a (/home) as abstract or is the any way to use a HomeController as a global for entire application.
My controller is :
.controller('HomeCtrl', function($scope, $http, oliveService, $location, $routeParams) {
console.log('home ctrl');
$scope.about_info = function(){
console.log('this is about info');
}
})
.controller('AboutCtrl', function($scope, $http, oliveService, $location, $routeParams) {
console.log('about ctrl');
$scope.about_info = function();
})
is the any way to use a HomeController as a global for entire application?
Yes,you can.
consider the index template :
HTML :
<body ng-view>
<div ng-controller="globalCtrl">
</div>
</body>
and define your controller as usual.
For the ngRoute router there are no abstract states like for uiRouter. Just attach a Controller to the Body Tag for example.
Related
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.
I am trying to bring to my homepage a custom directive which will print me some output.
In the network tab in my devtools I just saw that my controller loads twice.
controller:
var homeController = function($log,leaguesFactory){
var self = this;
self.leagues = [];
leaguesFactory.loadLeagues()
.then(function(leagues){
self.leagues = leagues.data.Competition;
});
self.message= 'test message';
};
directive:
var leaguesTabs = function(){
return {
restrict : 'E',
templateUrl : 'app/home/leagues-tabs.tpl.php',
scope: {
leagues: '='
},
controller: 'homeController',
controllerAs: 'homeCtrl'
};
};
ui-router states:
$stateProvider
.state('home',{
url : '/',
templateUrl : 'app/home/home.tpl.php',
controller : 'homeController',
controllerAs: 'homeCtrl'
})...
I just want to use my homeCtrl in the directive, but it seems that the state provider loads it also and make it load twice. If I remove the controller from the directive then I don't get access to the homeCtrl, if I remove the homeCtrl from the stateprovider than I don't have access in the home.tpl.php
home.tpl.php:
<div>
<leagues-tabs></leagues-tabs>
</div>
any idea?
Actually problem related to next steps:
ui-router start handling url '/'
ui-router create an instance of 'homeController'
ui-router render the view 'app/home/home.tpl.php'
Angular see usage a custom directive - 'leagues-tabs'
'leagues-tabs' directive create an instance of 'homeController'
'leagues-tabs' render the view 'app/home/home.tpl.php'
You can follow any of next possible solutions:
Change controller for 'leagues-tabs' to something special
Remove controller usage from ui-router state definition
You can try this one http://plnkr.co/edit/LG7Wn5OGFrAzIssBFnEE?p=preview
App
var app = angular.module('app', ['ui.router', 'leagueTabs']);
UI Router
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/leagues');
$stateProvider
.state('leagues', {
url: '/leagues',
templateUrl: 'partial-leagues.html',
controller: 'LeaguesController',
controllerAs: 'ctrl'
});
}]);
Controller
app.controller('LeaguesController', ['$http', function($http) {
var self = this;
$http.get('leagues.json').success(function(data){
self.leagues = data;
})
}]);
View
<div>
<league-tabs leagues="ctrl.leagues"></league-tabs>
</div>
Directive
var leagueTabs = angular.module('leagueTabs', []);
leagueTabs.directive('leagueTabs', function(){
return {
restrict : 'E',
templateUrl : 'partial-league-tabs.html',
scope: {
leagues: '='
},
controller: 'LeagueTabsController',
controllerAs: 'leagueTabs'
}
});
leagueTabs.controller('LeagueTabsController', function($scope){
var self = this
$scope.$watch('leagues', function(leagues){
self.leagues = leagues;
})
})
Directive View
<div>
<ul ng-repeat="league in leagueTabs.leagues">
<li>{{league.name}}</li>
</ul>
</div>
I am trying to figure out how to dynamically update meta tags in an angularjs single page application. I have figured out how to do it for the title tag by using:
myApp.run(function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
});
and
<title ng-bind="title">myApp</title>
and
$routeProvider.when('/', {
templateUrl : '/pages/home.html',
controller : 'homeController',
title: 'the home page'
})
But am stumped how to extend this to the meta tags.
I think you can use resolve like this
app.js
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'homeController',
resolve : {
pageTitle : function(){
return {'title':'Home Page Title.'}
}
}
})
});
app.controller('homeController', function($scope, pageTitle){
$scope.title = pageTitle.title
});
home.html
<title ng-model="title"></title>
Here is the working plunker but you need to
I am using ui-router to generate multiple states, views and subviews. it looks like below :
$stateProvider.state('dashboard', {
url : "/dashboard",
controller : function($scope, $filter) {
console.log($scope, '$scope');*/
views : {
"header":{
templateUrl : getTemplate("dashboardHeader"),
controller : function($scope, $filter) {
console.log($scope.location, '$scope');
}
},
"body" : {
templateUrl : getTemplate("dashboardChart"),
controller : function($scope, $filter) {
console.log($scope, '$scope');
}
}
}
}).state('dashboard.insight', {
url : "/:insight",
templateUrl : getTemplate("insight"),
controller : function($scope, $filter) {
console.log($scope, 'Sameer Test');
}
}).state('products', {
url : "/products",
views: {
"header":{
templateUrl: getTemplate("productHeader"),
controller: function($scope, Restangular, $filter, PlatformService){
.......
}
},
"body":{
templateUrl:getTemplate("products"),
controller : function($scope, Restangular, $filter, $route, $routeParams, $location, ngDialog,PlatformService) {
.......
} );
}
}
}
})
here dashboard and products are main views. insight is dynamically binded using ui-sref. i want to move all these a JSON structure so that i can configure which client needs which all states views and controllers. like some may need dashboard some may not.
So i decided to use app.run() to load these configurations. But i am not getting subviews of dashboard and states which are "dashboard.insight" (/:insight). As JSON will have dashboard not dashboard.insight.
How to achieve this.
I have the following setup in my code
.config(function config($stateProvider)
$stateProvider
.state('home', {
url : '/home',
views : {
'main' : {
controller : 'HomeCtrl',
templateUrl : 'home/home.tpl.html'
}
}
})
.state('home.details', {
url : '/details',
views : {
" " : {
template : "<h1>hello</h1>",
controller : function ($scope, $http, $state) {
//do some stuff here
//does not seem to reach code in here
}
}
}
});
})
.controller('HomeCtrl', function ($scope, $http, $state) {
//on a button click do $state.go('.details');
});
When I do this , the button click on my HomeCtrl seems to take me to /home/details but it does not seems to go inside the controller in that particular route at that point. (I checked by putting a break point inside the controller for the details.) Is there something wrong with my setup? I'm trying to do something similar to this sample app shown in the ui-router webpage.
The solution here would in a named-view (not) matching. Here is the working plunker.
We have to place the named ui-view inside of the parent view (or use more precise naming, see for example here)
So, the parent, home template should contain the named ui-view, e.g. nameOtherThanSpace
<div ui-view="nameOtherThanSpace" ></div>
And the child defintion must target that view, the complete snippet is:
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
controller: 'HomeCtrl',
template: '<div>' +
'<h1>hello from parent</h1>' +
'<hr />' +
'<div ui-view="nameOtherThanSpace" ></div>' +
'<div>',
}
}
})
.state('home.details', {
url: '/details',
views: {
"nameOtherThanSpace": {
template: "<h2>hello from a child</h3>",
controller: function($scope, $http, $state) {},
}
}
});
How to use more specific view names:
View Names - Relative vs. Absolute Names
UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc
The working plunker using the name nameOtherThanSpace, instead of " " (space)
Try registering your controller on the app instead of on your $stateProvider. e.g.
var app = angular.module('myApp', []);
app.controller('HomeCtrl', function ($scope, $http, $state) {
//on a button click do $state.go('.details');
});
Update 1:
You should only need to specify a view if you have multiple views in which case the view probably needs to have a name. But you only have one view for that state so I would just do this.
.state('home.details', {
url : '/details'
template : "<h1>hello</h1>",
controller : function ($scope, $http, $state) {
//do some stuff here
//does not seem to reach code in here
}
}