Routing issues in Angular

Question

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>

What is exactly your problem? Does the console give any errors? — Michelangelo
– Michelangelo, Commented Jun 23, 2016 at 0:15
I recreated your code in a plunker and I can't see anything wrong, other than you not having a link in either view that would switch to the other.... can you elaborate on what exactly your issue is? — Claies
– Claies, Commented Jun 23, 2016 at 0:23
Look in your browser's JavaScript console. That's where the errors will be — Phil
– Phil, Commented Jun 23, 2016 at 0:25
the issue you are describing there isn't reproducible in the plunker I posted, though there are other errors. you should check the console for errors and determine if there is something in your local configuration that differs from the code you posted here. after you solve the routing, you will definitely need to correct some issues with your addCustomer function, though.... — Claies
– Claies, Commented Jun 23, 2016 at 0:30
@RadoslavNaidenov I what meant is the JavaScript console in your browser. It will log any errors that happened and will be very help in debugging your JavaScript code in general. Google "<browser you're using> JavaScript console" to figure out how to use it. — yihangho
– yihangho, Commented Jun 23, 2016 at 0:47

yihangho · Accepted Answer · 2016-06-23 00:24:36Z

2

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.

answered Jun 23, 2016 at 0:24

yihangho

2,2434 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Claies Over a year ago

this is indeed an error in the code, but it doesn't explain the routing issue the OP is asking about and has clarified in their comments...

yihangho Over a year ago

Right, that comment wasn't there yet when I posted the answer.

Collectives™ on Stack Overflow

Routing issues in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related