0

我刚刚开始使用 AngularJS（来自 jQuery），似乎值得替换我的大部分 jQuery。

我认为最简单的起点是我拥有的所有简单的显示/隐藏选项卡式内容。目前，我在加载的页面中有所有适用的 html。但是，似乎我最好使用 Angular 路由加载所有这些选项卡式部分。我的假设是否正确？或者我应该使用一些混合方法（这些部分中的内容是动态的）？

无论如何，使用 Angular 解决方案，我似乎无法让脚本适用于路线。我对此处于一个非常新的领域，并且不知道我哪里出错了。任何帮助都很棒

我目前的 HTML（简体）：

<!DOCTYPE html>

<html data-ng-app='mainApp'>

<head>

    <script src='js/jquery.min.js'></script>
    <script src='js/angular.min.js'></script>

</head> 

<body>


<div class='toggleButtons'>

<a href='#/info'>
<div></div>
</a>

<a href='#/comment'>
<div></div>
</a>

<a href='#/feedback'>
<div></div>
</a>

</div>


<div class='container'>

<div data-ng-view=''></div>

</div>

<script src='app/main.app.js'></script>

</body>

</html>

角度：

/// <reference path="../js/angular.min.js" />

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

mainApp.config(function ($routeProvider) {

    $routeProvider

        .when('/info',
            {
                controller: 'mainInfoController', 
                templateUrl: '/app/partials/info.html'
            })

        .when('/comment',
            {
                controller: 'mainCommentController',
                templateUrl: '/app/partials/comment.html'
            })

        .when('/feedback',
            {
                controller: 'mainFeedbackController',
                templateUrl: '/app/partials/feedback.html'
            })

        .otherwise({ redirectTo: '/app/partials/info.html' });


});

请注意：上面的控制器实际上只是占位符。我还没有创建它们。但是，我不在乎他们现在是否工作。我只关心让部分视图路线显示出来。他们不是。单击链接确实会正确显示 page.html#/info（或评论或反馈......等）。但什么也没有发生。

文件路径如下：

  • 主文件夹 = html
    • js = 脚本
    • app = 角度文件（此处为 app.js / 模块文件）
      • 意见
      • 部分
      • 控制器
      • 服务

我究竟做错了什么？

4

1 回答 1

1 
<!DOCTYPE html>
<html ng-app='mainApp'>

    <head>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'></script>
        <script>
            var mainApp = angular.module('mainApp', []);

            mainApp.config(function($routeProvider) {

                $routeProvider

                .when('/info', {
                    controller: 'mainInfoController',
                    templateUrl: 'app/partials/info.html'
                })

                    .when('/comment', {
                    controller: 'mainCommentController',
                    templateUrl: 'app/partials/comment.html'
                })

                    .when('/feedback', {
                    controller: 'mainFeedbackController',
                    templateUrl: 'app/partials/feedback.html'
                })

                    .otherwise({
                    redirectTo: '/info'
                });

                function mainInfoController($scope) {}

                function mainCommentController($scope) {}

                function mainFeedbackController($scope) {}
            });
        </script>
    </head>

    <body>
        <div class='toggleButtons'>
<a href='#/info'>
<div>Info</div>
</a>

<a href='#/comment'>
<div>Comment</div>
</a>

<a href='#/feedback'>
<div>Feedback</div>
</a>
        </div>
        <div ng-view></div>
    </body>
</html>
于 2013-04-30T04:56:27.077 回答