Question

我正在尝试从Angular 1.6中名为views的目录中显示一个视图。我正在使用ng-view指令。我想要展示的观点是 home.html 和 directory.html

的index.html

<!doctype html>
<html class="no-js" lang="" ng-app="myNinjaApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>TheNetNinja Angular Playlist</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="content/css/styles.css" rel="stylesheet" type="text/css" />

        <!-- Angular JS 1 Lib should be inserted in the head -->
        <script src="app/lib/angular.min.js"></script>
        <script src="app/lib/angular-route.js"></script>
        <script src="app/app.js"></script>


    </head>
    <body>

        <header ng-include src="'header.html'"></header>

        <main ng-view></main>


    </body>
</html>

home.html的

<h1>Homepage</h1>

directory.html

<div class="content">
    <div ng-controller="NinjaController">
        <p>{{message}}</p>

        <ul>
            <li ng-repeat="ninja in ninjas">{{ninja}}</li>
        </ul>

        <button ng-click="order = 'name'">Order by Name</button>
        <button ng-click="order = 'belt'">Order by Belt</button>

        <input type="text" ng-model="search" placeholder="Search for a ninja" />
        <ul>
            <li ng-repeat="ninja in ninjaP | orderBy: order | filter:search"  ng-show="ninja.available">
                <img ng-src="{{ninja.thumb}}" style="margin: -12px 10px 0 0; float: left; width: 50px;" ng-show="ninja.thumb">
                <h3>{{ninja.name}} - {{ninja.rate | currency: '£'}}</h3>

                <div class="remove" ng-click="removeNinja(ninja)">x</div>

                <span class="belt" style="background: {{ninja.belt}}">{{ninja.belt}} belt</span>
            </li>
        </ul>



    </div>
</div>

app.js

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


myNinjaApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html'
        })
        .when('/directory', {
            templateUrl: 'views/directory.html',
            controller: 'NinjaController'
        }).otherwise({
            redirectTo: '/home'
        });

}]);

当我转到/ home或/目录时，它不会显示正确的内容。

我被提示＆＃34; 在此服务器上找不到请求的URL / angular-js-playlist / home。＆＃34;

ng-view指令似乎没有抓住内容

你知道如何解决这个问题吗？任何帮助表示赞赏。

Answer 1

因为你没有href去做它。将它添加到您想要的任何地方。在directory.html中，您不需要编写ng-controller="NinjaController"。或者如果你有它 Angular 1.6中的路线已从#/myUrl更改为#!/myUrl

您应该将您的参考更改为。

<a href="#!/home">Home</a>

我建议您使用ui-router而不是ngRouter。它比ngRouter更灵活，更好。

Answer 2

只需浏览此链接，它将为您提供有关如何使用ngroute

使用ng-view的信息

https://www.w3schools.com/angular/angular_routing.asp

https://docs.angularjs.org/api/ngRoute/directive/ngView

Answer 3

在1.6中，用于$ location的默认哈希前缀从emty更改为bang（＆＃39;＆＃39; to！）。如果您不想要此哈希前缀，请添加此

$locationProvider.hashPrefix('');

配置设置

myNinjaApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
    $locationProvider.hashPrefix('');

    $routeProvider
    .when('/home', {
        templateUrl: 'views/home.html'
    })
    .when('/directory', {
        templateUrl: 'views/directory.html',
        controller: 'NinjaController'
    }).otherwise({
        redirectTo: '/home'
    });

}]);

参考：here

如何在AngularJS 1中使用ng-view显示视图？

3 个答案: