Question

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

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

无论如何，使用Angular解决方案，我似乎无法使脚本适用于路由。我对此处于一个非常新的领域，对于我出错的地方一无所知。任何帮助都是grea

我目前的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 = scripts
- app = angular文件（此处为app.js / module文件）
  - 视图
  - partials
  - 控制器
  - 服务

我做错了什么？

Answer 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>

AngularJS路由与jQuery show / hide

1 个答案: