javascript - AngularJS router config is not working

I'm just started to learn angular JS. I made some test code for routing. But it seems not working

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=".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>

did i missing something in demoApp.config or controller setting? i also got error message in javascript console

Uncaught Error: [$injector:modulerr] .2.9/$injector/modulerr?p0=demoApp&p1=Error%3A…ogleapis%2Fajax%2Flibs%2Fangularjs%2F1.2.9%2Fangular.min.js%3A32%3A232)

I'm just started to learn angular JS. I made some test code for routing. But it seems not working

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./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>

did i missing something in demoApp.config or controller setting? i also got error message in javascript console

Uncaught Error: [$injector:modulerr] http://errors.angularjs/1.2.9/$injector/modulerr?p0=demoApp&p1=Error%3A…ogleapis.%2Fajax%2Flibs%2Fangularjs%2F1.2.9%2Fangular.min.js%3A32%3A232)

Share Improve this question edited Jan 16, 2014 at 5:13 asked Jan 16, 2014 at 4:55 Terry Cho 6186 silver badges15 bronze badges

1 have you referenced angular.route.min.js because its shifted to its own separated file. – Ravi Commented Jan 16, 2014 at 5:16

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You are missing the ngRoute module. You have to add angular-route.js file to your scripts and load the module like this:

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

added demo.js

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

and added in home.html

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

according you your HTML you are missing a reference to ngRoute module to your application module. like below

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS router config is not working - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)