角度路由未在ng-view内显示

时间:2016-05-17 12:52:12

标签: angularjs routing

我的第一篇文章,我已经搜索过但找不到解决方案。

在ng-view中无法看到我的路由内容。

indext.html

<html lang="en"  ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
    <script src="static/js/app.js"></script>
</head>
<body>
<ng-view></ng-view>

</body>
</html>

app.js

var app = angular.module('myApp',[]);

app.config(['$routeProvider',

function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    console.log("Kom till config");

    $routeProvider.
        when('/', {templateUrl: 'static/partials/mainpage.html',
    }).
    otherwise({
        redirectTo: '/'
    });
}]);

我没有错误,也不知道如何排除故障,感谢您的帮助。

文件结构

C:.
├───.idea
├───.openshift
│   ├───action_hooks
│   ├───cron
│   │   ├───daily
│   │   ├───hourly
│   │   ├───minutely
│   │   ├───monthly
│   │   └───weekly
│   └───markers
├───static
│   ├───css
│   ├───fonts
│   │   ├───font-awesome
│   │   │   ├───css
│   │   │   ├───fonts
│   │   │   ├───less
│   │   │   └───scss
│   │   └───fonts
│   ├───img
│   │   ├───client
│   │   ├───portfolio
│   │   └───team
│   ├───js
│   └───partials
└───templates
    ├───admin
    └───security

它是一个烧瓶服务器,为客户提供资源。

1 个答案:

答案 0 :(得分:1)

您必须将ngRoute添加到模块中。

var app = angular.module('myApp',['ngRoute']);

然后像这样使用$ routeRrovider:

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.
      when('/', {
        templateUrl: 'partials/partial.html'
      }).
      otherwise({
          redirectTo: '/'
      });
   }]);

在index.html中使用:

<div ng-view></div>