Question

我刚开始将我们的应用程序转换为AngularJS，老实说......这是***的痛苦。 AngularJS与旧的普通Javascript不同！

我只想创建一个显示登录屏幕的应用程序（通过AJAX获取数据），然后显示“文章信息”页面。简单明了 - 所以我想。

我制作了两个html页面，并制作了两个模块。用户的一个模块和文章的一个模块。一页用于登录，一页用于文章信息。

两个页面都包括角度模块，路由模块和我的两个模块：

<script src="angular/angular.js"></script>
<script src="angular/angular-route.js"></script>
<script src="modules/sachbearbeiter.js"></script>       
<script src="modules/artikelinfo.js"></script>

在模块中，我做了一切正确的路由，'sachbearbeiter.js'的相关部分：

var sb = angular.module("sb", ['ngRoute']);

sb.config(function ($routeProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: '/index.html',
            controller: 'sachbearbeiter'
        })  
        .when('/artinfo', {
            templateUrl: '/artinfo.html',
            controller: 'artikelinfo'
        })
        .otherwise({
            redirectTo: '/login'
        });
});

'artikelinfo.js'的相关部分：

var art = angular.module("art", ['sb, ngRoute']);

art.config(function ($routeProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: '/index.html',
            controller: 'sachbearbeiter'
        })  
        .when('/artinfo', {
            templateUrl: '/artinfo.html',
            controller: 'artikelinfo'
        })
        .otherwise({
            redirectTo: '/login'
        });
});

在index.html中我定义了我的sachbearbeiter-module：

<div ng-app="sb" ng-controller="sachbearbeiter">

之后我添加了一个简单的链接，并希望我可以调用我的'artinfo.html'：

<a href="#/artinfo">Artikelinfo</a>

但它只是简单地将URL栏更改为：

SERVERNAME/artinfo//index.html#/artinfo

没有更多的事情发生。甚至没有Javascript调试输出。

我是通过构建具有两个单独的.html文件的SinglePageApplication和两个单独的.js文件以及一个模块的所有控制器和factorys（User / Sachbearbeiter和Artikelinfo /文章信息）而走上正轨吗？

掌握angularJS让我的头旋转...... 我发现的NG-Routing的所有例子都不使用两个不同的.js文件和两个不同的.html文件。

任何建议或帮助？

问候，托马斯

Answer 1

首先我要说的是好的Angular只是一个很好的Javascript，所以不要担心你会到达那里。 Angular只需要很短的时间来适应。我推荐的最好，最快的入门书是来自Codecademy。它应该只需要几个小时才能完成，你会很高兴你做到了： https://www.codecademy.com/learn/learn-angularjs

Answer 2

我建议你看一下，它是一个更好的Angular应用程序路由器实现。

无论如何，您正在创建两个模块并为它们添加相同的路由。我的方法是只有一个模块处理路由。并使其他模块处理应用程序的其他重要部分。但对于小型应用程序，您实际上只能拥有一个模块。

Answer 3

好的，谢谢你们，我想我已经得到了它。我的主要html-File（index.html）简单如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Artikelinfo</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>  

        <!-- Our main App, which includes all other modules -->
        <div ng-app="main" ng-view>
            <!-- Route-dependent content goes here -->
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <!-- AngularJS -->
        <script src="angular/angular.js"></script>
        <script src="angular/angular-route.js"></script>
        <!-- Modules -->
        <script src="modules/routing.js"></script>
        <script src="modules/sachbearbeiter.js"></script>       
        <script src="modules/artikelinfo.js"></script>
        <script src="modules/main.js"></script>
    </body>
</html>

主模块简单加载所有模块：

var main = angular.module("main", ['sb', 'art']);

路由模块准备路由：

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

现在我已经加载了所有模块，只需像这样切换视图：

$location.path("/artinfo");

我唯一关心的是主要模块。它似乎必须加载所有模块。当有数百甚至数千个问题时，这会产生问题吗？

托马斯

AngularJS路由和模型 - 我是在正确的轨道上吗？

3 个答案: