Angular + Requirejs - 每個數據重複兩次？

我在Requirejs下運行Angular，但是我有這種多次出現，其中控制器類中的數據重複兩次。除非我從div刪除ng-app="myApp"。爲什麼？Angular + Requirejs - 每個數據重複兩次？

welcomeController.js，

define(['app'], function (app) { 
    app.controller('welcomeController', ['$scope', function($scope) { 
     //your minsafe controller 
     $scope.message = "Message from WelcomeController"; 
     console.log($scope.message); // it is repeated twice here. 
    }]); 
});

HTML，

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script data-main="scripts/main.js" src="scripts/vendors/requirejs/require.js"></script> 
</head> 

<body> 
    <div ng-app="myApp"> 

     <div ng-controller="welcomeController"> 

      {{message}} 

     </div> 

    </div> 
</body>

main.js，

require.config({ 
    //baseUrl: "", 

    // alias libraries paths. Must set 'angular' 
    paths: { 
     'domReady': 'vendors/requirejs-domready/domReady', 
     'angular': 'vendors/angular/angular', 
     'angular-route': 'vendors/angular-route/angular-route', 
     'jquery': 'vendors/jquery/dist/jquery' 
    }, 

    // Add angular modules that does not support AMD out of the box, put it in a shim 
    shim: { 
     'angular': { 
      exports: 'angular' 
     }, 
     'angular-route': { 
      exports: 'angular' 
     } 
    } 
}); 

define([ 
    'controllers/welcomeController', 
    'bootstrap' 
]);

bootstrap.js，

define([ 
    'require', 
    'angular', 
    'app' 
], function (require, ng) { 
    'use strict'; 

    require(['domReady!'], function (document) { 
     ng.bootstrap(document, ['myApp']); 
    }); 
});

個

app.js，

但在角工作正常無Requirejs。我不需要從div中刪除ng-app="myApp"。爲什麼？

<head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="scripts/vendors/angular/angular.js"></script> 
     <script> 
      var myApp = angular.module('myApp',[]); 

      myApp.controller('welcomeController', ['$scope', function($scope) { 
       $scope.message = "Message from WelcomeController"; 
       console.log($scope.message); // It occurs only once. 
      }]); 
     </script> 
    </head> 

    <body> 
     <div ng-app="myApp"> 

      <div ng-controller="welcomeController"> 

       {{message}} 

      </div> 

     </div> 
    </body>

在Requirejs和Angular下我做了什麼錯誤？

來源

2014-10-29 laukok

您正在引導兩次Angular：一次使用ng-app指令，一次使用bootstrap.js中的ng.bootstrap(...)代碼！去自動（ng-app）或手動（angular.bootstrap）自舉。

此外，像何塞普在他（刪除）答覆中提到，最好是墊片angular-route爲：

shim: { 
    'angular-route': { 
     deps: ['angular'] 
    } 
}

這是不問題的原因，但會防止未來可能出現的問題（即在Angular之前加載的路線）。

angular-require-lazy可能包含角RequireJS整合一些有益的思路與延遲加載

來源

2014-10-29 08:30:01

感謝。它仍然是相同的 - 重複兩次仍然... – laukok 2014-10-29 08:32:48

你的意思是我不應該使用'ng-app'如果我得到手動（angular.bootstrap）bootstrapping？ – laukok 2014-10-29 08:35:45

你必須保留一個：'ng-app'或'ng.bootstrap'。 – 2014-10-29 08:42:46

Angular + Requirejs - 每個數據重複兩次？

回答

相關問題