2

I am new to angular js. I am trying to build simple app in which if If i load through ng-route it is not able to find view1.html whereas if I load from within same index.html it works. I already went through following post with same issue in which we have inject ibrary dependency of ng-route, but still it is not working 

  index.html

 <!DOCTYPE html>
  <html ng-app="demo">
  <head >
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">   </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js">
  </script>
  </head>

  <body> Test 
  <div ng-view=""> </div>
  <script>
    var demo = angular.module('demo',['ngRoute']);
    demo.config(function($routeProvider) {
         $routeProvider.when('/', 
             {
                  controller:'showswitch',
                  templateUrl: 'view1.html'
             })
             .otherwise({redirectTo:'/'})
    });

    demo.controller('showswitch', function($scope) {
        $scope.phones = [
        {'name': 'Nexus S',
        'snippet': 'Fast just got faster with Nexus S.',
            'age': 1},
        {'name': 'Motorola XOOM™ with Wi-Fi',
        'snippet': 'The Next, Next Generation tablet.',
             'age': 2},
        {'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.',
            'age': 3}
    ];
    });

   </script>
   </body>
   </html>

(view1 and index are under same directory)

view1.html

<div>
<h1> View1 </h1>
<input ng-model="query">
<select ng-model="orderProp">
    <option value="name">Alpha</option>
    <option value="age">Age</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
Community
  • 1
  • 1
Prannoy Mittal
  • 1,525
  • 5
  • 21
  • 32
  • It's not working isn't a very good question. however, to start with, you are trying to redirect to a file; you should be redirecting to a route. i.e. `.otherwise({redirectTo:'/'})` – Claies Mar 16 '15 at 19:34
  • It works for me. See http://plnkr.co/edit/YdJj271haSJbeWYqKqmG?p=preview Only things that are bad is bad otherwise call and
    in     – SeriousDron Mar 16 '15 at 19:38
  • @SeriousDron..ya in that it shows fine browser used by plnkr in link above. I am trying to load on google chrome but still it show nothing other than test. Ya i removed wrong input
    also. The URL in browser do turn to file:///Y:/web-app/phonesapp/index.html#/ when i loaded file:///Y:/web-app/phonesapp/index.html     – Prannoy Mittal Mar 16 '15 at 19:42
  • ok so after changing the redirect, you are still having issues? can you describe a bit more clearly what you are seeing, as opposed to what we are seeing in the working plunkr? – Claies Mar 16 '15 at 20:31
  • @Claies If i open it after enabling server (listening at a port) , then it works. If i directly open that index.html in my browser then it is not working. – Prannoy Mittal Mar 17 '15 at 10:42
  • 1
    Er, ok well yes, routing **requires** a server. If your question is actually"how can I use routing without a server", the answer to that is, You can't. – Claies Mar 17 '15 at 12:03
  • thanks Claies...initially i was not able to figure out, i was loading it wrong..after @SeriousDron comment , it clicked may be i am loading the page wrong. – Prannoy Mittal Mar 17 '15 at 20:26
  • @Claies he should redirect to a "state name" using `$urlRouterProvider.otherwise('/home');` not `.otherwise({redirectTo:'/home'})`. Anyway, without a server is impossible to create and manage routes. – Maurizio Battaghini Aug 17 '16 at 09:25
  • @MaurizioBattaghini this question is over a year old, and I'm not sure if my comments were wrong at that time or if the api details have changed; either way, I don't think that this is an active issue. – Claies Aug 17 '16 at 15:17

0 Answers0