AngularJS - 爲什麼應用程序不是路由？

我想做一個AngularJS應用程序，但我不明白爲什麼它不正確路線，我跟着一些指南，但還沒有使它的工作。AngularJS - 爲什麼應用程序不是路由？

下面是代碼：

的index.html

<!DOCTYPE html> 
<html lang="en" ng-app="App"> 
<head> 
<meta charset="UTF-8"> 
<title>Example App</title> 
</head> 
<body> 

    <div ng-view></div> 

    <!-- Vendor libraries --> 
    <script src="lib/jquery-2.1.4.min.js"></script> 
    <script src="lib/angular.min.js"></script> 
    <script src="lib/angular-route.min.js"></script> 
    <!-- Application Files --> 
    <script src="app/app.js"></script> 
    <script src="app/home/controllers/HomeController.js"></script> 
</body> 
</html>

app.js

(function() { 
    'use strict'; 

    var app = angular 
      .module('App', ['ngRoute']); 

    app.config(function($routeProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home/views/index.html', 
       controller: 'HomeController', 
       controllerAs: 'home' 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    }); 
})();

HomeController.js

(function() { 
    'use strict'; 

    angular 
     .module('App') 
     .controller('HomeController', HomeController); 

    function HomeController(){ 
     var home = this; 
    } 
})();

家的index.html的

<div> 
    Example text 
</div>

在此先感謝

來源

2015-11-24 forkfork

或許你可以在這裏發表您的代碼的最重要的部分是一個片段，而不是指一個外部鏈接？只要鏈接不再有效，這篇文章就會過時。 –

@BryanOemar感謝您的建議，我改變了這一點。 – forkfork

我不認爲你需要包裝你的代碼立即執行功能。你已經包含了ng-app屬性意味着angular會在需要的時候執行你的代碼 – jpmcc

你看到在控制檯中的錯誤？您可能收到與控制器相關的錯誤，因爲'home/controllers/HomeController'不是引用HomeController的正確方法。它應該改爲：'HomeController'。 Angular將完成遍歷你的控制器的工作並找到一個匹配該字符串的工作。

這裏有一個更新的app.js：

(function() { 
    'use strict'; 

    var app = angular 
      .module('App', ['ngRoute']); 

    app.config(function($routeProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home/views/index.html', 
       controller: 'HomeController', 
       controllerAs: 'home' 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    }); 
})();

此外，在HomeController.js，你重新實例通過包括名稱後括號內的模塊「應用」。相反，修改它以更簡潔閱讀：

(function() { 
    'use strict'; 

    angular 
     .module('App') 
     .controller('HomeController', HomeController); 

    function HomeController(){ 
     var home = this; 
    } 
})();

來源

2015-11-24 22:42:51

我在控制檯中看到沒有錯誤，我提出了您所建議的更改，但仍未看到任何內容。 – forkfork

正確的角度和角度路線加載？ –

是的，我發現感謝Claies，templateUrl無法正常工作。但你的建議也幫助了我很多。謝謝。 – forkfork

AngularJS - 爲什麼應用程序不是路由？

回答

相關問題