about 9 years ago
Hello Reader's if you are new Angular JS and you want make dynamic title by it then this blog very helpful to your. By using the title as dynamic you will be free from all the pages with their title, You just need to set it at one place then all the values in it will change from single position. Lets see how to make it. First create a html file and paste the following code in it:-
- <!DOCTYPE html>
- <html>
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
- </head>
- <body ng-app="myapp">
- <div ng-controller="angularexamplebyfindnerd" >
- <h2>Thiis is my dynamic title by angular JS {{SetVar.title}} !</h2>
- </div>
- </body>
- </html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="angularexamplebyfindnerd" >
<h2>Thiis is my dynamic title by angular JS {{SetVar.title}} !</h2>
</div>
</body>
</html>
Now as you can see in the h2 tag we are printing the dynamic title, So it's JS will go like this:-
- <script>
- angular.module("myapp", [])
- .controller("angularexamplebyfindnerd", function($scope) {
- $scope.SetVar= {};
- $scope.SetVar.title = "This is first tutorial of angular js by Findnerd";
- });
- </script>
<script>
angular.module("myapp", [])
.controller("angularexamplebyfindnerd", function($scope) {
$scope.SetVar= {};
$scope.SetVar.title = "This is first tutorial of angular js by Findnerd";
});
</script>
Now when this script will load it will find the controller name "angularexamplebyfindnerd" and the var SetVar will replace the value of title with this:-
So by using this code you make as much as content of your website dynamic. And remember don't forget to link JS in the head which will go like this:-
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)