Question

在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!';
            }]);

因此您可以看到它是一个超级简单的应用程序。

通过所有编码逻辑，我应首先加载角度核心脚本，然后加载角度应用程序，最后加载角度控制器。

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

但当我颠倒路径并放置第一个AccountController.js之后，AngularApp.js一切正常，没有任何问题

如果有人能够对这个问题有所了解，我将非常感激谢谢！

Answer 1

使用......

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 framework / extensions 菜单加载了 AngularJS ，并引用了angular-route的外部JS资源（从 cdnjs 获取： https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js）。

我基本上只是简单地连接了您的AngularApp.js和AccountController.js内容，以模拟一个接一个地加载它们。

请注意，您还必须声明控制视图的控制器：我冒昧地按如下方式增强您的<body ng-app="perica">元素：

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

Angular - 脚本加载顺序

1 个答案: