CODEWITHSUNDEEP
javascriptangularjs
Radoslav Naidenov
Radoslav Naidenov

Reputation: 807

Routing issues in Angular

I'm pretty new to Angular and I came across an issue I can't get around. I did see other people asking the same question, however their problem had to do with a missing ['ngRoute'] .I checked the code many times,but I might have missed something so I'm really hoping I can get some help on this one. Thanks in advance !

directories https://i.sstatic.net/zvaqU.png

firstpage.html : 

<html ng-app="myApp"> 
    <head>

    </head>
        <body> 
        <div ng-view></div>
        <script 
            src="angular.min.js">
        </script> 
        <script 
            src="angular-route.js">
        </script> 

        <script
            src="test.js">
        </script>

        </body>
</html>

test.js : 

var app = angular.module('myApp',['ngRoute']);
        app.config(function ($routeProvider) {
            $routeProvider
                .when('/',
                    {
                        controller: 'SimpleController',
                        templateUrl: 'Partials/View1.html'
                    })
                .when('/view2',
                    {
                        controller: 'SimpleController',
                        templateUrl: 'Partials/View2.html'
                    })
                .otherwise({redirectTo:'/'});
            });

        var controllers = {};
        controllers.SimpleController = function ($scope) {
            $scope.djs=[{name:'Adam Beyer',city:'Sweden',djRank:1},
                            {name:'Joseph Capriati',city:'Napoli',djRank:4},
                            {name:'Nina Kraviz',city: 'Moscow',djRank:7},
                            {name:'Adam Petrov',city:'Sofia',djRank:100}];

            $scope.addCustomer() = function () {
                $scope.djs.push({name:$scope.newCustomer.name,
                                city:$scope.newCustomer.city});
            };
        };
        app.controller(controllers);

View1.html : 

<div class = "container">
    <h2>View 1</h2>
        Name: 
        <br/>   
        <input ng-model="filter.name" />
        <br/>
        <ul>
            <li ng-repeat="dj in djs|filter:filter.name|orderBy:'djRank'"> {{dj.name}} 
            </li>
        </ul>

        <br/>
        Customer Name: <br/>
        <input type="text" ng-model="customer.name" />
        <br/>
        Customer City: <br/>
        <input type="text" ng-model = "customer.city" />
        <br/>
        <button ng-click="addCustomer()">Add Customer</button>
</div>

View2.html :

 <div class="container">
    <h2>View 2</h2>
    City:
    <br/>
    <input type = "text" ng-model="city" />
    <br/>
    <ul>
        <li ng-repeat= "dj in djs |filter:city"</li>
    </ul>
</div>

Upvotes: 0

Views: 72

Answers (1)

yihangho
yihangho

Reputation: 2215

You made a typo in your controller. It should be

$scope.addCustomer = function () {
    $scope.djs.push({name:$scope.newCustomer.name,
                     city:$scope.newCustomer.city});
};

not

$scope.addCustomer() = function () {
    $scope.djs.push({name:$scope.newCustomer.name,
                     city:$scope.newCustomer.city});
};

Notice the parentheses right after addCustomer should not be there.

Upvotes: 2

Related Questions