Question

我刚刚在youtube上关注了有关角度的教程，但由于routeProvider问题，我无法执行代码。我试图包含 angular-route.js 的良好链接，但它仍然无法正常工作......

我给你看了代码：

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Tuto Angular</title>
</head>
<body>
    <div>
        <div ng-view=""></div>
    </div>

    <script src="angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
    <script type="text/javascript">

        var demoApp = angular.module('demoApp', ['ng-route']);

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

        demoApp.controller('SimpleController', function ($scope){
            $scope.customers = [
                {name:'John Smith', city:'Phoenix'}, 
                {name:'John Doe', city:'New York'}, 
                {name:'Jane Doe', city:'Chicago'}
            ];

            $scope.addCustomer = function (){
                $scope.customers.push(
                    { 
                        name: $scope.newCustomer.name,
                        city: $scope.newCustomer.city
                    });
            };
        });

    </script>
</body>

当我查看控制台时，它会返回我：

未捕捉错误：[$ injector：modulerr]

如果您有任何想法，欢迎您！

Answer 1

变化：

var demoApp = angular.module('demoApp', ['ng-route']);

到

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

Answer 2

在我们的app模块中注入依赖项时，请使用camelCase而不是snake-case

在此处，使用ngRoute而非ng-route

请参阅：https://stackoverflow.com/a/11934258/1177295

Answer 3

在Angular中，我们需要在java Scripts文件中使用camelCase进行依赖注入和指令定义，在使用指令的HTML页面中使用snake-case

如果您在指令定义中使用指令myFirstDirective，则可以使用

demoApp.directive(myFirstDirective, function () {
return{}
});

在HTMl中，您将使用

<my-first-directive></my-first-directive>

Answer 4

您只在函数中包含它。您必须将服务注入config方法并确保ng-route包含在应用程序引用中

Angular routeProvider

4 个答案: