AngularJS控制器在單獨的文件中沒有識別範圍

我正在學習AngularJS，到目前爲止我有一個骨架應用程序的開始，主索引頁和兩個模板：一個登錄頁面和一個擁有非常簡單控制器的主頁。我還沒有深入骨骼，所以我試圖完成比說認證更基礎。AngularJS控制器在單獨的文件中沒有識別範圍

我編碼的原因是爲了嘗試應用我在時間學習AngularJS中閱讀的概念;這是通過給每個模板（或部分）它自己的控制器在它自己的JS文件中來模塊化你的代碼。我相信這是我應該儘早申請的最佳做法，因爲這可能會在未來增長很多。這就是爲什麼我遠離將我的控制器放在單個文件中的原因，我知道這很好。

現在事不宜遲，請看看下面的代碼，我站在那裏目前的參考：

的index.html

<!DOCTYPE html> 
<html ng-app="MyApp"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>MyApp</title> 
    <link rel="stylesheet" href="assets/css/normalize.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/css/animate.css"> 
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> 
</head> 
<body> 
    <div ng-view> 
     <!-- loaded view here --> 
    </div> 

    <!-- JS imports --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script> 
    <script src="assets/js/app.js"></script> 
</body> 
</html>

app.js

angular.module('MyApp', [ 
    'ngRoute' 
]) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when("/login", { 
     templateUrl: 'assets/partials/login.html', 
     controller: 'LoginCtrl' 
    }) 
    .when("/home", { 
     templateUrl: 'assets/partials/home.html', 
     controller: 'HomeCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/login' 
    }); 
}]);

登錄。 html，home.html

<div class="container-fluid text-center"> 
    <h2>{{pageTitle}}</h2> 
</div>

個

angular.module('MyApp') 

.controller('LoginCtrl', ['$scope', function($scope) { 
    $scope.pageTitle = "Hello! Sign In"; 
}]);

home.js

angular.module('MyApp') 

.controller('HomeCtrl', ['$scope', function ($scope) { 
    $scope.pageTitle = "Welcome to the Home Page!"; 
}]);

那麼究竟是什麼問題，我的工作過？ {{pageTitle}}是加載視圖時顯示的內容，而不是通過範圍傳入的實際值。請讓我知道這裏有什麼問題，我願意提供關於如何改進我的代碼的所有建議，所有幫助都非常感謝！

來源

2015-04-17 AGE

你沒有提到在您的HTML都login.js和home.js。添加與它們相對應的腳本標籤。 –

沒關係。它發生了。大問題總是來自微小的錯誤。 –

您還沒有將您的login.js和home.js包含到index.html文件中。你也不需要在所有的文件中包含angular.module('MyApp')。它已經在app.js中，同樣的實例也可以在這裏使用。

你可以做

MyApp.controller('HomeCtrl', ['$scope', function ($scope) { 
    $scope.pageTitle = "Welcome to the Home Page!"; 
}]); 

MyApp.controller('LoginCtrl', ['$scope', function($scope) { 
    $scope.pageTitle = "Hello! Sign In"; 
}]);

來源

2015-04-17 04:29:08

你只需要聲明模塊一次，併爲你實例化角色。一旦它在那裏，你可以在所有其他文件中使用同一個實例，這取決於相同的模塊。你只是不需要在你的所有文件中實例化。 –

非常有趣，是否有可能包含這個建議作爲我的問題的編輯？這將是非常棒的幫助 – AGE

我已經更新了所有這個plunk。 http://plnkr.co/edit/rj3iNHqSVMqNoxtr79CM?p=preview –

您需要包括後app.js

<script src="assets/js/app.js"></script> 
<script src="assets/js/home.js"></script> 
<script src="assets/js/login.js"></script>

在HTML中home.js和login.js控制器也可以創建一個文件名controller.js，並添加所有的控制器在它簡單的項目，這樣，你不不必從html中提出對js文件的新請求。

來源

2015-04-17 04:28:42 Saqueib

AngularJS控制器在單獨的文件中沒有識別範圍

回答

相關問題