Question

我是角色的新手，我正在尝试将教程调整到我的应用程序。我正在尝试添加路线到我的应用程序，它似乎没有读取我的模板或正确读取控制器。我为Chrome安装了angularJS扩展程序（顺便说一下非常棒）它显示我的范围是空的，没有模型。这是我的HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
    <title>Map Test</title>
    <script src="../lib/angular/angular.js"></script>
    <script src="../lib/angular/angular-route.js"></script>
    <script src="../resources/app.js"></script>
    <script src="../resources/controllers.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

这是我的app模块（app.js）：

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

bioSatApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/maptypes', {
                templateURL: 'partials/mapType-list.html',
                controller: 'MapListCtrl'
            }).
            when('/maptypes/:type', {
                templateURL: 'partials/mapType-detail.html',
                controller: 'MapTypeCtrl'
            }).
            otherwise({
                redirectTo: '/maptypes'
            });
    }]);

这是我的控制器模块（controllers.js）：

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

biosatAppControllers.controller('MapListCtrl', ['$scope', '$http', 
    function ($scope, $http) {
        $http.get('../resources/maptypes.json').success(function (data) {
            $scope.mapTypes = data;

        });
}]);
biosatAppControllers.controller('MapTypeCtrl', ['$scope', '$routeParams',
    function ($scope, $routeParams) {
        $scope.type = $routeParams.type
    }]);

这是mapType-list.html：

<select onchange="location = this.options[this.selectedIndex].value;">
    <option ng-repeat="map in mapTypes" value="#/maptypes/{{map.type}}">
        {{map.caption}}
    </option>
</select>

这是mapType-detail.html：

<div>
    {{type}}
    <div id="legendContainer" style="width: 300px; height: 800px; overflow-y: auto; float: left;">Legend Div</div>
    <div id="mapDiv" style="height:800px;">Map Div</div>
</div>

maptypes.json是有效的json，在我尝试ngRoute之前它已成功加载。

当我运行代码时，它成功地将应用程序导航到/ maptypes（$ routeProvider中的否则语句）。但它没有显示mapType-list html，它应该是一个简单的下拉列表。我的控制台或任何其他地方没有错误地说没有正确加载或找不到的东西。另外，当我运行ng-view div元素时：

<div ng-view></div>

取而代之的是评论：

<!-- ngView: -->

我确信这是一件非常简单的事情，我错过了或者错了，但我一遍又一遍地查看代码，我再也看不到了。

Answer 1

尝试将您的应用配置更改为

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        //Your routing here...

同时将<base href="/">添加到HTML文件的头部。

Answer 2

这里我使用相同代码的例子

sample1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
    <title>Test</title>
</head>
<body>
    <div ng-view></div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app1.js"></script>
    <script src="controllers.js"></script>
</body>
</html>

使用 app1.js 我做了不同的事情，因为我从这里删除了2行：

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

'ngRoute'
'biosatAppControllers'

我还为 templateUrl

更改了 templateURL

这是没有2行的结果：

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

bioSatApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/maptypes', {
                templateUrl: 'templates/mapType-list.html'
            }).
            when('/maptypes/:type', {
                templateUrl: 'templates/mapType-detail.html',
                controller: 'MapTypeCtrl'
            }).
            otherwise({
                redirectTo: '/maptypes'
            });
    }]);

所有其他文件都是相同的

为什么我的angularJS应用中的范围是空的？

2 个答案: