2017-02-26 80 views
0

我知道有很多angularjs路由的例子,但不知道爲什麼這不適合我。我一直試圖自己做一個。下面是我正在使用的plunk,請指出我要去哪裏的地方......我錯過了,因爲它不適合我的系統。Angularjs路由希望它工作

Plnkr

的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="[email protected]" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script> 
    <script data-require="[email protected]" 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: '/'}); 
    }]); 

回答

0

你缺少在角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. 
+0

嗨Pranav,謝謝,這幫助了我也有做角路線參考相同的變化 –