来自教程的角JS不呈现

我刚刚买了一本关于Angular JS的书。我正在设立第一个项目，这非常简单。只有一个Angular元素被渲染。我想从一开始就正确地完成这个设置，所以我现在想克服这个简单的问题。为简单起见，angular.js文件和app.js文件位于index.html所在的同一文件夹中。我下载了最新版本的angular（1.3.2），并尝试使用最小化的.js文件，然后尝试使用未压缩的文件。来自教程的角JS不呈现

<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' }; 
}

当index.html的这个代码是从我用的书，这是发表在2013年

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

来源

2014-11-14 natep

经过对角文档网站 – charlietfl 2014-11-14 14:02:11

是否包含angular.js和app.js教程？使用 – sam 2014-11-14 14:07:07

更新

同意@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

来源

2014-11-14 13:59:22

请注意，为模块声明一个全局变量并不是最佳实践。 'angular.module（）'既是一个getter也是一个setter，因此它可以用来创建角度分量而不需要设置全局变量。这有助于限制大型应用程序中的JavaScript全局命名空间/污染问题，并限制将来可能出现的冲突。 – 2014-11-14 14:23:24

@JaredReeves - 同意你更新我的答案 – 2014-11-14 14:41:00

似乎不可思议，他们表现出来这样的。通常你会开始使用模块的向右走，像这样：

在HTML

<html ng-app="app">

在JS

angular.module("app",[]) 

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

我不知道，如果你的符号应该工作一样好，但这个是设置角度应用程序的标准方式，用于我见过的所有教程。

来源

2014-11-14 14:00:05 wvdz

你的控制器是错误的。看看here。它必须是这样的

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

来源

2014-11-14 14:01:36 timtos

请尝试下面的例子，

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

来源

2014-11-14 14:07:50 Ashwath

最终你原来的代码将前角1.3工作过。在Angular 1.3中，不再支持全局函数控制器。

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

来源

2014-11-14 14:38:03 KipLove

来自教程的角JS不呈现

回答

相关问题