AngularJS Plunk 问题入门

Question

我是 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>

我创建了一个简单的控制器并在其中绑定了一个模型。它不适合我。我不知道问题是什么。任何人都可以帮助我开始。

Answer 1

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

<html ng-app="app">

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

Plunker - 更新了演示

AngularJSGetting Started 资源应该包含您想知道的一切，运行

Answer 2

几件事。

您需要创建一个 angular 模块：

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

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

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

然后你需要用 angular 的方式创建一个控制器。

app.controller('MainController',MainController);

这是完整的脚本。 Plunkr

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

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

Answer 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!";
}

AngularJS Plunk 问题入门

Getting Started With AngularJS Plunk Issue

javascript

html

angularjs

plunker