我的“Hello world”Angular 程序在 1.3.14 版本中无法运行答案

【问题标题】：My "Hello world" Angular Program is not working in 1.3.14 version我的“Hello world”Angular 程序在 1.3.14 版本中无法运行
【发布时间】：2015-07-01 18:27:44
【问题描述】：

我是 angularjs 的新手。我创建了一个 helloworld 程序。对于角度参考，我使用了 CDN。但问题是程序在 1.0.8 版本上运行，但在 1.3.14 版本上运行不正常。我不能说是什么问题。我的代码如下：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script type="text/javascript">
    function HelloWorldCtrl($scope) {
        $scope.helloMessage = "Hello World from Nasir Uddin";
    }
</script>
</body>
</html>

如果我下载 angular 1.0.8 版本并将其放入我的项目文件夹中，则会发生同样的情况，但如果我下载 1.3.14 并将其放入我的项目文件夹中，则它无法正常工作。请帮助我找到解决方案。

【问题讨论】：

stackoverflow.com/questions/26943306/changes-in-angularjs-1-3/…。这是 Angular 1.3 的重大更改之一；你不能再全局声明控制器了。

标签： angularjs

【解决方案1】：

您可以通过这种方式在新版本中实现这一点。

 <!DOCTYPE html>
<html ng-app="myModule">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>

<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">

    angular.module('myModule',[]).config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);    

    function HelloWorldCtrl($scope) {
        $scope.helloMessage = "Hello World from Nasir Uddin";
    }
</script>
</body>
</html>

您可以阅读更多here

编辑代码-

在这样的标题中使用

 <h1 ng-controller="HelloWorldCtrl" ng-bind="helloMessage"></h1>

避免HTML波动

【讨论】：

【解决方案2】：

这是新版本更好的语法实践

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl as ctrl">
        <span ng-bind="ctrl.helloMessage"> </span>
    </h1>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script type="text/javascript">

   (function(){
     angular.module('app', [])

    .controller('HelloWorldCtrl', [function(){
        var self = this;
        self.helloMessage = "HEllo World from Nasir Uddin";

     }]);

    })();
</script>
</body>
</html>

从 1.2.7 版开始，不建议使用作用域。因为范围是在每个控制器或指令中创建的（例如 ng-repeat）。知道数据来自哪个范围，我们将更容易维护

【讨论】：

【解决方案3】：

由于 Angular 1.3 中对全局控制器施加的限制，您不能再使用全局控制器。参考：https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018

您需要在模块中定义控制器，这是这样做的最佳做法。

请参阅此代码 sn-p 以了解适用于 angular-1.3 的代码的更新变体

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
  </header>

  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('myApp', []);

    app.controller('HelloWorldCtrl', function($scope) {
      $scope.helloMessage = "Hello World from Nasir Uddin";
    });
  </script>
</body>

</html>

【讨论】：

【解决方案4】：

AngularJs 1.3.14 和 Angular 1.4.0 有改进

现在，如果我们使用这些版本，那么我们必须首先使用主角度模块创建一个全局变量，然后使用该变量创建控制器，然后我们才能使用它

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

我们将使用 app 变量创建这样的控制器

 app.controller('Ctrl', function($scope) {
    ....
    });

【讨论】：