Javascript 重新编写基本AngularJS（1.4）代码以解释破坏性更改_Javascript_Angularjs

Javascript 重新编写基本AngularJS（1.4）代码以解释破坏性更改

javascript angularjs

Javascript 重新编写基本AngularJS（1.4）代码以解释破坏性更改,javascript,angularjs,Javascript,Angularjs,这里的新手。。。我目前正在Youtube上关注Dan Wahlin教程，并且已经接触到了涉及控制器的部分，但是出于某种原因，我遇到了一个重要的问题，那就是如何让它工作 <!DOCTYPE html> <html data-ng-app=""> <head lang="en"> <meta charset="UTF-8"> </head> <body> <div data-ng-controller="sCt

这里的新手。。。我目前正在Youtube上关注Dan Wahlin教程，并且已经接触到了涉及控制器的部分，但是出于某种原因，我遇到了一个重要的问题，那就是如何让它工作

<!DOCTYPE html>
<html data-ng-app="">
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
  <div data-ng-controller="sCtrl">
    Name: <input type="text" data-ng-model="name" />
    <ul>
      <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name }} - {{ cust.city }}</li>
    </ul>
  </div>
    <script src="angular.min.js"></script>
    <script>
      function sCtrl($scope){
        $scope.customers=[
          { name: 'John Doe', city: 'New York' },
          { name: 'John Smith', city: 'Phoenix' },
          { name: 'Dan Jones', city: 'Tuscon' },
          { name: 'Jane Smith', city: 'Chicago' },
          { name: 'Danielle Jones', city: 'New Orleans' }
        ];
      }
    </script>
</body>
</html>


姓名：

{{cust.name}-{{cust.city}

功能sCtrl（$scope）{
$scope.customers=[
{姓名：'John Doe'，城市：'New York'}，
{姓名：'John Smith'，城市：'Phoenix'}，
{名字：'Dan Jones'，城市：'Tuscon'}，
{姓名：'简·史密斯'，城市：'芝加哥'}，
{名称：'Danielle Jones'，城市：'New Orleans'}
];
}

我在跟踪他的所作所为，一切似乎都井然有序。。。Dan之前在我能够复制的视频上表演的例子，但现在这似乎不起作用。。。我听说在1.3及以上版本中引入了一些“突破性的改变”，但我似乎无法遵循关于我当前代码的修复程序。。。我目前正在使用AngularJSV1.4

我将如何重新编写此代码以应对这里经历的这一突破性更改？

您应该声明一个有效的模块，并使用语法

angular.module（'yourAppName'）.controller（'sCtrl'，sCtrl（$scope）{…}）在其中声明控制器。看一看
html中的更改包括：
<html data-ng-app="youAppName">

您应该声明一个有效的模块，并使用语法angular.module（'yourAppName'）.controller（'sCtrl'，sCtrl（$scope）{…}）在其中声明控制器。看一看
html中的更改包括：
<html data-ng-app="youAppName">

据我所知，你应该有angular.module（'app'，[]）.controller（'sCtrl'，sCtrl）和在您的html中：ng app=“app”
根据我的了解，您应该拥有angular.module（'app'，[]）.controller（'sCtrl'，sCtrl）和您的html中：ng app=“app”
Angular正在更新，以强制实施一些广泛使用的最佳实践。Angular 1.4已经要求您通过ng app
指定模块，并向该模块显式添加控制器。版本2.0预期的一个突破性变化是，$scope
服务被弃用，取而代之的是绑定了此
的命名控制器。下面是一个使用命名控制器而不是$scope
的示例版本：
<body data-ng-app="example">
  <div data-ng-controller="sCtrl as sctrl">
    Name: <input type="text" data-ng-model="sctrl.name" />
    <ul>
      <li data-ng-repeat="cust in sctrl.customers | filter:sctrl.name | orderBy:'city'">{{ cust.name }} - {{ cust.city }}</li>
    </ul>
  </div>
  <script>
    angular.module("example", [])
      .controller("sCtrl", function sCtrl() {
        this.customers=[
          { name: 'John Doe', city: 'New York' },
          { name: 'John Smith', city: 'Phoenix' },
          { name: 'Dan Jones', city: 'Tuscon' },
          { name: 'Jane Smith', city: 'Chicago' },
          { name: 'Danielle Jones', city: 'New Orleans' }
        ];
    });
  </script>
</body>


姓名：

{{cust.name}-{{cust.city}

angular.module（“示例”，[]）
.控制器（“sCtrl”，功能sCtrl（）{
这是我的客户=[
{姓名：'John Doe'，城市：'New York'}，
{姓名：'John Smith'，城市：'Phoenix'}，
{名字：'Dan Jones'，城市：'Tuscon'}，
{姓名：'简·史密斯'，城市：'芝加哥'}，
{名称：'Danielle Jones'，城市：'New Orleans'}
];
});

试穿一下。
Angular正在更新，以实施一些广泛使用的最佳实践。Angular 1.4已经要求您通过ng app
指定模块，并向该模块显式添加控制器。版本2.0预期的一个突破性变化是，$scope
服务被弃用，取而代之的是绑定了此
的命名控制器。下面是一个使用命名控制器而不是$scope
的示例版本：
<body data-ng-app="example">
  <div data-ng-controller="sCtrl as sctrl">
    Name: <input type="text" data-ng-model="sctrl.name" />
    <ul>
      <li data-ng-repeat="cust in sctrl.customers | filter:sctrl.name | orderBy:'city'">{{ cust.name }} - {{ cust.city }}</li>
    </ul>
  </div>
  <script>
    angular.module("example", [])
      .controller("sCtrl", function sCtrl() {
        this.customers=[
          { name: 'John Doe', city: 'New York' },
          { name: 'John Smith', city: 'Phoenix' },
          { name: 'Dan Jones', city: 'Tuscon' },
          { name: 'Jane Smith', city: 'Chicago' },
          { name: 'Danielle Jones', city: 'New Orleans' }
        ];
    });
  </script>
</body>


姓名：

{{cust.name}-{{cust.city}

angular.module（“示例”，[]）
.控制器（“sCtrl”，功能sCtrl（）{
这是我的客户=[
{姓名：'John Doe'，城市：'New York'}，
{姓名：'John Smith'，城市：'Phoenix'}，
{名字：'Dan Jones'，城市：'Tuscon'}，
{姓名：'简·史密斯'，城市：'芝加哥'}，
{名称：'Danielle Jones'，城市：'New Orleans'}
];
});

试试看。
嘿，奥斯汀。。。呃，你在Plunker上的代码似乎不起作用。。。在输入字段中输入名称似乎不会过滤任何列表…？这是因为我忘记将过滤器更改为filter:sctrl.name
。谢谢你的评论！嗨，奥斯汀。。。呃，你在Plunker上的代码似乎不起作用。。。在输入字段中输入名称似乎不会过滤任何列表…？这是因为我忘记将过滤器更改为filter:sctrl.name
。谢谢你的评论！