Question

我的文件夹结构是：

-ngTest
    --Scripts(all js files)
    --index.html
    --main.js
    --partialView.html

index.html代码如下：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>Angular App</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>Hello world</p>
        <div ng-view></div>
        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>
        <script src="main.js"></script>
    </body>
</html>

main.js是：

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'partialView.html',
        controller: 'newCtrl'
    })
}).controller('newCtrl', function () {
    console.log('finally');
});

partialView.html：

<div>
    <p> From view</p>
</div>

我在这段代码中缺少什么？

Answer 1

如果你想加载partialView.html作为默认值，你必须路由到＆＃34; /＆＃34;，而不是＃34; / home＆＃34;。

  angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'partialView.html',
        controller: 'newCtrl'
    })
}).controller('newCtrl', function () {
    console.log('finally');
});

＆＃34; / HTML＆＃34;如果您在html文件中链接到它，将会被访问，例如：

<a href=#/html>Link<a>

Answer 2

您的代码看起来不错，但遗漏了一些内容：您需要一个能够转到/ home的锚点，您可以将其添加到索引文件中，如下所示：

<a href="#/home">Red</a>

然后单击主页锚点以显示部分视图。或
在路由器配置中修改主页使其仅为“/”，因此代码如下：

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
    templateUrl: 'partialView.html',
    controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});

最后一件事，如果您使用的是角度最新1.6.0，则必须添加以下代码：

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');}]);

AngularJs 1路由不起作用

2 个答案: