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>

ここにメッセージ

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

を示すことは、その後

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

とコントローラをapp.js main.htmlとし、show.htmlのコードがあるさ.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

ルートtamplateはpartial/main.htmlとpartialsです/show.html – strava1

コンソールでこのエラーが表示されます〜* "TypeError：$ locationProvider.html5modeは関数ではありません" *。おそらく 'html5Mode'（大文字の" M "）を意味しています。ここで修正されました〜http://plnkr.co/edit/siXKQtxFOgB1HQAw0X1j?p=preview – Phil

ためのブートストラップでNG-アプリが欠落している御嵩。私はなぜあなたのエラーが表示されないのかわかりませんが、主な問題は、あなたが入力した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の仕事では、私はplunkerからあなたのコードをコピー/ペーストして、もう一度大きなものを取得しています。 – strava1

@ strava1このコードをコピー/ペーストすると、テンプレートへのパスが正しくないでしょうか？ – Phil

まず、ほとんどの前部は、あなたが、私が働くあなたに基づいて簡略化した例を手早く角度

<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アプリを実行すると何も表示されない

答えて

関連する問題