Question

所以我试图设置一些非常基本的东西，但是我不知道为什么angularjs没有显示大括号内的东西。我完全难倒了

链接到plunker： http://plnkr.co/edit/GfCgemAxZPkhKNv7A0Av?p=preview

的index.html：

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="2.0.0-alpha.27" src="https://code.angularjs.org/2.0.0-alpha.27/angular.js"></script>
    <link rel="stylesheet" href="mainstyle.css" />
    <script src="script.js"></script>
    <script src="maincontroller.js"></script>
  </head>

  <body>
    <div ng-controller="maincontroller">
      <p>{{introduction}}</p>
    </div>

  </body>

</html>

的script.js：

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

maincontroller.js

app.controller('maincontroller', maincontroller);

var maincontroller = function($scope) {
  $scope.introduction = "Welcome to My Program";
}

Answer 1

如果您查看浏览器的js控制台，可以看到3个错误。我更新了您的plunkr。

404＆amp;角度未定义

与角色的链接完全错误。

无法读取未定义的属性controller

在maincontroller.js中，您尝试在定义函数之前添加控制器。从angular docs获得的更好的方法：

app.controller('maincontroller', ['$scope', function($scope) {
  $scope.introduction = "Welcome to My Program";
}]);

参数maincontroller不是函数

这次控制台甚至会为您提供一个link，其中包含问题的描述。原因是，您忘记将ng-app属性设置为您的应用：

ng-app="myProgram"

Answer 2

有几个问题。

您忘记在html中引用主模块：

<html ng-app="myProgram">

您的angular.js链接已损坏。使用angular site上提供的CDN链接。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

在定义之前分配maincontroller。解决这个问题的一种方法是首先不将它分配给变量：

app.controller('maincontroller', function($scope) {
  $scope.introduction = "Welcome to My Program";
});

更一般的提示：请查看此seed project，了解如何组织角度应用的最佳做法。

无法设置AngularJS

2 个答案: