Question

在AngularJS中使用路由，但我似乎无法使其正常工作。试图为每个模板显示一些带有不同控制器的模板，但它似乎只能路由到其中一个。

Plunker链接： https://plnkr.co/edit/6nupjElxdxWR8Ov7f59n?p=preview

以下是代码：

的index.html

<html>

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

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div class="container">
    <div id="menu">
      <a href="#">Home</a>
      <a href="#page1">Page1</a>
      <a href="#page2">Page2</a>
    </div>

    <div id="mainContent">
      <div ng-view></div>
    </div>
  </div>
</body>

</html>

的script.js

app = angular.module('myApp', ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: "base.html",
      controller: "homeController"
    })
    .when('/page1', {
      templateUrl: "page1.html",
      controller: "pageController"
    })
    .when('/page2', {
      templateUrl: "page2.html",
      controller: "pageController"
    });
});

app.controller('homeController', [
  '$scope',
  function homeController($scope) {
    console.log("Home");
  }
]);

app.controller('pageController', [
  '$scope',
  function pageController($scope) {
    console.log("Page");
  }
]);

base.html文件

<div>Base</div>

page1.html

<div>Page1</div>

page2.html

<div>Page2</div>

目前，无论按下哪个按钮，它似乎只显示 base.html 模板。

Answer 1

我认为它与angular插件有关。尝试使用

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

它在您的plunkr中以1.5.8

正常工作

修改看来你需要包括！在您的路径名称1.6.0之前

<div id="menu"> <a href="#!">Home</a> <a href="#!page1">Page1</a> <a href="#!page2">Page2</a> </div>

Answer 2

问题是默认哈希前缀的更改：

由于aa077e8，用于$ location hash-bang的默认哈希前缀   网址已从空字符串（＆＃39;＆＃39;）更改为bang（＆＃39;！＆＃39;）。如果你的   应用程序不使用HTML5模式或正在浏览器上运行   不支持HTML5模式，并且您尚未指定自己的模式   hash-prefix然后客户端URL现在包含一个！字首。对于   例如，URL将成为mydomain.com/#/a/b/c而不是   mydomain.com /＃！/ A / B / C

如果你真的想要没有hash-prefix，那么你可以恢复   通过向您的应用程序添加配置块来执行以前的行为：

appModule.config（[＆＃39; $ locationProvider＆＃39;，function（$ locationProvider）{
  $ locationProvider.hashPrefix（＆＃39;＆＃39;）; }]）;   Source

因此，如果您想要正确行事而不是更改角度版本，您应该：

public class MyApp extends Application {

    SharedPreferences mPrefs;

    @Override
    public void onCreate() {
        super.onCreate();

        Context mContext = this.getApplicationContext();
                //0 = mode private. only this app can read these preferences
        mPrefs = mContext.getSharedPreferences("myAppPrefs", 0);


        // the rest of your app initialization code goes here
        if(getFirstRun()) {
            //Show dialog
        }
    }

    public boolean getFirstRun() {
        return mPrefs.getBoolean("firstRun", true);
    }

    public void setRan() {
        SharedPreferences.Editor edit = mPrefs.edit();
        edit.putBoolean("firstRun", false);
        edit.commit();
    }
}

基本角度路由问题

2 个答案: