Question

我在创建此控制器之前注意到ng-app =＆＃34; myApp＆＃34;用输入字段和之前的模板打破了数据绑定。现在我有一个带路由提供者的控制器，而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

观看代码的输入很少：

执行CTRL + Shift + I并在浏览器中打开控制台选项卡以查看报告的错误，因为您的代码有太多逻辑错误，需要调试。
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>

Answer 2

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

上的工作代码

并且您还没有在应用中添加views/login.html代码。

Angularjs控制器ng-app无法正常工作

2 个答案: