AngularJS 1.5 组件示例答案

【问题标题】：AngularJS 1.5 component exampleAngularJS 1.5 组件示例
【发布时间】：2016-03-29 20:17:48
【问题描述】：

我正在使用带有template 属性的.component() 开发一个Angularjs 项目，但我不知道如何使用templateUrl。有没有人熟悉可以为我提供一个工作示例？谢谢。

【问题讨论】：

【解决方案1】：

templateUrl 是模板文件的路径。

例如

app.component('myview', {
  bindings: {
    items: '='
  },
  templateUrl: 'mycollection/view.html',
  controller: function ListCtrl() {}
});

view.html

<h1> Welcome to this view </h1>

如上例所示，mycollection 目录下必须有view.html 文件。

【讨论】：

感谢您的帮助，到目前为止我可以这样做，我的问题是如何在示例中使用bindings，以及如何将模型注入到该templateUrl view.html中。

【解决方案2】：

要正确使用角度组件，我建议使用 controllerAs 语法。

angular.module('myApp')
    .component('groupComponent', {
        templateUrl: 'app/components/group.html',
        controller: function GroupController(){
              this.innerProp = "inner";
        },
        controllerAs: 'GroupCtrl',
        bindings: {
            input: '<'
        }
    });

在 group.html 上，您可以通过以下方式消费：

<div>
{{GroupCtrl.input}}
{{GroupCtrl.inner}}
</div>

从父控件您可以将任何参数作为绑定传递给组件，在本例中是从父 HTML：

<group-component input="someModel">
</group-component>

【讨论】：

谢谢，如果我们想在组件中使用父控制器的 ngModel 怎么办？
@MounirBoussetta 我将父级的使用添加到答案中，您需要将其作为绑定传递以保持组件隔离，它对您有用吗？
来自其他想知道“
AngularJS 怎么知道指的是 groupComponent ？如果组件名为 groupAlphaBetaCharlie 怎么办？