I am trying to add viewTitle to base view or root web app page, e.g.
Root Page
<div ng-app="app">
{{viewTitle}}
<div ui-view=""></div>
</div>
can I change viewTitle in controllers ?
Controller-1
var myApp = angular.module(app, []);
myApp.controller('ChildController', ['$scope', function($scope) {
// how to update viewTitle here ?
}]);
One solution may be this:
If you use ui-router you can add a title in state: (I use this to translate the title)
.state('login', {
url: '/login',
controller: 'AdminLoginController',
templateUrl: 'app/admin/views/login.html',
title: {
'es': 'Iniciar sesión',
'en': 'Login',
'de': 'Einloggen'
}
})
.state('panelAdmin', {
url: '',
controller: 'AdminHomeController',
templateUrl: 'app/admin/views/panelAdmin.html',
title: {
'es': 'Panel de administración',
'en': 'Control panel',
'de': 'Führungspanel'
}
})
And in $stateChangeStart reload the title:
$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
if (toState.title) {
$rootScope.title = toState.title[$rootScope.cultureLang];
}
});
In index.html:
<title>{{title}}</title>
I think we can use $rootScope for this purpose. Please see below.
html template
<body ng-app="myApp" >
{{viewTitle}}
<div ui-view=""></div>
</div>
</body>
js file
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/',
template: '<h1>From nested view </h1>',
controller: function($rootScope)
{
$rootScope.viewTitle = "home";
}
});
});
Hope it helps
Related
I am new to angular and using routing in my code. In index file i have a menu bar in which i am using concept of routing.
<div class="menuBar">
Home <a href="#!about"
class="menuBarItems">About</a> <a href="#!services"
class="menuBarItems">Services</a> <a href="#!contact"
class="menuBarItems">Contact Us</a>
</div>
<div ng-view></div>
<script>
var app = angular.module("myApp", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl : "home.html"
}).when("/about", {
templateUrl : "about.html"
}).when("/services", {
templateUrl : "services.html"
}).when("/contact", {
templateUrl : "contactus.html"
});
});
</script>
From this i am routing to four different html pages, but with in the home page i want nested routing. Code for home.html is as follows:
<div>
<section class="section1">
<div class="section1Element"
style="border-bottom: 2px solid rgba(0, 0, 0, 0.16);">
London<br>
</div>
<div class="section1Element">
Paris
</div>
</section>
<section class="section2" ng-view></section>
</div>
</div>
<script>
var app = angular.module("myHome", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/london", {
templateUrl : "london.html"
}).when("/paris", {
templateUrl : "paris.html"
});
});
</script>
Here when I am using ng-view in section element it is showing an error of maximum call stack exceeded. I don't know how to fix it. Can anyone help me out in this please?
Hey you are doing it somewhat wrong way, you should not have 2 routes defined, you need to work on nested routes, as far i can infer from your above example. so your code must be modified in a way like this
<script>
var app = angular.module("myApp", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl : "home.html"
}).when("/home/london", {
templateUrl : "london.html"
}).when("/home/paris", {
templateUrl : "paris.html"
}).when("/about", {
templateUrl : "about.html"
}).when("/services", {
templateUrl : "services.html"
}).when("/contact", {
templateUrl : "contactus.html"
});
});
</script>
and then things will work as expected.
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider',function
($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/Home/London");
$stateProvider
.state("Home", {
url: "/Home",
templateUrl: "Home.html"
})
.state("Home.Paris", {
url: "/Paris",
templateUrl: "Paris.html"
})
.state("Home.London", {
url: "/London",
templateUrl: "London.html"
})
.state("About", {
url: "/About",
templateUrl: "About.html"
})
.state("services", {
url: "/services",
templateUrl: "services.html"
})
.state("contactus", {
url: "/contactus",
templateUrl: "contactus.html"
});
}]);
This is the required js file that is need to be done.
I want to change the page title of my page using routing, so far my title s getting changed but my url is being appended in the title. Any clue as to why?
index.html:
<title ng-bind-html="title ">Website Name</title>
JS file
app.config(function($stateProvider,$urlRouterProvider) {
.state('dashboard', {
url: "/dashboard",
templateUrl: "partials/content/dashboard.html",
controller: "dashboardCtrl"
})
});
app.run(function ($rootScope, $state, $stateParams) {
//set it here
$rootScope.title = $state.current.title;
});
Use $routeChangeSuccess .
app.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
Then in Html , Use ng-bind
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title ng-bind="'myApp — ' + title">myApp</title>
Fore more reference read - How to dynamically change header based on AngularJS partial view? or How to set page title with Angular
Just put it into data:
app.config(function($stateProvider,$urlRouterProvider) {
.state('dashboard', {
url: "/dashboard",
templateUrl: "partials/content/dashboard.html",
controller: "dashboardCtrl",
data: {
title: 'Dashboard title'
}
}) });
You need to use the title property for the when function of $routeProvider, like so:
var module = angular.module('yourApp.routes', []);
module.config([
'$routeProvider', function ($routeProvider) {
$routeProvider
.when('/dashboard', {
title: 'Dashboard',
templateUrl: "partials/content/dashboard.html",
controller: "dashboardCtrl"
})
}
]);
return module;
Title can be accessed in $scope or in a view:
<h1 data-ng-bind="::title"></h1>
I would to make something like this:
.state('tabs.order', {
url: "/order/:orderId",
views: {
'orders-tab': {
templateUrl: "templates/orderDetail.html",
controller: 'OrderDetailController'
},
'orders-all-tab': {
templateUrl: "templates/orderDetail.html",
controller: 'OrderDetailController'
}
}
})
then in my view i would to put a conditional ui-sref in which i can choose the tab to be addressed; something like this:
ui-sref="tabs.order({orderId:order.ID}, <orders-tab or orders-all-tab?>)"
would this be possible?
Thanks
Well, I don't think there is any way yet to specify the view in ui-sref, but here is a starting point which I hope it will help you..
Firstly, the routes:
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/order/all-orders");
$stateProvider
.state("order", { abtract: true, url:"/order", templateUrl:"main.html" })
.state("order.orderTab", { url: "/order-details", templateUrl: "orderDetails.html" })
.state("order.orderAllTab", { url: "/all-orders", templateUrl: "allOrders.html" });
});
Then, define your main page (Orders and Order Details) [main.html]
<div ng-controller="mainController">
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
<h2>View:</h2>
<div ui-view></div>
</div>
And the page controller to specify the tab data:
app.controller("mainController", function($rootScope, $scope, $state) {
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.tabs = [
{ heading: "Order", route:"order.orderTab", active:true },
{ heading: "All Orders", route:"order.orderAllTab", active:false },
];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
});
All you have to do next is to include the orderID.
Here is a demo
i'm trying to make an app where the first time you use it I save some information locally. My purpose is that when the next times a person open the app it will be shown another page.
The problem is that I don't know how to load a simple page (not a part like a template) from my controller function.
Here my html
<body ng-app="starter" ng-controller="MainCtrl">
<ion-content class="center" [....]
<button class="button button-calm button-full button-clear button-large" ng-click="saveAll(name, job)">
<span style="font-size: 1.4em;">start</span>
</button>
</ion-content>
</body>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: "/home",
controller: "HomeCtrl",
template: "<h1>Home page</h1>"
})
$urlRouterProvider.otherwise('/first')
})
.controller('MainCtrl', function($scope, $localstorage, $location) {
$scope.setName = function(name) {
if (name) {
$localstorage.set('name', name.toLowerCase());
console.log(name);
}
}
$scope.getName = function() {
alert($localstorage.get('name'));
}
$scope.setJob = function(job) {
if (name) {
$localstorage.set('job', job.toLowerCase());
console.log(job);
}
}
$scope.getJob = function() {
alert($localstorage.get('job'));
}
$scope.saveAll = function(name, job) {
if (name) {
$localstorage.set('name', name.toLowerCase());
console.log(name);
}
if (job) {
$localstorage.set('job', job.toLowerCase());
console.log(job);
}
if (name && job) {
$location.path("home");
}
}
})
You can navigate routes using:
$location.path('/home');
or:
$state.go('home');
So.. in your MainCtrl you could put something like this:
$scope.getName = function() {
return $localstorage.get('name');
};
$scope.getJob = function() {
return $localstorage.get('job');
};
var init = function(){
if($scope.getName() && $scope.getJob()){
$location.path('/home');
}
};
init();
UPDATE:
Ionic has ui-router installed by default. ui-router documentation.
Each route accept a templateUrl property. I don't know which is you folder structure so you need to change them to work correctly:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'home/home.html'
})
.state('first', {
url: '/first',
controller: 'FirstCtrl',
templateUrl: 'first/first.html'
})
.state('second', {
url: "/second",
controller: "SecondCtrl",
templateUrl: 'second/second.html'
});
$urlRouterProvider.otherwise('/first');
})
I have an Angular app using the Ui Router for routing purposes. Each time I change the router, I would like to change the header of the page, and it seems like the $stateProvider would be the easiest way to do that. I have something like this for the $stateProvider:
$stateProvider
.state('index', {
url: "/",
views: {
"rightContainer": { templateUrl: "viewA.html" },
},
controller: function ($scope) {
$scope.data.header = "Header 1"
}
})
.state('details', {
url: "/details",
views: {
"rightContainer": { templateUrl: "ViewB.html" },
},
controller: function ($scope) {
$scope.data.header = "Header 2"
}
});
I then want to have the header:
<div data-ng-controller="mainCtrl">
<div class='bg'>{{data.header}}</div>
</div>
You can use data https://github.com/angular-ui/ui-router/wiki#attach-custom-data-to-state-objects
or just an other approach
.run(function ($state,$rootScope$filter,WindowUtils) {
$rootScope.$state = $state;
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
var stateName = toState.name;
//switch
WindowUtils.setTitle(stateName);
});
})
.factory('WindowUtils', function($window) {
return {
setTitle:function(title){
var sep = ' - ';
var current = $window.document.title.split(sep)[0];
$window.document.title = current + sep + title;
}
};
})
The .state object has a data property for exactly what your trying to achieve. Just add data: {header: "Header 1"} to .state like so:
$stateProvider
.state('index', {
url: "/",
views: {
"rightContainer": { templateUrl: "viewA.html" },
},
data: {header: "Header 1"}
})
Edit/Update
To access that data for page titles etc, its best if you use one controller for the index.html <head>, and use $scope.$on to push changes to a $scope.header on route change events. I would recommend having a look at the https://github.com/ngbp/ngbp project boilerplate for a working example.
HTML
https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/index.html
<html ng-app="myApp" ng-controller="AppCtrl">
<head>
<title ng-bind="header"></title>
...
</head>
app.js
https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js
.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if ( angular.isDefined( toState.data.header ) ) {
$scope.header = toState.data.header;
}
});