BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み】Angularjsのng-viewが動作しない。

2022-02-09 16:24:23

質問

でシンプルなビューを作成しようとしています。 angualrjs + ngRoute .

なぜうまくいかないのでしょうか？

お願いです、どなたか私の プランカーの例 何が間違っているのか、教えてください。

私のindex.htmlです。 

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Route training</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">

        <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
        <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
        <script src="js/app.js"></script>       
    </head>

    <body>

        <div class="main_container">

            <div class="inner" ng-app="app">

                    <div class="container" ng-controller="MainController">
                        <span ng-cloak>{{text}}</span>
                    </div>

            </div>



            <div class="inner" ng-app="views">

                    <h3>Views Menu</h3>

                    <ul>
                        <li><a href="index.html">Back to HOME</a></li>
                        <li><a href="#/developers">Our Developers</a></li>
                        <li><a href="#/designers">Our Designers</a></li>
                    </ul>

                    <div ng-view></div>

            </div>

        </div>

    </body>

</html>

これはapp.jsです。 

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

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

views.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
        when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: 'index.html' });
    $locationProvider.html5Mode(true);
});

app.controller('MainController', function($scope) {
    $scope.text = "Hello World!!!!";
});

views.controller('DevCtrl', function($scope) {
    $scope.developers = [
        {"name":"John", "family":"Doe"}, 
        {"name":"Anna", "family":"Smith"},
        {"name":"Peter", "family":"Jones"},
        {"name":"Alex", "family":"Volkov"}, 
        {"name":"Yaniv", "family":"Smith"},
    ]
});

views.controller('DesignCtrl', function($scope) {
    $scope.designers = [
        {"name":"Inna", "family":"Doe"}, 
        {"name":"Anna", "family":"Smith"},
        {"name":"Yafit", "family":"Jones"}
    ]
});

design.html。 

<div id="designers" ng-controller="DesignCtrl">

    <h3>Designers List</h3>

    <table>
        <tr>
            <th>Name</th>
            <th>Family</th>
        </tr>
        <tr ng-repeat="d in designers">
            <td>{{d.name}}</td>
            <td>{{d.family}}</td>
        </tr>
    </table>

</div>

とdev.html 

<div id="developers" ng-controller="DevCtrl">

    <h3>Developers List</h3>

    <table>
        <tr>
            <th>Name</th>
            <th>Family</th>
        </tr>
        <tr ng-repeat="dev in developers">
            <td>{{dev.name}}</td>
            <td>{{dev.family}}</td>
        </tr>
    </table>

</div>

感謝

解決方法は？

問題はng-appの使い方が間違っていることです。アプリケーションでng-appを宣言するのは一度だけ、通常はhtml要素で宣言します。

その後、他のモジュールをメインモジュールの依存モジュールとして宣言してください。

htmlタグにng-app宣言を入れ、appモジュールにng-routingを入れて、viewsモジュールを取り除いています。

http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV 

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
        when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: '/index' });
    // $locationProvider.html5Mode(true);
});

<html ng-app="app">

ビューロジックを別のモジュールに入れることもできますが、通常はその場合も別のファイルに入れることになります。

html5modeはエラーが発生したので無効にしています（その辺はちょっとコツがいるところです）。

注：実際には、手動でブートストラップすることで複数のng-appを使用することは可能ですが、よほどの理由がない限り、これを実行するべきではありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します