AngularJs - ng - viewは私には役に立たない

私はAngularjsを学んでいます。これは私の最初のコードですが、バグを見つけることができません.NGViewはデータを表示しません。私はmiコードのデバッグ方法を知らない。誰かがng-viewを使ってデータを表示するのを手伝ってください。AngularJs - ng - viewは私には役に立たない

これは私のコードです：

Index.htmlと

<!DOCTYPE html> 
<html ng-app="FinalApp"> 
<head> 
    <title>AngularJS</title> 
    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.css"> 
    <link rel="stylesheet" type="text/css" href="css/lumx.css"> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>--> 
    <script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script> 
    <!--<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.5/angular-parse-ext.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/services.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/lumx.js"></script> 
</head> 
<body> 
    <nav> 
     <div class="bgc-black-1 tc-white" flex-container="row" flex-align="center center"> 
      <div flex-item="4"> 
       <h1 class="fs-display-3 display-block">Posts App</h1> 
      </div> 
      <div flex-item="1"> 
       <a href="#">Inicio</a>    
      </div> 
      <div flex-item="1"> 
       <a href="#">Crear Post</a>    
      </div> 
     </div> 
    </nav> 
    <div flex-container="row" flex-aling="center"> 
     <div ng-view flex-item="9"></div> 
    </div> 
</body> 
</html>

とコントローラが

angular.module('FinalApp') 
    .controller('MainController',function($scope,$resource){ 
    Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'@id'}); 
    $scope.posts = Post.query();//agrupamos los posts 
    });

Home.html

です

<lx-tabs> 
    <lx-tab heading='Posts'> 
     <div class='p+'> 
      <div class='card' ng-repeat='post in posts'> 
       <div class='p+'> 
        <strong class='fs-headline display-block tc-red-900'> 
         {{post.title}} 
        </strong> 
        <div class='paragrah fs-body-1 mt+'> 
         {{post.body}} 
        </div> 
        <div class='card_actions'> 
         <a href='#'>Leer mas</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </lx-tab> 
    <lx-tab heading='Users'> 
     <div class='p+'> 
      hello world users 
     </div> 
    </lx-tab> 
</lx-tabs>

App.js

angular.module('FinalApp',['lumx','ngRoute']) 
    .config(function($routeProvider){ 
    $routeProvider 
     .when('/',{ 
      controller: 'MainController', 
      templateUrl: 'templates/home.html' 
     }) 
    });

最後に私はあなたには、アプリケーションとLumXのバージョンのフロントエンドはv1.5.31

出典

2017-09-19 Arturo Arenas

Chrome開発ツールを使用してit.https：//developer.chrome.com/devtoolsをデバッグする – yesIcan

まず作業のデモであることを確認するためにLumXを使用しています下のリンクでそれを見つけることができます！

JSFiddle Demo

私はあなたのコードをチェックし、唯一のいくつかのマイナーな修正があります。

異なるファイルでangular.module('FinalApp')を別々に定義する代わりに、次のような構文を試してみてください。

var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']); 
app.config(function($routeProvider){ 
    $routeProvider.when('/',{ 
      controller: 'MainController', 
      templateUrl: 'home.html' 
     }) 
    }); 

app.controller('MainController',function($scope, $resource){ 
    var Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'@id'}); 
    console.log(Post.query()); 
    $scope.posts = Post.query();//agrupamos los posts 
});

したがって、このコードを1回だけ定義し、変数に割り当てることができます。この変数は、上記のコードに示すように、プロジェクトの任意の場所で使用できます。したがって、依存関係は常にすべてのコントローラで使用できます。

角度の$resourceを使用するためには、あなたはモジュールの依存関係に追加する必要がありますファイルを含む後のファイルangular-resource.min.jsもが、含める必要があります。

var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);

マイナーな提案が1つあります。タブにはラベルが付いていないということです。そのように定義することができます。あなたは

私は設定に加えた変更を無視する必要があるので、

<lx-tab heading='Users' lx-label="Users"> <div class='p+'> hello world users </div> </lx-tab>

私は、あなたが通常の方法自体を使用することができ、ルータの異なるページを作成するためのスクリプトタグでテンプレートを使用していますセクションは、以下の部分を意味します。

app.config(function($routeProvider){ 
    $routeProvider.when('/',{ 
      controller: 'MainController', 
      templateUrl: 'home.html' 
     }) 
    });

まだエラーが表示されている場合はお知らせください。ハッピーコーディング！

出典

2017-09-19 01:59:28

AngularJs - ng - viewは私には役に立たない

答えて

関連する問題