了解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中的路由

回答

相关问题