Angularjs 路由希望它工作

Question

我知道 angularjs 路由有很多示例，但不知道为什么这对我不起作用。我想自己做一个。下面是我正在使用的 plunk 请指出我哪里出错了...我缺少的是因为它在我的系统上不起作用。

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

中缺少 https

使用这个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.

Angularjs 路由希望它工作

Angularjs Routing want it to work

angular-routing