AngularJS HelloWorld在運行應用程序時沒有顯示

-1

我開始學習angularJs，第一次設置時，應用程序不會工作。我的代碼有什麼問題？我嘗試了一切，我不知道該怎麼做。在瀏覽器中運行時，只顯示html，但消息不顯示？請幫忙！AngularJS HelloWorld在運行應用程序時沒有顯示

這裏是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('!'); 
}]);

和控制器.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"; 
    }]);

來源

2016-11-20 strava1

確切位置在哪裏是你的路線模板？你的代碼表示'partials/main.html' /'partials/show.html'，但HTML註釋顯示'chapter2/main.html' /' chapter2/show.html' – Phil

路由模板位於partials/main.html和partials /show.html – strava1

我在控制檯中看到這個錯誤〜*「TypeError：$ locationProvider.html5mode不是函數」*。你可能是指'html5Mode'（大寫「M」）。在這裏修復〜http://plnkr.co/edit/siXKQtxFOgB1HQAw0X1j?p=preview – Phil

引導程序我颳起了基於該工作你一個簡單的例子。我不確定你爲什麼沒有顯示任何錯誤，但主要問題是你在html5Mode有一個錯字。這是基於你的代碼工作的例子Plunker：您在html5Mode功能有一個案子錯誤

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

注意，您必須在小寫模式：

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('!'); 
    } 
]);

來源

2016-11-20 23:29:24 Toddsden

除了模板文件的路徑（我們只能假設在OP代碼中是正確的）之外，這有什麼不同？ – Phil

是的，在Plunker的工作中，我從抄襲者身上覆制/粘貼你的代碼，並且再次獲得任何東西。 – strava1

@ strava1如果您複製/粘貼此代碼，模板的路徑是否不正確？ – Phil

第一和前最御嶽你缺少的NG-應用程序，它是角

<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>

來源

2016-11-20 23:03:21 Aravind

的意思是？你能否說得通嗎？爲什麼它不應該在html標籤中？ – Aravind

對不起，我查了文檔。我刪除了我的評論。該文檔說，它可以在標籤上。我也在我自己的代碼中驗證過，在上加ng-app確實有效。對困惑感到抱歉。 – Toddsden

沒問題。 @Toddsden。 :) – Aravind

AngularJS HelloWorld在運行應用程序時沒有顯示

回答

相關問題