Javascript $routeProvider和angularJS？_Javascript_Html_Angularjs

Javascript $routeProvider和angularJS？

javascript html angularjs

Javascript $routeProvider和angularJS？,javascript,html,angularjs,Javascript,Html,Angularjs,好的，我有一个简单的web应用程序，我正在尝试使用route provider进行更新。当单击页面上的li列表时，它工作正常，但当我刷新页面时，它只会给我一个404，它看起来像是在尝试访问url，而不是去根目录并传递模板。。。为什么? html: `<body ng-app="newSiteApp" ng-controller="MainCtrl"> <div class="header"> <ul> <li ng-repe

好的，我有一个简单的web应用程序，我正在尝试使用route provider进行更新。当单击页面上的li列表时，它工作正常，但当我刷新页面时，它只会给我一个404，它看起来像是在尝试访问url，而不是去根目录并传递模板。。。为什么?

html:

`<body ng-app="newSiteApp" ng-controller="MainCtrl">
    <div class="header">
    <ul>
      <li ng-repeat="menuitem in menu" ng-click="ajaxpage()">{{menuitem.name}}</li>
    </ul>

    </div>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="slide-animate-container"  >
       <!-- <div  class="slide-animate" ng-init="getmenuitem = page" ng-include="getmenuitem"></div>-->
    </div>
    <div ng-view></div>
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <!-- endbuild -->
  </body>`

`

{{{menuitem.name}

`

因为您使用的是

$locationProvider.html5模式（true）

可能是您所指的URL“

https://mysite/myrouting/page1

“由浏览器解释为服务器请求。如果您改为将

添加到url，页面将不会像这样“刷新”https://mysite/#/myrouting/page1

这会损坏我的url:/#%2Fpages%2FProjects$location.url（“#pages/”+this.menuitem.name）；查看您的url/#%2Pages是编码的，而不是/#/pages和$location.url（“#pages缺少“/”…类似于此$location.url（“/pages

`<body ng-app="newSiteApp" ng-controller="MainCtrl">
    <div class="header">
    <ul>
      <li ng-repeat="menuitem in menu" ng-click="ajaxpage()">{{menuitem.name}}</li>
    </ul>

    </div>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="slide-animate-container"  >
       <!-- <div  class="slide-animate" ng-init="getmenuitem = page" ng-include="getmenuitem"></div>-->
    </div>
    <div ng-view></div>
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <!-- endbuild -->
  </body>`