Angularjs 控制器 ng-app 不工作

Question

我注意到在创建此控制器之前，ng-app="myApp" 打破了输入字段和我之前使用的模板的数据绑定。现在我有一个带有路由提供程序的控制器，index.html 中的 ng-view 根本不起作用（空白页）。我错过了什么吗？

    <!doctype index.html>
    <html lang="en" ng-app="myApp">
    <head>
    <meta charset="UTF-8">
    <title>Angular Data</title>
    <link rel="stylesheet" href="css/style.css">
    <script    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js">             </script>
     <script src="js/lib/angualar.min.js"></script>
   <script src="js/lib/angualar-route.min.js"></script>
   <script src="js/lib/angualar-animate.min.js"></script>  
   <script src="js/app.js"></script>
  </head>
  <body>
  <header>
    <nav class="cf" ng-include="'views/nav.html'"></nav>
  </header>
  <div class="page">
  <main class="cf" ng-view></main>
  </div>
  </body>
  </html>

<!doctype js/app.js>
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);

var appControllers = angular.module('appControllers', []);

myApp.config(['$routeProvider', function($routeProvider){
    $routeProvider.
      when('/login', {
        templateUrl: 'views/login.html'
    })
}]);

<!doctype views/nav.html>
<div class="table">
  <ul>
    <li class="branding"><a ng-href="#/">angularData</a></li>
    <li><a ng-href="#/meetings">Meetings</a></li>
    <li><a ng-href="#/login">Login</a></li>
    <li><a ng-href="#/register">Register</a></li>
  </ul>
</div>

Answer 1

什么是 <!doctype index.html> 如果它是您代码的一部分，则从您的代码中删除所有 doctype。您在 plunker

上的工作代码

而且您还没有将 views/login.html 代码包含在您的应用中。

Answer 2

观看您的代码的输入太少：

在浏览器中CTRL+Shift+I打开console选项卡查看报错，你的代码逻辑错误太多，需要调试
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);

在 app.js 中，appControllers 被用作依赖项，但它从未在您的 html 中作为 data-ng-controller="appController"

提及

因此删除 appControllers 依赖项。

根据您的代码上下文

var appControllers = angular.module('appControllers', []); 也是多余的，并且会出现错误，因为 html

中没有定义 appControllers

这是工作代码，保持简单：

<html ng-app="myApp">
    <head>
    <meta charset="UTF-8">
    <title>Angular Data</title>
    <link rel="stylesheet" href="css/style.css">
    <script    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js">             </script>
     <script    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
       <script    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
   <script src="js/app.js"></script>
   <script>
   angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
    $routeProvider.
      when('/login', {
        templateUrl: 'views/login.html'
    })
}]);
   </script>
  </head>
  <body>
  <header>
    <div class="table">
  <ul>
    <li class="branding"><a ng-href="#/">angularData</a></li>
    <li><a ng-href="#/meetings">Meetings</a></li>
    <li><a ng-href="#/login">Login</a></li>
    <li><a ng-href="#/register">Register</a></li>
  </ul>
</div>
  </header>
  <div class="page">
  <main class="cf" ng-view></main>
  </div>
  </body>
  </html>

Angularjs 控制器 ng-app 不工作

Angularjs controller ng-app not working

controller

angularjs