Question

我知道angularjs路由有很多例子，但不知道为什么这对我不起作用。我试图自己做一个。下面是我正在使用的插件请指出我在哪里出错...我错过了什么，因为它不适用于我的系统。

的index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
    <script data-require="angular-route@1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <header>
        <h1>My app</h1>
        <ul>
          <li><a href="#/">Home</a></li>
          <li><a href="#/about">About</a></li>
        </ul>
    </header>

    <div class="content">
        <div ng-view></div>
    </div>
</body>

script.js

angular
    .module('myApp', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/', {
                template: '<h2>{{page}}</h2>',
                controller: ['$scope', function($scope){
                    $scope.page = 'home';
                }]
            })
            .when('/about', {
                template: '<h2>{{page}}</h2>',
                controller: ['$scope', function($scope){
                    $scope.page = 'about';
                }]
            })
            .otherwise({redirectTo: '/'});
    }]);

Answer 1

您在angular-route.js

中缺少src="https://code.angularjs.org/1.2.21/angular-route.js"

使用此Mixed Content: The page at 'https://plnkr.co/edit/AK32mYeV41F2AlFBUFMB?p=preview' was loaded over HTTPS, but requested an insecure script 'http://code.angularjs.org/1.2.21/angular-route.js'. This request has been blocked; the content must be served over HTTPS.

以下是控制台中的错误：

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     Customize your theme here.
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Angularjs Routing希望它能够工作

1 个答案: