Question

我正在学习Angularjs，这是我的第一个代码，但我无法找到错误，ng-view无法显示数据。我不知道如何调试mi代码。请有人帮我用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制作应用程序的前端，LumX的版本是v1.5.31

Answer 1

首先是工作演示，你可以在下面的链接中找到它！

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   
});

因此，您只需将其定义一次并将其分配给变量，该变量可以在项目中的任何位置使用，如上面的代码所示。因此，依赖关系始终可供所有控制器使用！

要使用$resource角度，您需要包含文件 angular-resource.min.js ，并且在包含文件后，您需要将其添加到模块依赖项中。

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

我还想提出一个小建议。标签没有标签。你可以这样定义它们。

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

如果仍然显示错误，请告诉我，Happy Coding！

AngularJs - ng - 查看对我不起作用

1 个答案: