angularjs - 角路由提供者

Question

我刚刚在 youtube 上关注了有关 angular 的教程，但由于问题，我无法执行代码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]

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

score 6 · Accepted Answer

改变：

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

至

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

score 1 · Accepted Answer

将依赖项注入我们的应用程序模块时，使用camelCase而不是snake-case

在这里，使用ngRoute而不是ng-route

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

score 0 · Accepted Answer

在 Angular 中，我们需要在 java Scripts 文件中使用 camelCase 进行依赖注入和指令定义，并在使用指令的 HTML 页面中使用蛇形案例

如果您在您将使用的指令定义中有指令 myFirstDirective

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

在 HTML 中，您将使用

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

score 0 · Accepted Answer

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

angularjs - 角路由提供者

4 回答 4

Related

Reference