AngularJS 1.5组件示例

我正在使用

.component（）

和

template

属性处理Angularjs项目，但我不知道如何使用

templateUrl

。 是否有熟悉的人可以为我提供一个工作示例？

---

谢谢。

模板URL是模板文件的路径

例如

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

view.html

<h1> Welcome to this view </h1>

欢迎使用此视图

---

如上面的示例所示，您必须在

mycollection

目录中有

view.html

文件。

要正确使用角度分量，我建议使用controllerAs语法

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

angular.module（'myApp'）
.component（'groupComponent'{
templateUrl:'app/components/group.html'，
控制器：函数GroupController（）{
this.innerProp=“内部”；
},
controllerAs:'GroupCtrl'，
绑定：{
input:'谢谢你的帮助，到目前为止我可以这样做，我的问题是如何在示例中使用
绑定
，以及如何将模型注入templateUrl view.html。谢谢，如果我们想在组件中使用父控制器的ngModel怎么办？@MounirBoussetta我将父控制器的用法添加到了答案中，您需要传递它作为绑定来保持组件的隔离性，对你有用吗？从文档中可以看到其他人，他们想知道“AngularJS是如何知道引用groupComponent的？”如果组件名为groupAlphaBetaCharlie怎么办？
<div>
{{GroupCtrl.input}}
{{GroupCtrl.inner}}
</div>

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