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 = angular files (ここでは app.js / module ファイル)
      • ビュー
      • パーシャル
      • コントローラー
      • サービス

私は何を間違っていますか？

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 に答える