AngularJS 添加控制器答案

【问题标题】：AngularJS adding controllerAngularJS 添加控制器
【发布时间】：2016-06-05 03:28:26
【问题描述】：

我正在使用 MEAN 建立一个单页网站，我尝试了多个教程并在 Google 上搜索了很多示例，但我似乎无法使其正常工作。我正在为我的模板使用angular-routing，但是当我添加一个控制器时 - 模板没有显示。没有任何错误。

app.js

angular.module('sampleApp', ['frontPageCtrl','ngRoute', 'appRoutes']);

appRoutes.js

angular.module('appRoutes', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider 

        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'frontController'
        })
        .otherwise({
            redirectTo: '/'
        });


    $locationProvider.html5Mode(true);
    }]);

frontPageController.js

angular.module('frontPageCtrl', [])
.controller('frontController', function($scope, $http) {
});

在我的index.html 文件中，我首先包含app.js 和角度包含之后的所有三个文件。

编辑：

这是我的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">

  <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/frontPage.css">
<link rel="stylesheet" href="libs/bootstrap/"

<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>

<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/controllers/frontPageController.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="frontController">
<div id="container">

<div id="content">
    <div ng-view></div>

</div>
</div>
</body>
</html>

【问题讨论】：

添加一个 plnkr 以便其他人可以更轻松地提供帮助
plnkr? @NitsanBaleli
是 frontController 作为变量 - 在你有 $routeProvider 的那个文件中可用？然后使用frontController - 不带引号（！）
你能显示你的 index.html 文件吗？
@codeninja.sj 添加了我的索引文件

标签： angularjs angular-routing angular-directive angular-template angular-controller

【解决方案1】：

检查事项

您是否在您的主登录页面中添加了 ng-view
您是否在主着陆页中添加了 ng-app="sampleApp"。
在控制器中放置断点只是为了确保它进入那里
检查网络选项卡并确保正在加载所有 javascript 文件

如果这回答了您的问题，请不要忘记将其标记为答案:)

【讨论】：

【解决方案2】：

据我查看您的代码后所见，您的依赖注入是错误的。查看appRoutes.js、app.js、index.html 中的更改，您需要在views 文件夹中的home.html 和frontController。

你的 app.js 应该是：

angular.module('appRoutes', []);

你的 appRoutes.js 应该是：

    angular.module('sampleApp', ['frontPageCtrl','ngRoute', 'sampleApp'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

        $routeProvider 

            .when('/', {
                templateUrl: 'views/home.html',
                controller: 'frontController'
            })
            .otherwise({
                redirectTo: '/'
            });


        }]);

还有你的frontPageController.js：

    angular.module('frontPageCtrl', [])
    .controller('frontController', function($scope, $http) {
    });

并且，在您的 Index.html 中：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/frontPage.css">
      <link rel="stylesheet" href="libs/bootstrap/"
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
      <script src="js/controllers/frontPageController.js"></script>
   </head>
   <body ng-app="sampleApp">
      <div id="container">
         <div id="content">
            <div ng-view></div>
         </div>
      </div>
   </body>
</html>

而且，您的 home.html 应该有控制器 frontController。默认情况下，如果ng-controller="frontController" 未使用，您的home.html 将采用frontController。

<div ng-controller="frontController">

这里是工作插件：http://plnkr.co/edit/ohe4U0Am83U5Hj05HOIv?p=preview

【讨论】：

试过了还是不行
让我编辑它，你错过了你的索引，这就是我假设并发布它的原因。
仍然无法正常工作，我什至尝试将我所有的 Angular 代码放在与 sheshen 对原始帖子发表评论的同一个文件中。
检查 plunker ，它的工作，plunker 链接在我的答案的底部。如果您检查了控制台。 HTML5 模式下的 $location 需要存在标记。
你把标签放在哪里了？不要在 plunker 中看到它