javascript - Angular - 脚本加载顺序

标签 javascript angularjs

在使用 MVC 多年后,我刚刚开始使用 Angular。我对 js、HMTL 非常熟悉,但在 Angular 世界中还是初学者。

我花了 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">

AngularApp.js

 debugger;
    angular.module('perica', ['ngRoute']).config(['$routeProvider','$locationProvider', function ($routeProvider,  $locationProvider) {

        console.log('in');

            debugger;

            $routeProvider.when('/test', {
            templateUrl: 'views/Account/_Login.html'
    })
    $locationProvider.html5Mode(true);
    }]);

和AccountController.js

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

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

正如您所看到的,这是一个 super 简单的应用程序。

根据所有编码逻辑,我应该首先加载 Angular 核心脚本,然后加载我的 Angular 应用程序,最后加载 AngularControles。

当我运行应用程序时,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这里两次并且从未真正增强您现有的模块。

<小时/>

这是一个working JSFiddle (link)当您的应用程序运行时。我直接从 Javascript 框架/扩展 菜单加载 AngularJS 并引用外部 JS 资源 angular-route (取自cdnjs:https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js)。

我基本上只是简单地连接了你的 AngularApp.jsAccountController.js内容来模拟一个接一个地加载它们。

<小时/>

请注意,您还必须声明控制您的 View 的 Controller :我冒昧地增强了您的<body ng-app="perica">元素如下:

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

关于javascript - Angular - 脚本加载顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34882574/

相关文章:

javascript - 当前时间是否在 X 和 Y 时间之间?

javascript - 从javascript中的原型(prototype)模型中可以吸取哪些教训?

javascript - 服务器端代码 Node 内的套接字发出

javascript - 在 angularjs 中点击时制作工具提示

javascript - 如何给回调函数添加参数?

javascript - Wavemaker 7 中的服务变量事件

javascript - 需要了解 Angular.js 中的依赖注入(inject)

jquery - AngularJs 中的数据关闭后日期选择器不工作

javascript - AngularJS - $scope数据更改不影响 View

javascript - 从 CoffeeScript javascript if 语句中中断