Question

您好我看过一篇关于AngularJS的教程。在本教程中展示了如何构建一个简单的hello world应用程序，但是当我尝试使用完全相同的代码时，它无法正常工作。

所有脚本都已加载好。有人有想法吗？

的index.html

<!DOTYPE html>
<html ng-app>
  <head>
    /* load angular and controller script */
  </head>
  <body>
    <div ng-controller="MyFirstCtrl">{{test}}</div>
  </body>
</html>

控制器

function MyFirstCtrl($scope) {
  $scope.test = "Hello World";
}

我的输出是{{test}}。

Answer 1

您需要为ng-app指令命名，使用Controller as语法的另一种方式是：

<!DOTYPE html>
<html ng-app="myApp">
  <head>
    /* load angular and controller script */
  </head>
  <body>
    <div ng-controller="MyFirstCtrl as myFirst">{{myFirst.test}}</div>
  </body>
</html>

和控制器js

var app = angular.module("myApp", []);
app.controller('MyFirstCtrl', function () {
  this.test = 'Some test';
});

A jsFiddle Demo

Answer 2

您必须像这样创建应用程序：

angular.module('myApp',[])
.controller('MyFirstController',['$scope', function($scope) {
  $scope.test = "Hello World";
}]);

并在html ngApp中加载相应的应用：

<html ng-app="myApp">

Answer 3

您需要传递angular脚本和controller脚本

<!DOTYPE html>
<html ng-app>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script type="text/javascript" src="path/to/controller.js"></script>
  </head>
...

AngularJS不起作用

3 个答案: