如何路由angularjs答案

【问题标题】：How to route angularjs如何路由angularjs
【发布时间】：2019-02-02 11:40:49
【问题描述】：

我的主目录文件夹名称是angularjs，里面有很多文件，文件列表翻滚。

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

我想使用 AngularJs 创建路由，我已经这样做了，但是我遇到了错误。

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>

我想从路由路径中删除# simble

【问题讨论】：

错误是什么？你为什么在锚链接中使用#？
当我加载这个页面时，我的浏览器没有响应
你试过不带#吗？和浏览器不响应什么？
试过了，但没有任何改变
stackoverflow.com/questions/14771091/…

标签： angularjs

【解决方案1】：

尝试用下面的代码替换您的代码。

<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>

如果你想去掉感叹号，你应该添加一个配置到$locationProvider，如下所示。

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

参考， Exclamation mark after hash (#!) in angularjs app

【讨论】：