Overview

In this article, we will see casesenstivity and inline templates in AngularJS. First we will see, caseInsenstive match and an example. We will be using the same example, which we used while using Demo Application .

For more articles on AngularJS, refer to the links, given below-

Introduction

Here, we will see the casesensitive in AngularJS. Thus, let's get back to our controller i.e our script.js file in it.
  1. var app = angular.module("Demo", ["ngRoute"])
  2. .config(function ($routeProvider, $locationProvider) {
  3. $routeProvider
By default, the routes, which are configured, using config function are case sensitive. Lets see, our whole controller code as-
  1. /// <reference path="angular.min.js" />
  2. /// <reference path="angular-route.min.js" />
  3. var app = angular.module("Demo", ["ngRoute"]).config(function($routeProvider, $locationProvider) {
  4. $routeProvider.when("/home", {
  5. templateUrl: "Templates/home.html",
  6. controller: "homeController as homeCtrl"
  7. }).when("/courses", {
  8. templateUrl: "Templates/courses.html",
  9. controller: "coursesController as coursesCtrl"
  10. }).when("/students", {
  11. templateUrl: "Templates/students.html",
  12. controller: "studentsController as studentsCtrl"
  13. }).when("/students/:id", {
  14. templateUrl: "Templates/StudentDetail.html",
  15. controller: "StudentDetailController as StudentDetailCtrl"
  16. }).otherwise({
  17. redirectTo: "/home"
  18. })
  19. $locationProvider.html5Mode(true);
  20. }).controller("homeController", function() {
  21. this.message = "Home Page";
  22. }).controller("coursesController", function() {
  23. this.courses = ["c#", "SQL", "Oracle"];
  24. }).controller("studentsController", function($http) {
  25. var vm = this;
  26. $http.get("StudentService.asmx/GetAllStudents").then(function(response) {
  27. vm.students = response.data;
  28. })
  29. }).controller("StudentDetailController", function($http, $routeParams) {
  30. var vm = this;
  31. $http({
  32. url: "StudentService.asmx/GetStudents",
  33. params: {
  34. id: $routeParams.id
  35. },
  36. method: "get"
  37. }).then(function(response) {
  38. vm.student = response.data;
  39. })
  40. });
Look at the routes, as all the routes here /courses/students are in lower case . If we type in the URL, as /courses, it will render the courses page and so on . Now, lets see in the URL, we type COURSES and see what happens.

Initially, I had typed courses in the URL and we got-

output

Now, we will type COURSES and let's see the output, given below-

output

Output

output

The moment I had hit enter in the URL, it had redirected to home controller, which is because the routes are case sensitive and it is redirecting to home, as we have otherwiseTo :/home configured.

Now, we will comment the Otherwise section in our controller, type COURSES in the URL and see what happens? Thus, lets comment the otherwise section, as given below-

code

Lets reload the page and type COURSES in the URL and see what happens-

output

As you can see from the output, no contents are displayed and also, it has not been redirected to our home controller, due to which, we had commented otherwise .

Now, we want all our routes to be case insensitive. We have to set a property here as-

caseInsensitivematch:True

To make all routes case-insensitive, set caseinsensitive match property on $routeprovider.

Now, I will write that caseinsensitiveMatch:true in courses controller as, given below-
  1. .when("/courses", {
  2. templateUrl: "Templates/courses.html",
  3. controller: "coursesController as coursesCtrl",
  4. caseInsensitiveMatch: true
  5. })
Now, lets save the changes, reload the page, type COURSES in the URL and see what happens-

output

As you can see from the above output, we had got the courses list but for /courses controller and but /home and /students are case sensitive now.

If you want all the routes to be casinsensitive insetad of writing on an individual route, set it on $routeprovider as-

code

Now, lets save the changes, reload the page, type HOME and STUDENT in the URL. You will see the output as before-

output
For HOME, the screenshot is given below-
HOME

Now, we will see Inline Templates in AngularJS,

As you had noticed, in our controller, their respective controller /courses,/home and so on are coming from respective HTML Files, so all these are separate HTML files here. Thus, the question is does a View comes from a separate HTML file and the answer is, it is not necessary, as it can come from inline also. Lets see how, as we are using template url, remove that template URL and use only template We will put some text inside it as-
code
  1. .when("/home", {
  2. template: "<h1>Hello There !!</h1>",
  3. controller: "homeController as homeCtrl"
  4. })
Now, lets save the changes, reload the page and let's click on home to see what output we will get?

output

As you can see from the output, shown above, we got Hello There text, which we specified inline in h1 tag. Thus, you can use Inline template as this or else you can use an external template specifying that HTML file .

Conclusion

This was all about AngularJS casesensitive and inline templates. Hope, this article is helpful!!