Question

我刚买了一本关于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时，＆＃34; {{greeting.text}}＆＃34;区域显示为该字符串{{greeting.text}}，而不是变量的值。当我打开开发工具时，我发现控制器上有一个错误，它没有被定义为控制器。我知道这是非常简单的东西，但我希望从一开始就拥有所有声明，以便我可以学习Angular。任何帮助将不胜感激。

Answer 1

更新

同意@JaredReeves，这样做declarr模块变量

//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

Answer 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>

Answer 3

他们这样表现出来似乎很奇怪。通常，您将立即开始使用模块，如下所示：

在html中

<html ng-app="app">

在js

angular.module("app",[])

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

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

Answer 4

你的控制器错了。看看here。它必须是

之类的东西

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

Answer 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>

Angular JS来自教程不渲染

5 个答案: