Question

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

如果我下载角度1.0.8版本并将其放入我的项目文件夹然后它正在工作但是如果我下载1.3.14并将其放入我的项目文件夹然后它无法正常工作。请帮我找到解决方案。

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

Answer 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）。知道数据来自哪个范围我们将更容易维护

Answer 3

由于角度1.3对全局控制器的限制，您不能再使用全局控制器。请参阅：https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018

您需要在模块中定义控制器，这是最佳实践。

请参阅此代码段，了解使用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>

Answer 4

AngularJs 1.3.14和Angular 1.4.0

有所改进

现在如果我们使用这些版本，那么我们必须先创建一个带有主角度模块的全局变量，然后使用该变量创建控制器，然后我们就可以使用它了

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

我们将使用app变量

创建这样的控制器

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

我的“Hello world”Angular Program在1.3.14版本中不起作用

4 个答案: