Angular-腳本加載順序

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

如您所見，它是一個超級簡單的應用程序。

根據所有編碼邏輯，我應該首先加載有角度的核心腳本，然后再加載我的有角度的應用程序，最后再加載angularcontrols。

當我運行該應用程序時，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 兩次，卻從未真正增強現有模塊。

這是運行您的應用程序的有效JSFiddle（鏈接）。 我直接從Javascript框架/擴展菜單中加載了AngularJS ，並引用了用於Angular angular-route的外部JS資源（從cdnjs獲取： https : //cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular -route.min.js ）。

我基本上只是將AngularApp.js和AccountController.js內容串聯AngularApp.js ，以模擬一個接一個地加載它們。

請注意，您還必須聲明控制您的視圖的控制器 ：我自由地增強了您的<body ng-app="perica">元素，如下所示：

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

Angular-腳本加載順序

問題描述

1 個解決方案

解決方案1
4 已采納 2016-01-19 17:06:58

Angular-腳本加載順序

問題描述

1 個解決方案

解決方案1 4 已采納 2016-01-19 17:06:58

解決方案1
4 已采納 2016-01-19 17:06:58