Question

已成功安装angularjs和Twitter.Bootstrap套件

这是我的index.html：

<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/app.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
    <title>Amazing Todo</title>
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
</body>
</html>

这是我的app.js：

var TodoApp = angular.module("TodoApp", []).
    config(function ($routeProvider) {
        $routeProvider.
        when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
            otherwise({ redirectTo: '/' });
    });

var ListCtrl = function ($scope, $location) {
    $scope.test = "testing";
};

而且，这是我的list.html：

<h1>Test: {{test}}</h1>

这应该可以正常工作。但是index.html没有显示list.html的内容。我认为angularjs部分不能正常工作。

不知道我做错了什么？

Answer 1

定义模块后，您需要为该模块定义控制器，而不是单独定义。

因此，您的控制器应该重写为：

TodoApp.controller('ListCtrl', [ '$scope', '$location',
    function ($scope, $location) {
        $scope.test = "Testing";
    }
]);

这应该显示有问题的观点。

Answer 2

我想说，如果您在控制台中检查错误（在Chrome或IE中按F12），您应该看到：

...由于以下原因导致无法实例化模块 TodoApp ：错误：[$ injector：unpr]未知提供商： $routeProvider ...

这种期望的原因是我们要求IoC在没有正确列出依赖模块的情况下注入$routeProvider。这是上面的代码：

var TodoApp = angular
  // here we say: we do not need any other module
  .module("TodoApp", [])
  // here we ask: inject $routeProvider from other module
  .config(function ($routeProvider)

为了让它继续运行，我们必须包含模块'ngRoute'

var TodoApp = angular
  // here we say: we need these modules to make our module working properly 
  .module("TodoApp", [
    'ngRoute'
  ])
  // now we can ask for the provider, 
  // using minification-safe syntax
  .config(
  [        '$routeProvider',
  function ($routeProvider) {
      $routeProvider.
      ...
  }]);

并且也不要忘记也参考这个模块脚本：

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>

Answer 3

如果没有指定应用程序根目录的相对路径，您可以检查list.html与index.html在同一目录中的目录结构是什么？

Answer 4

由于没有人对这个问题发表完整的正确答案而且还没有结束，这是另一个答案这是你的功能：

vm.isChecked

这是一个裸功能，没什么用处。您需要一个控制器，以便Angular知道如何处理active：

var ListCtrl = function ($scope, $location) {
    $scope.test = "testing";
};

如果你坚持将这个功能作为一个单独的变量，你可以这样做，但仍然有一个控制器：

{{ test }}

这也有效。

尽管如此，您的UI将无法显示，因为其中存在错误：

<div ng-controller="someController">
    <h1>{{ test }}</h1>
</div>

您正在使用var ListCtrl = function ($scope, $location) { $scope.test = "testing"; }; TodoApp.controller('someController', ListCtrl);和var TodoApp = angular.module("TodoApp", [])，$routeProvider，您需要.when()作为依赖项：

.otherwise()

您的应用应该在此之后工作。

基本的angularjs代码无法正常工作

4 个答案: