Question

我开始学习angularJs，在第一次设置时，应用程序无法正常工作。我的代码有什么问题？我尝试了一切，但我不知道该怎么做。在浏览器中运行时它只显示html，但是消息没有显示？请帮忙！

这是index.html

<!doctype html>

<html lang="en-US" ng-app="helloWorldApp">

    <head>
        <title>Angular Hello, Mordor</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <meta name="description" content="AngularJS Tutorial App">
        <script src="js/libs/jquery-1.11.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="js/libs/angular-route.min.js"></script>
        <script src="js/libs/angular-resource.min.js"></script>
        <script src="js/libs/angular-cookies.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/services.js"></script>
    </head>


    <body>
        <div ng-view></div>
    </body>

这是main.html和show.html中显示消息的代码

<div>{{message}}</div>

然后是app.js

// Chapter2/app.js

'use strict';
// App Module

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

helloWorldApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
    $routeProvider.
        when('/', {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl'
    }).when('/show', {
        templateUrl: 'partials/show.html',
        controller: 'ShowCtrl'
});

$locationProvider.html5mode(false).hashPrefix('!');
}]);

和Controllers.js

//  chap2/controllers.js

'use strict';
// Controllers

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

helloWorldControllers.controller('MainCtrl', ['$scope', '$location', '$http',
    function MainCtrl($scope, $location, $http) {
        $scope.message = "hello Mordor.";
    }]);

helloWorldControllers.controller('ShowCtrl', ['$scope', '$location', '$http',
    function ShowCtrl($scope, $location, $http) {
        $scope.message = "Show the World";
    }]);

Answer 1

首先，你可能会错过ng-app，它是角度

的引导程序

<html ng-app="helloWorldApp">
<head>
    <title>Angular Hello, Mordor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <meta name="description" content="AngularJS Tutorial App">
    <script src="js/libs/jquery-1.11.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="js/libs/angular-route.min.js"></script>
    <script src="js/libs/angular-resource.min.js"></script>
    <script src="js/libs/angular-cookies.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
</head>


<body>
    <div ng-view></div>
</body>
</html>

Answer 2

我掀起了一个基于你的简化例子。我不确定你为什么没有显示任何错误，但主要问题是你在html5Mode中输了一个错字。这是一个基于您的代码的工作示例Plunker：

http://plnkr.co/edit/MZIxG2sasm1hV1vA21Fa?p=preview

请注意，您的html5Mode函数中存在大小写错误，您的模式为小写：

helloWorldApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider,$locationProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'main.html',
            controller: 'MainCtrl'
        }).when('/show', {
            templateUrl: 'show.html',
            controller: 'ShowCtrl'
        });
        $locationProvider.html5Mode(false).hashPrefix('!');
    }
]);

运行应用程序时，AngularJS HelloWorld没有显示

2 个答案: