为什么这个简单的angularjs脚本不起作用？_Angularjs_Angularjs Components

为什么这个简单的angularjs脚本不起作用？

angularjs

为什么这个简单的angularjs脚本不起作用？,angularjs,angularjs-components,Angularjs,Angularjs Components,使用控制器打印数据的简单脚本。我不知道我哪里做错了。。代码由index.html、app.js和mail-list.component.js组成。 mail-list.component用于创建用于查看和注册控制器的模板 index.html <!doctype html> <html lang="en" ng-app="mailApp"> <head> <meta charset="utf-8"> <title>Mail Syst

使用控制器打印数据的简单脚本。我不知道我哪里做错了。。代码由index.html、app.js和mail-list.component.js组成。 mail-list.component用于创建用于查看和注册控制器的模板

index.html

<!doctype html>
<html lang="en" ng-app="mailApp">
<head>
<meta charset="utf-8">
<title>Mail System</title>
<link rel="stylesheet" href="css/style.css">
<script src = "angular.min.js"> //angular 2
</script>
<script src="app.js"></script>
<script src="mail-list.component.js"></script>
</head>

<body>
<!--use a custom component to render the mails-->
<mail-list></mail-list>
</body>
</html>

mail-list.component.js

'use strict';
// Register `mailList` component, along with its associated controller and template

    angular.
      module('mailApp').
        component('mailList',{
          template:
        '<span ng-repeat="mail in $ctrl.mails"> '+
        '<input type="checkbox"><b>{{mail.sender }}:<i> {{mail.subject}}</i></b> {{ mail.message}}</span>',

      controller: function MailListController(){
        this.mails=[
          {
            sender: 'Monu',
            subject: 'Regarding Gate',
            message:'start preparing or gate 2017 exam, dont miss this time'
          },{
                sender: 'Shiv',
                subject: 'College Over',
                message:'B.tech is over, now i am a graduate, hurrey!!'
          },{
            sender: 'Monu',
            subject: 'Regarding bag',
            message:'purchase a new bag for me '
          }

        ];
      }

    });

“严格使用”；
//注册“邮件列表”组件及其关联的控制器和模板
有棱角的
模块（'mailApp'）。
组件（'邮件列表'{
模板：
' '+
{{mail.sender}}:{{mail.subject}{{mail.message}}，
控制器：函数MailListController（）{
这是电子邮件=[
{
发信人：“Monu”，
主题：“关于大门”，
信息：“开始准备2017年的考试，不要错过这次”
},{
发件人：“Shiv”，
主题：“大学结束”，
信息：“理工学士毕业了，现在我是毕业生了，赫瑞！！”
},{
发信人：“Monu”，
主题:"关于书包",，
信息：“给我买一个新包”
}
];
}
});

您似乎缺少标记上的属性。

您使用的是angular版本1.4.9，而组件仅在angular 1.5中引入*

有关详细信息，请参阅。

您使用的是angular 1.4.9版，而组件仅在angular 1.5中引入*

有关更多详细信息，请参阅。

正如Kazimieras所说，angular版本不支持

组件（）
除了他的指南之外，我还推荐Todd的座右铭将组件后移到Angular 1.3+。
正如Kazimieras所说，Angular版本不支持组件（）
除了他的指南，我还推荐Todd的座右铭将组件后传给Angular 1.3+。
我在我的机器上使用Angular 2，因为我没有找到Angular 2的在线链接，所以为了参考，我写了1.4.9。我认为Angular 2没有Angular
全局设置。你可能想看看。本教程是为Angular 1.5编写的，所以这一定是造成混淆的原因。我在我的机器上使用Angular 2，因为我没有找到Angular 2的在线链接，所以只是为了参考它编写的1.4.9。我不认为Angular 2具有Angular全局设置。您可能想看一下。本教程是为Angular 1.5编写的，因此这一定是造成混淆的原因。哪个标记，您在html标记上谈论的是。哪个标记，您在html标记上谈论的是。
'use strict';
// Register `mailList` component, along with its associated controller and template

    angular.
      module('mailApp').
        component('mailList',{
          template:
        '<span ng-repeat="mail in $ctrl.mails"> '+
        '<input type="checkbox"><b>{{mail.sender }}:<i> {{mail.subject}}</i></b> {{ mail.message}}</span>',

      controller: function MailListController(){
        this.mails=[
          {
            sender: 'Monu',
            subject: 'Regarding Gate',
            message:'start preparing or gate 2017 exam, dont miss this time'
          },{
                sender: 'Shiv',
                subject: 'College Over',
                message:'B.tech is over, now i am a graduate, hurrey!!'
          },{
            sender: 'Monu',
            subject: 'Regarding bag',
            message:'purchase a new bag for me '
          }

        ];
      }

    });