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

【问题标题】：AngularJS Routing and Model - am I on the right track?AngularJS 路由和模型 - 我在正确的轨道上吗？
【发布时间】：2016-02-11 11:10:11
【问题描述】：

我刚开始将我们的应用程序转换为 AngularJS，老实说……这对 *** 来说是一个痛苦。 AngularJS 与老式的纯 Javascript 完全不同！

我只是想制作一个显示登录屏幕（通过 AJAX 获取数据）然后显示“文章信息”页面的应用。简单明了 - 我是这么想的。

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

两个页面都包含了angular模块、路由模块和我的两个模块：

<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 Bar 更改为：

SERVERNAME/artinfo//index.html#/artinfo

然后什么都没有发生。甚至没有 Javascript 调试输出。

通过构建一个包含两个单独的 .html 文件和两个单独的 .js 文件以及一个模块的所有控制器和工厂（用户/Sachbearbeiter 和 Artikelinfo/文章信息）的 SinglePageApplication，我是否走在正确的轨道上？

掌握 angularJS 让我头晕目眩…… 我为 NG-Routing 找到的所有示例都没有使用两个不同的 .js 文件和两个不同的 .html 文件。

有什么建议或帮助吗？

您好，托马斯

【问题讨论】：

尝试使用href="#artinfo"
点击链接前你的网址是什么样的？
将链接更改为“Artikelinfo”后，它只是重新加载页面（因为 'artinfo' 也是网址）。所以在点击之前我有“cd-dev-srv1/artinfo”，之后还有“cd-dev-srv1/artinfo”，因为页面会重新加载。
使用“Artikelinfo”时，点击后URL变为“cd-dev-srv1/artinfo/#/artinfo”。但我留在登录页面（index.html）。

标签： javascript html angularjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

我建议你看看ui-router，它是一个更好的 Angular 应用路由器实现。

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

【讨论】：

【解决方案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");

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

托马斯

【讨论】：