1

誰かが私のコードをざっと見て、何か足りないものがないかどうか教えてくれるかどうか疑問に思っていました。私は Angular.js を学ぼうとしており、有名なAngular.jsを 60 分のビデオで使用しています。ただし、私が抱えている問題は、角度がそれ以来更新されており、状況が少し異なることです。その結果、ルートを適切に編成するのに問題があります。事前に誰にでも感謝します。

私が本当に疑問に思っているのは、これらのルートを適切に機能させるために何が欠けているのか教えてもらえますか?

これは私のhtmlの私のスクリプトです。私はこの本をたどりました。結果として、それらは私の index.html ページ内のスクリプト タグです。

var demoApp = angular.module('demoApp', ['helperModule']);
    var controllers = {};

    demoApp.controller("CustomersController",  function ($scope){
        $scope.customers = [
                {name: 'Dave Jones', city: 'pheonix'},
                {name: 'Dave Jones', city: 'New york'},
                {name: 'Jones suman', city: 'pheonix'},
                {name: 'Naresh babu', city: 'Hyderabad'}
            ];
        });
    var demoApp = angular.module('demoApp', ['ngRoute']);
        demoApp.config(function($routeProvider){
            $routeProvider
                .when('/',
                    {
                        controller: "SimpleController",
                        templateUrl: "views/view1.html"
                    })
                .when('partial2',
                    {
                        controller: "SimpleController"
                        templateUrl: "views/view2.html"
                    })
                .otherwise({ redirectTo: "/"})
        });

        $scope.addCustomer = function(){
            $scope.customers.push({name: $scope.newCustomer.name, city: $scope.newCustomer.city});
        }
<script src = "angular-route.js"></script>

これは、ビュー #1​​ とビュー #2 にそれぞれ持っているものです。すべて正しいような気がしますが、顧客の名前が表示されません。

<div cass = "container">
<h2>View 1</h2>
    Name: 
    <input type = "text" data-ng-model="filter.name" />
    <ul><li data-ng-repeat="cust in customers | filter:filter.name"></ul>
    Customer Name: <br />
    <input type= "text" data-ng-model="newCustomer.name" />
    Customer City: <br />
    <input type= "text" data-ng-model="newCustomer.city" />
    <button data-ng-click="addCustomer()"> Add Customer </button>   
    <a href="#/view2"> View 2</a>   
</div>



<div cass = "container">
<h2>View </h2>
<div ng-controller="CustomersController">
    Search: <input type = "text" ng-model="searchText" />
    {{ searchText }}
    <br />
    <h3> Customers </h3>
    <table>
        <tr ng-repeat="cust in customers | filter:city">
                <td>{{ cust.name }}</td>
                <td>{{ cust.city }}</td>
                <td>{{ cust.total | currency}} </td>
            </tr>
    </table>
</div>
4

1 に答える 1

4

問題を起こしているアプリをオーバーライドしています

最初にvar demoApp = angular.module('demoApp', ['helperModule']);もう一度宣言しましたdemoApp var demoApp = angular.module('demoApp', ['helperModule']);

この問題を解決するより良い方法は、アプリをすべての依存関係で一度だけ宣言し、コントローラー、ディレクティブ、ファクトリーなどのコンポーネントで修正することです。

コード

//could remove `helperModule` module if not used
var demoApp = angular.module('demoApp', ['helperModule', 'ngRoute']); 
demoApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            controller: "SimpleController",
            templateUrl: "views/view1.html"
        })
        .when('partial2', {
            controller: "SimpleController",
            templateUrl: "views/view2.html"
        })
        .otherwise({
            redirectTo: "/"
        })
});

demoApp.controller("CustomersController", function($scope) {
    $scope.customers = [{
        name: 'Dave Jones',
        city: 'pheonix'
    }, {
        name: 'Dave Jones',
        city: 'New york'
    }, {
        name: 'Jones suman',
        city: 'pheonix'
    }, {
        name: 'Naresh babu',
        city: 'Hyderabad'
    }];

    $scope.addCustomer = function() {
        $scope.customers.push({
            name: $scope.newCustomer.name,
            city: $scope.newCustomer.city
        });
    };
});
于 2015-03-30T21:31:57.820 に答える