Javascript AngularJS路由和模型-我走对了吗？_Javascript_Html_Angularjs

Javascript AngularJS路由和模型-我走对了吗？

javascript html angularjs

Javascript AngularJS路由和模型-我走对了吗？,javascript,html,angularjs,Javascript,Html,Angularjs,我刚开始将我们的应用程序转换为AngularJS，老实说。。。这是一件痛苦的事。AngularJS与传统的普通Javascript有很大不同我只是想制作一个显示登录屏幕（通过AJAX获取数据）的应用程序，然后显示一个“文章信息”页面。简单明了——我也这么想我制作了两个html页面，并制作了两个模块。一个模块供用户使用，一个模块供文章使用。一页用于登录，一页用于文章信息这两个页面都包括角度模块、路由模块和我的两个模块： <script src="angular/angular.js"&

我刚开始将我们的应用程序转换为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>

“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模块：

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

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

通过为一个模块（User/Sachbearbeiter和Artikelinfo/article-info）构建一个包含两个单独的.html文件和两个单独的.js文件以及所有控制器和工厂的单页应用程序，我的做法是否正确

抓住angularJS让我头晕目眩。。。我发现的所有NG路由示例都没有使用两个不同的.js文件和两个不同的.html文件

有什么建议或帮助吗

您好，

托马斯

所以我要说的第一件事是好的角度就是好的Javascript，所以不要担心你会达到目的。角度只是需要很短的时间来适应。我能推荐的最好、最快的初级读物是Codecademy。它只需要几个小时就可以完成，你会非常高兴你做到了：

我建议你看一看，这是一个更好的角度应用路由器实现

无论如何，您正在创建两个模块，并将相同的路由添加到这两个模块中。我的建议是只有一个模块处理路由。并制作其他模块来处理应用程序的其他重要部分。但对于小型应用程序，实际上只需要一个模块。

好的，多亏了你们，我想我已经拥有了它。我的主html文件（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>

$location.path("/artinfo");

路由模块准备路由：

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

现在我已经加载了所有模块，可以像这样简单地切换视图：

<!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>

$location.path("/artinfo");

我唯一关心的是主模块。似乎它必须加载所有模块。当有成百上千的人时，这会产生问题吗

Thomas

尝试使用

href=“#artinfo”

单击链接之前，您的url是什么样子的？将链接更改为“”后，它只需重新加载页面（因为“artinfo”也是url中服务器名之后的部分）。因此，在单击之前，我有“”，在单击之后，我也有“”，因为页面被重新加载。当使用“”时，URL在单击之后更改为“”，但我保留在登录页面（index.html）。

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