教程中的 Angular JS 不渲染答案

【问题标题】：Angular JS from tutorial not rendering教程中的 Angular JS 不渲染
【发布时间】：2014-11-14 13:53:28
【问题描述】：

我刚买了一本关于 Angular JS 的书。我正在设置第一个项目，这非常简单。只有一个 Angular 元素需要渲染。我想从一开始就正确设置，所以我现在想克服这个简单的问题。为简单起见， angular.js 文件和 app.js 文件位于 index.html 所在的同一文件夹中。我下载了最新版本的 angular (1.3.2)，并尝试使用最小化的 .js 文件，然后再尝试使用未压缩的文件。此代码是从我正在使用的书中复制粘贴的，该书于 2013 年出版。

index.html:

<html ng-app>
    <head>
        <script src="angular.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ng-controller='HelloController'>
            <p>{{greeting.text}}, World</p>
        </div>
    </body>
</html>

app.js：

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

在我的浏览器（最新版本的 Chrome）中打开 index.html 时，“{{greeting.text}}”区域显示为该字符串 {{greeting.text}}，而不是多变的。当我打开开发工具时，我看到控制器出现错误，它没有被定义为控制器。我知道这是非常简单的东西，但我想从一开始就拥有我的所有声明，以便我可以学习 Angular。任何帮助将不胜感激。

【问题讨论】：

在 Angular 文档网站上浏览教程
你是否包含了 angular.js 和 app.js ？使用

标签： javascript html angularjs inspect-element

【解决方案1】：

更新

同意@JaredReeves，所以像这样声明模块变量

//module file 
angular.module('yourAppDep');

// Controller One File
    angular.module('yourAppDep').controller('MyCtrl', function () {
      // ...
});

像这样在 module.js 文件中为您的应用程序创建模块

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

AngularMVCApp.controller('HelloController', HelloController);

像下面这样改变你的html

<html ng-app="AngularMVCApp">

像这样改变你的控制器

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

// The $inject property of every controller (and pretty much every other type of 
 //object in Angular) needs to be a 
 //string array equal to the controllers arguments, only as strings
 HelloController.$inject = ['$scope'];

你也可以在这里查看基础教程：http://www.codeproject.com/Articles/806029/Getting-started-with-AngularJS-and-ASP-NET-MVC-Par

【讨论】：

请注意，为模块声明全局变量不是最佳实践。 angular.module() 既是 getter 也是 setter，因此它可以用于创建角度组件而无需设置全局变量。这有助于限制大型应用程序中的 JavaScript 全局命名空间/污染问题，以及限制未来可能发生的冲突。
@JaredReeves - 同意你更新我的答案

【解决方案2】：

最终，您的原始代码会在 Angular 1.3 之前运行。在 Angular 1.3 中不再支持全局函数控制器。
http://plnkr.co/edit/3BuxfWLXGqtxImsNTzWm?p=preview

<html ng-app>
    <head>
        <script src="1.22_angular.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ng-controller='HelloController'>
            <p>{{greeting.text}}, World</p>
        </div>
    </body>
</html>

【讨论】：

【解决方案3】：

他们以这样的方式展示它似乎很奇怪。通常您会立即开始使用模块，如下所示：

在html中

<html ng-app="app">

在js中

angular.module("app",[])

.controller("HelloController",function ($scope) {
    $scope.greeting = { text: 'Hello' };
});

我不确定你的符号是否也能正常工作，但这是设置 Angular 应用程序的标准方法，我见过的所有教程都使用了这种方法。

【讨论】：

【解决方案4】：

您的控制器错误。看看here。应该是这样的

yourApp.controller('HelloController', function ($scope) {
   $scope.greeting = { text: 'Hello' }; 
}

【讨论】：

【解决方案5】：

请尝试以下示例，

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="empController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
function empController($scope) {
    $scope.firstName = "Tom";
    $scope.lastName = "Jerry";
}
</script>

【讨论】：