AngularJS路由器配置不起作用

Question

我剛開始學習角度JS。 我為路由制作了一些測試代碼。 但它似乎不起作用

demoApp.js

var demoApp = angular.module('demoApp',[])

demoApp.config(function($routeProvider){
    $routeProvider
        .when('/view1',
            {   
                controller:'SimpleController'
                ,templateUrl : 'View1.html'
            })
        .when('/view2',
            {
                controller:'SimpleController'
                ,templateUrl : 'View2.html'
            })
        .otherwise({redirectTo:'/view1'});  

});

demoApp.controller('SimpleController',function($scope){
        $scope.customers = [
                {name:'Terry.Cho',city:'Seoul'},
                {name:'Cath',city:'Suwon'},
                {name:'Carry',city:'Suwon'}
        ];
        alert('hello controller');
    } );


alert("hello");

home.html的

<html ng-app="demoApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    <script src="demoApp.js"></script>
</head>
<body>
    <a href="#/view1">View1</a>
    <a href="#/view2">View2</a>

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

view1.html

<div class="container">
    <h2> View 1 </h2>

view2.html

<div class="container">
    <h2> View 2 </h2>

我在demoApp.config或控制器設置中遺漏了什么？ 我也在javascript控制台中收到錯誤消息

未捕獲錯誤：[$ injector：modulerr] http://errors.angularjs.org/1.2.9/ $ injector / modulerr？p0 = demoApp＆p1 =錯誤％3A ... ogleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.9％ 2Fangular.min.js％3A32％3A232）

Answer 1

您缺少ngRoute模塊。 您必須將angular-route.js文件添加到腳本中並加載模塊，如下所示：

 angular.module('demoApp', ['ngRoute']);

Answer 2

添加了demo.js

var demoApp = angular.module('demoApp',['ngRoute'])

並添加到home.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js

Answer 3

根據您的HTML您缺少對應用程序模塊的ngRoute模塊的引用。 如下

var demo = angular.module('demoapp',['ngRoute']);

AngularJS路由器配置不起作用

問題描述

3 個解決方案

解決方案1
4 已采納 2014-01-16 05:18:14

解決方案2
2 2014-01-16 05:22:15

解決方案3
0 2014-01-16 05:19:52

AngularJS路由器配置不起作用

問題描述

3 個解決方案

解決方案1 4 已采納 2014-01-16 05:18:14

解決方案2 2 2014-01-16 05:22:15

解決方案3 0 2014-01-16 05:19:52

解決方案1
4 已采納 2014-01-16 05:18:14

解決方案2
2 2014-01-16 05:22:15

解決方案3
0 2014-01-16 05:19:52