Javascript ng route无法加载视图_Javascript_Angularjs_Ngroute_Angularjs Ng Route

Javascript ng route无法加载视图

javascript angularjs

Javascript ng route无法加载视图,javascript,angularjs,ngroute,angularjs-ng-route,Javascript,Angularjs,Ngroute,Angularjs Ng Route,我是新手。我试图建立一个简单的应用程序，如果如果通过ng route加载，它将无法找到view1.html，而如果从同一index.html加载，它将正常工作。我已经阅读了下面的文章，其中我们已经注入了ng路由的库依赖，但它仍然不起作用 index.html <!DOCTYPE html> <html ng-app="demo"> <head > <meta charset="utf-8"> <script src

我是新手。我试图建立一个简单的应用程序，如果如果通过ng route加载，它将无法找到view1.html，而如果从同一index.html加载，它将正常工作。我已经阅读了下面的文章，其中我们已经注入了ng路由的库依赖，但它仍然不起作用

  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>

index.html
试验
var demo=angular.module（'demo'，['ngRoute']）；
config（函数（$routeProvider）{
$routeProvider.when（“/”，
{
控制器：'showswitch'，
templateUrl:'view1.html'
})
。否则（{重定向到：'/'}）
});
演示控制器（'showswitch'，函数（$scope）{
$scope.phones=[
{'name'：'Nexus S'，
“snippet”：“Nexus S的速度更快了。”，
“年龄”：1}，
{'name'：'motorolaxoom™ 使用Wi-Fi’，
“snippet”：下一代平板电脑，
“年龄”：2}，
{'name'：'motorolaxoom™',
“snippet”：下一代平板电脑，
“年龄”：3}
];
});

（视图1和索引位于同一目录下）

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>


视图1
阿尔法
年龄


{{phone.name}
{{phone.snippet}

这不起作用不是一个很好的问题。但是，首先，您试图重定向到一个文件；您应该重定向到某个路由。i、否则（{重定向到：'/'}）它对我有效。只看坏的东西是坏的，否则打电话进来element@SeriousDron..ya在上面的链接中，它显示了plnkr使用的精细浏览器。我试图加载到谷歌浏览器，但它仍然显示除了测试什么也没有。是的，我也删除了错误的输入
。浏览器中的URL确实会转到file:///Y:/web-app/phonesapp/index.html#/当我加载时file:///Y:/web-app/phonesapp/index.htmlok那么在更改重定向后，您仍然有问题吗？你能更清楚地描述一下你所看到的，而不是我们在工作平台上看到的吗？呃，好的，是的，路由需要一台服务器。如果您的问题实际上是“在没有服务器的情况下如何使用路由”，那么答案是，您不能。