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>
Related
I am trying to build a link using routeParams of the route angularJs class. which works pretty well but for some reason it doesn't interpolate my strings.
I have tried the following:
{{username}} as in the controller i set $scope.username = $routeParams.username;
{{ Repo.username }} as the controller is called RepoController.
however both had no result except printing it as a string literal on the screen.my code is as below
App.js
(function() {
var app = angular.module("githubViewer", ["ngRoute"])
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:username", {
templateUrl: "user.html",
controller: "UserController"
})
.when("/repo/:username/:reponame", {
templateUrl: "repo.html",
controller: "RepoController"
})
.otherwise({
redirectTo: "/main"
})
});
}());
RepoController.js
(function() {
var app = angular.module("githubViewer")
var RepoController = function($scope, github, $routeParams) {
$scope.username = $routeParams.username;
$scope.reponame = $routeParams.reponame;
app.controller("RepoController", ["$scope", "github", "$routeParams", RepoController]);
}());
Repo.html
<section>
{{ username }}
<br />
{{ repo.name }}
</section>
There is a plunker available:
https://plnkr.co/edit/oGJJOUfCqW8G7OAXxXGa?p=preview
thanks a lot for any help. Cheers!
There are a couple of syntactic and semantic issues in the Plunkr that may be affecting your actual code.
You have a syntax error in the RepoController.js -- you do not close the RepoController function declaration with }
You are not including <script src=RepoController.js> in index.html
$scope.repo is not an object with a name property. In your template, use reponame instead or you could do $scope.repo = {name: $routeParams.reponame}
I'm trying to get rid of the hashtag that appears in my ui-router URLs. (http://localhost:3000/email doesn't work but http://localhost:3000/#email works. After scouring SO, I haven't found a case that works for me. I'm running locally for now, so I assume I don't need any "Server configuration" and I included "" in my index.html.
(function(angular) {
'use strict';
angular.module('myApp', ['ui.router'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.config([
['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$urlRouterProvider.otherwise('/email');
// PAGES
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
})
// ... the rest...
$locationProvider
.html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
.hashPrefix('!');
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
}]);
You can either do this in your run block:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
And your url's will be changed from domain.com/#foo to domain.com/foo (this requires no explicit base).
...or do this in your run block:
$locationProvider.html5Mode(true);
...and then add this to your html <head>:
<base href="/">
This solution provides the same outcome as the first, except that now there is a specified base.
Perhaps try this code? I think it may be down to one of these reasons.
Config dependencies weren't set correctly (out of order)
That .hasPrefix(!) was put in after a semi-colon.
Also need to assign a base location in your <head> tag using <base href='/'> (or maybe '/email' ?)
angular.module('myApp', ['ui.router'])
.controller('MainController', function ($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$urlRouterProvider.otherwise('/email');
// PAGES
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
});
$locationProvider.html5Mode(true).hashPrefix('!');
$provide.decorator('$sniffer', function ($delegate) {
$delegate.history = false;
return $delegate;
});
});
Apologies, I can't get the code sample to behave.
Did you set base in HTML-file same as follow:
<html>
<head>
<base href="/">
</head>
</html>
and you should remove .hashPrefix('!'); at config, so this code will same here:
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
})
// ... the rest...
$locationProvider
.html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
Your app config will look like this
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: 'url',
controller : 'mainController'
})
});
Use tag in your page head
<base href="abc.com/"/>
This may create problem with following href, will not load the page properly
About Us
To overcome this use target="_self" in anchor tag as follow
About Us
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
There are 2 views with respective controllers.
The links are in View1.Clicking on this link should load View2 and also read the parameters.
This is what I have tried but the alert says - undefined.
View2 can load with/without params - each case having a different workflow.
View1.html:
<div ng-controller="view1ctrl">
<a href="#/view2/pqid/775/cid/4" >Link1</a>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'App/views/view1.html',
controller: 'view1ctrl'
})
.when('/view2', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.when('/view2/:pqid/:cid', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.otherwise({
redirectTo: '/view1'
});
}]);
view2ctrl.js:
app.controller("view2ctrl", ['$scope','$routeParams',function ($scope, $routeParams) {
var init = function () {
alert($routeParams.pqid);
}
init();
}]);
You are nearly there:
.when('/view2/:pqid/:cid'
maps to a URL in this format :
view2/1234/4567
1234 being the pqid and 4567 the cid.
So your routing, I think is working, just change the link to #/view2/775/4.
Or if you want to keep the same link change your routing to:
#/view2/pqid/:pqid/cid/:cid
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