Javascript 角度-脚本加载顺序_Javascript_Angularjs

Javascript 角度-脚本加载顺序

javascript angularjs

Javascript 角度-脚本加载顺序,javascript,angularjs,Javascript,Angularjs,在MVC工作多年后，我刚刚开始使用Angular。我对js、HMTL非常熟悉，但仍然是角度世界的初学者我花了3个小时试图找出我的应用程序出了什么问题因此，该应用程序有3个文件 index.html <body ng-app="perica"> <p>main</p> {{ tagline }} <a ng-click="logOut();">Logout</a> &

在MVC工作多年后，我刚刚开始使用Angular。我对js、HMTL非常熟悉，但仍然是角度世界的初学者

我花了3个小时试图找出我的应用程序出了什么问题

因此，该应用程序有3个文件

index.html

 <body ng-app="perica">

        <p>main</p>
        {{ tagline }}
        <a ng-click="logOut();">Logout</a>
        <div ng-view><p>inside</p></div>


    </body>
    <script type="text/javascript" src="../components/angular/angular.js"></script>
<script type="text/javascript" src="../AgularApp.js"></script>
<script type="text/javascript" src="../controllers/AcountController.js">

和AccountController.js

   var myApp = angular.module('perica', []);
    myApp.controller('AcountController', ['$scope', function ($scope) {

     $scope.tagline = 'The square root of life is pi!';
            }]);

正如您所看到的，它是一个超级简单的应用程序

根据所有的编码逻辑，我应该首先加载angular核心脚本，然后加载angular应用程序，最后加载AngularControls

当我运行应用程序时，Chrome点击了第一个调试器（AngularApp.js文件中angular.module的上方），直接跳入AccountContoler.js，完全忽略了AngularApp.js中定义的内容

但是当我倒转路径，先放AccountController.js，然后放AngularApp.js时，一切正常

如果有人能解释一下这个问题，我将不胜感激谢谢

通过使用

var myApp = angular.module('perica', [])

。。。在您的

AccountController.js

中，您没有加载您已经存在的

'perica'

应用程序（在先前加载的

AngularApp.js

中声明）：
您正在重新定义

perica

应用程序

引用现有模块的正确方法是使用：

angular.module('perica')
                       ^
              no dependency declared

而不是：

angular.module('perica', [])
                         ^
                    dependencies

一旦您熟悉了它，其背后的逻辑就非常简单：如果您在“加载”模块时声明依赖项，那么您就是在创建该模块。否则，您将引用它
TL；DR:您基本上在这里使用了
setter
两次，并且从未实际增强您现有的模块

下面是一个运行应用程序的示例。我直接从Javascript框架/扩展菜单加载了AngularJS，并引用了
angularRoute
的外部JS资源（取自cdnjs：）
我基本上只是简单地连接了
AngularApp.js
和
AccountController.js
内容，以模拟一个接一个地加载它们

请注意，您还必须声明控制视图的控制器：我冒昧地增强了
元素，如下所示：

<body ng-app="perica" ng-controller="AcountController">

通过使用

var myApp = angular.module('perica', [])
。。。在您的
AccountController.js
中，您没有加载您已经存在的
'perica'
应用程序（在先前加载的
AngularApp.js
中声明）：
您正在重新定义
perica
应用程序
引用现有模块的正确方法是使用：

angular.module('perica') ^ no dependency declared
而不是：

angular.module('perica', []) ^ dependencies
一旦您熟悉了它，其背后的逻辑就非常简单：如果您在“加载”模块时声明依赖项，那么您就是在创建该模块。否则，您将引用它
TL；DR:您基本上在这里使用了
setter
两次，并且从未实际增强您现有的模块

下面是一个运行应用程序的示例。我直接从Javascript框架/扩展菜单加载了AngularJS，并引用了
angularRoute
的外部JS资源（取自cdnjs：）
我基本上只是简单地连接了
AngularApp.js
和
AccountController.js
内容，以模拟一个接一个地加载它们

请注意，您还必须声明控制视图的控制器：我冒昧地增强了
元素，如下所示：

<body ng-app="perica" ng-controller="AcountController">

完全正确！！！这么愚蠢的错误。谢谢！现在一切都很完美，当然我需要先参考mainapp.js，然后再参考控制器。非常感谢你！很高兴帮了你的忙；）确切地这么愚蠢的错误。谢谢！现在一切都很完美，当然我需要先参考mainapp.js，然后再参考控制器。非常感谢你！很高兴帮了你的忙；）