Question

我是AngularJS的新手，正在做Dan Wahlin教程。我使用1.4.4进行角度和角度路线。但出于某种原因，我运行路由教程。我没有输出

以下是相关的代码文件：

index.html

<!DOCTYPE html>
<html lang="en-US" ng-app = 'app'>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<body>

<div ng-view></div>

<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/new_Controller.js"></script>
</body>

</html>

new_Controller.js

function Controller_people($scope) {
    $scope.person = [
        {
            name: 'Bob',
            gender: 'M',
            city: 'Cincinnati'
        },
        {
            name: 'Jacob',
            gender: 'M',
            city: 'Chicago'
        },
        {
            name: 'Tom',
            gender: 'M',
            city: 'New York'
        },
        {
            name: 'Jill',
            gender: 'F',
            city: 'Las Vegas'
        },
        {
            name: 'Elaine',
            gender: 'F',
            city: 'Hollywood'
        },
        {
            name: 'Hannah',
            gender: 'F',
            city: 'Miami'
        }];
    $scope.order = function (var_name) {
        $scope.sort_by = var_name;
        $scope.reverse = !$scope.reverse;
    }
}

Controller_people.$inject = ['$scope'];
angular.module('app', []).controller('Controller_people',Controller_people);

app.js

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

app.config( function ($routeProvider){
    $routeProvider
        .when('/',{
            controller: 'Controller_people',
            templateUrl: '/app/views/people.html'
        })
        .otherwise({redirectTo:'/'});
});

people.html

Search by Name: <input type="text" ng-model="filter_by.name">
Search by Gender: <input type="text" ng-model="filter_by.gender">
Search by City: <input type="text" ng-model="filter_by.city"><br>

Sort by Name: <input type="checkbox" ng-model="sort_by" ng-true-value="'name'">
Sort by Gender: <input type="checkbox" ng-model="sort_by" ng-true-value="'gender'">
Sort by City: <input type="checkbox" ng-model="sort_by" ng-true-value="'city'"><br>

<button ng-click="$scope.gender= 'M'">To view boys</button>
<button ng-click="$scope.gender= 'F'">To view girls</button>
<button ng-click="$scope.gender= 'A'">To view all</button>
<br/>
<br/>

<table>
    <tr>
        <th ng-click="order('name')">Name</th>
        <th ng-click="order('gender')">Gender</th>
        <th ng-click="order('city')">City</th>
    </tr>
    <tr ng-repeat="kid in person | filter:filter_by | orderBy:sort_by:reverse">

        <td ng-if=" kid.gender == $scope.gender">
            {{kid.name}}
        </td>
        <td ng-if=" kid.gender == $scope.gender">
            {{kid.gender}}
        </td>
        <td ng-if=" kid.gender == $scope.gender">
            {{kid.city}}
        </td>
        <td ng-if="$scope.gender=='A'">
            {{kid.name}}
        </td>
        <td ng-if="$scope.gender=='A'">
            {{kid.gender}}
        </td>
        <td ng-if="$scope.gender=='A'">
            {{kid.city}}
        </td>
    </tr>
</table>

没有目录问题。脚本位于正确的文件夹中。我不知道为什么这不起作用。我非常感谢所有人的帮助。

Answer 1

您需要重新排列脚本的加载顺序：

应该是这样的：

<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/new_Controller.js"></script>

Answer 2

我仍然是这方面的初学者，但通过路由我发现那里总是有一些神奇的东西＆＃39;我总是这样做：

将基本元素添加到标题
将位置提供程序设置为使用html5Mode

要将基本元素添加到标题中，请将其放在app.js的顶部：

var windowLocation = window.location.pathname;
var baseElementText = "<base href='" + windowLocation + "'/>";
var baseElement = angular.element(baseText);
angular.element(document.querySelector('head')).append(baseElement);

将locationProvider设置为使用html5Mode

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
    $routeProvider
        .when('/',{
            controller: 'Controller_people',
            templateUrl: '/app/views/people.html'
        })
        .otherwise({redirectTo:'/'});

   $locationProvider.html5Mode(true);
}]);

另外，一个好的测试是确认您的when实际上是匹配的。如果你这样做会发生什么..

$routeProvider.otherwise({
             controller: 'Controller_people',
             templateUrl: '/app/views/people.html'
          });

如果显示视图，那么至少您会知道路由框架正在运行。

Angular JS路由没有输出

2 个答案: