AngularJS Plunk 问题入门答案

【问题标题】：Getting Started With AngularJS Plunk IssueAngularJS Plunk 问题入门
【发布时间】：2015-10-05 04:35:34
【问题描述】：

我是 Angular JS 的新手。我正在尝试从基本的 Hello World 程序开始。这是我的笨拙http://plnkr.co/edit/uW1fHB7a17gpvn341sn3?p=preview。

var MainController = function($scope){
  $scope.message = "Hello, Angular!";
}

<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="MainController">
    <h1>{{message}}</h1>
  </div>
</body>

</html>

我创建了一个简单的控制器，其中有一个模型绑定。它不适合我。我无法理解问题所在。任何人都可以帮助我开始。

【问题讨论】：

自答案出现以来，您更改了 plunk - plunk 不再反映您提出的问题:(
我已经标记了@scniro给出的正确答案

标签： javascript html angularjs plunker

【解决方案1】：

您需要正确地提升您的应用程序并正确定义您的控制器。观察以下变化...

<html ng-app="app">

angular.module('app', []).controller('MainController', MainController)

Plunker - 更新演示

AngularJS Getting Started 资源应该包含所有你想知道的启动和运行

【讨论】：

感谢您的快速解决方案。它在 AngularJS 1.2.1 中运行良好，但在 1.4.5 中无法运行。那么这是更新的入门方式吗？
plunker 在 1.4.5 上运行良好，你检查了吗？您遇到什么错误？
不，您编写的代码对我来说运行良好。我只是问我编写的代码在 AngularJS 1.2.1 上运行良好，但在 1.4.5 版上运行良好
啊，是的，我明白你现在在说什么了。它之所以有效，是因为 AngularJS 在早期版本中支持使用全局控制器，现在已被删除。有关该主题的更多详细信息，请参阅 SO Why doesn't the latest version of angular support global controller functions?。所以是的，这被认为是“更新”的入门方式
非常感谢@scniro。你的回答对我帮助很大。

【解决方案2】：

几件事。

你需要创建一个角度模块：

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

第二个参数是一个依赖模块数组。这里不需要。

然后将 ng-app 更改为 ng-app="myApp" 引用您为模块命名的任何内容。

那么你需要以角度的方式创建一个控制器。

app.controller('MainController',MainController);

这是完整的脚本。 Plunkr

function MainController($scope) {
  $scope.message = 'Hello World';
}

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);

【讨论】：

它是相似的，虽然绝对不是从你那里复制的 :) 并且是同时写的。
@bluetoft 感谢您的快速解决方案。它在 AngularJS 1.2.1 中运行良好，但在 1.4.5 中无法运行。那么这是更新的入门方式吗？

【解决方案3】：

您的原始代码适用于 Angular 1.0，但不适用于 1.4 只是觉得值得一提，以防您在学习教程时想知道为什么它不起作用或其他什么。

看到这个 plunkr 在 1.0 中工作正常，代码与你的相同...... http://plnkr.co/edit/zbWvwxVDvhhVKgc5lGrr?p=preview

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="MainController">
      {{message}}
    </div>
  </body>
</html>

和

var MainController = function($scope) {
  $scope.message = "Hello, Angular!";
}

【讨论】：