2016-05-07 7 views
1

動作しません。私は私の角度のプロジェクトを表示したときに私のメインのindex.htmlにテンプレートのHTMLをロードしたいのですが、私は常に空の画面を取得します。角度テンプレートルーティングが

<!DOCTYPE html> 
<html lang="nl" ng-app="store"> 
<head> 
    <meta charset="UTF-8"> 
    <title>NMDAD-II Web App</title> 
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body class="bg-darkRed" ng-controller="StoreController as store"> 

<div ng-view></div> 


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> 
<script src="vendor/angular/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="js/main.js"></script> 
<script src="app/app.js"></script> 
<script type="text/javascript"> 

    angular.module("store", ["ngRoute"]) 
      .config(function($routeProvider){ 
       $routeProvider 
         .when('/', { 
          templateUrl: 'app/home/home.view.html' 
         }) 
         .otherwise({ 
          redirectTo: '/' 
         }); 
      }); 

</script> 


<script id="__bs_script__">//<![CDATA[ 
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.2.js'><\/script>".replace("HOST", location.hostname)); 
//]]></script> 
</body> 
</html> 

私はブラウザ同期でも読み込もうとしましたが、それでも同じです。私はindex.htmlにhome.view.htmlをロードしたい。 app.jsにjavascriptを書き込もうとしましたが、まだ動作しませんでした。

EDIT:これは私のapp.js.です私のmain.jsはいくつかのjqueryの

function() { 


    'use strict'; 

    // Module declarations 
    angular.module('store', [ 
     // Angular Module Dependencies 
     // --------------------------- 
     'ngAnimate', 
     'ngMaterial', 
     'ngMessages', 
     'ngResource', 


     // Third-party Module Dependencies 
     // ------------------------------- 
     'ui.router', // Angular UI Router: https://github.com/angular-ui/ui-router/wiki 

     // Custom Module Dependencies 
     // -------------------------- 
     'store.home', 
     'store.services' 
    ]); 
    angular.module('store.home', []); 
    angular.module('store.services', []); 

    // Make wrapper services and remove globals for Third-party Libraries 
    angular.module('store') 
     .run(Run); 


    function Run(
     $_, 
     $faker 
    ) {} 



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

    app.controller('StoreController', function(){ 
     this.products = gems; 
    }); 

    var gems = [ 
     { 
      title: "Islay Blended Malt", 
      description: "The Isle of Islay is known for its peaty whiskies. For there is a great abundance of peat on the island, and because electricity reached Islay so late, peated was relied upon as a staple source of fuel. But there is so much than just peat to be found.", 
      price: "103.45", 
      canPurchase: true 

     }, 

     { 
      title: "Springbank 10 Year old", 
      description: "Blended from a mixture of bourbon and sherry casks, the light colour of this malt belies the richness of its character.", 
      price: "36.25", 
      canPurchase: true 

     }, 

     { 
      title: "Hazelburn 10 Year old", 
      description: "First released in 2014, this is the first bottling of Hazelburn at 10 years of age. Hazelburn is Springbank's triple-distilled, unpeated single malt.", 
      price: "37.75", 
      canPurchase: true 

     } 
    ] 

})(); 
+0

ブラウザコンソールにエラーがありますか? – Claies

+0

'main.js'と' app.js'には何が入っていますか? angular.min.js: –

+0

私のコンソールは、この言う117エラー:[NG:AREQ] http://errors.angularjs.org/1.5.5/ng/areq?p0=StoreController&p1=not%20a%20function%図2C%20got%20undefined HTTPで (ネイティブ)エラーで :// localhostを:3000 /ベンダー/角度/ angular.min.js:6:QBで412 (HTTP:// localhostを:3000 /ベンダー/角度/ angular.min.js:23:157) Paに(HTTP:// localhostを:3000 /ベンダー/角度/ angular.min.js:23:244) HTTPで:// localhostを:3000 /ベンダー/角度/ angular.min.js:89:77 O(HTTP:// localhostを:3000 /ベンダー/角度/ angular.min.js:72:75)で など.... – hxwtch

答えて

1

が含まれている私が見る問題は、角ロードする前に、角度-ルートをロードしているです。

に、これらの2つの行を切り替えてみてください:私はあなたがそれらをロードしているかのスクリプトをロードするとき、私はこのエラーReferenceError: angular is not definedを取得

<script src="vendor/angular/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> 

+0

おかげで、それはまだdoesnの」 – hxwtch

+0

角度ソースパスから '.min'を削除すると、より具体的なエラーメッセージ。 'vendor/angular/angular.min.js'というパスが存在しない可能性があります。 – sebenalern