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 - 为什么应用程序不是路由？

回答

相关问题