瞭解Angular JS中的路由

-1

我想了解爲什麼這段代碼不工作（我正在檢查有關此主題的信息，但人們對此問題有不同的答案）。我打一個很簡單的例子來了解Plunker路由器，但我不能這樣做工作...瞭解Angular JS中的路由

這是我index.html

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

    <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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div ng-view></div>  

    <a href="#red">Red</a> 
    <a href="#green">Green</a> 
    <a href="#blue">Blue</a> 


    </body>

這是我app.js：

var app = angular.module('plunker', ['ngRoute']); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl : "index.html" 
    }) 
    .when("/red", { 
     templateUrl : "red.html" 
    }) 
    .when("/green", { 
     templateUrl : "green.html" 
    }) 
    .when("/blue", { 
     templateUrl : "blue.html" 
    }); 
});

我red.html/blue.html和green.html是非常簡單的，就像這樣（每個顏色）：

<p>red!</p>

，但它不更新NG視... 另外，我想這：

<a href="#/red">Red</a> 
<a href="#/green">Green</a> 
<a href="#/blue">Blue</a>

但沒有......

來源

2017-04-15 carlos.baez

您的代碼不具有參考angular route，

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>

DEMO

來源

2017-04-15 19:09:49 Sajeetharan

他角的圖書館包括 –

@ myke_11j我提到的角度航線 – Sajeetharan

改正我的壞，我只看到那些2線假設你想他錯過了兩行 –

瞭解Angular JS中的路由

回答

相關問題