apache_conf 使用ngRoute在子目录/ app中工作的Angular html5Mode apache

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了apache_conf 使用ngRoute在子目录/ app中工作的Angular html5Mode apache相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>List</title>
    <base href="/app/"><!-- Make sure the base is above your stylesheet -->
    <meta name="fragment" content="!" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
    <ng-view></ng-view>
    
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.min.js"></script>
    <script src="js/controllers/ListController.js"></script>
    <script src="js/controllers/EditController.js"></script>
</body>
</html>

var app = angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/list',
      {
        templateUrl: 'templates/list.html',
        controller: 'ListController'
      });
  
    $routeProvider.when('/new',
      {
        templateUrl: 'templates/new.html',
        controller: 'EditController'
      });
    
    //Default URL
    $routeProvider.otherwise({redirectTo:'list'});
    
    //html5Mode don't need /app/#/ anymore, just /app/
    $locationProvider.html5Mode(true).hashPrefix('!'); //the hashPrefix is for SEO
  })
;

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /app/index.html [NC,L]
</IfModule>

以上是关于apache_conf 使用ngRoute在子目录/ app中工作的Angular html5Mode apache的主要内容，如果未能解决你的问题，请参考以下文章

ngRoute 和 ui.router 的使用方法和区别

Angular 1.5 组件通过 ngRoute 更新父控制器

摆脱＃！在 angularjs ngRoute [重复]

ngRoute 动态 url 作为路径的第一部分

angularjs之插件ngRoute和ngAnimate

AngularJS、AngularUi（引导程序）和 NgRoute