How to route angularjs

Question

my main directory folder name is angularjs and there have many files, file lists are given billow.

1.index.html
2.main.html
3.blue.html
4.red.html
5.green.html

i want to create routing using AngularJs, i have do that but facing error what i have wrong.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "index.html"
    })
    .when("/red", {
      templateUrl: "red.html"
    })
    .when("/green", {
      templateUrl: "green.html"
    })
    .when("/blue", {
      templateUrl: "blue.html"
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>

<body ng-app="myApp">

  <p><a href="#/">Main</a></p>

  <a href="#/red">Red</a>
  <a href="#/green">Green</a>
  <a href="#/blue">Blue</a>
  <div ng-view></div>
</body>

and i want to remove # simble from routing path

Have you tried without #? and browser do not response to what? — Sonal Borkar, Feb 02 '19 at 11:56
https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol — Tik, Feb 02 '19 at 12:49

Vishmi Money · Answer 1 · 2019-02-02T12:49:09.673

Try replacing your code with below.

<p><a href="#!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>

<div ng-view></div>

If you want to remove the exclamation mark, you should add a config to the $locationProvider as below.

.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

Refer, Exclamation mark after hash (#!) in angularjs app

How to route angularjs

1 Answers1