无法理解 angularjs 个组件。之前只使用过指令

Question

所以我一直使用一个控制器一个视图，并且只对我想重复使用的部分使用指令。

现在我去面试，被要求学习组件，我从来不知道它存在。我正在尝试用它替换指令，但甚至无法将一个简单的对象从父控制器传递到组件中。

（第一个问题）我一直在使用 $scope 来处理所有事情。现在我正在阅读组件，我看到到处都在使用 $ctrl，有什么不同？

app.js

var myApp= angular.module('bigMoveApp', ['ngRoute', 'testerModule']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.

    when('/', {
        templateUrl: 'app/Views/main.html',
        controller: 'ctrlMain'
    }).

    otherwise({
        redirectTo: '/'
    });

}]);

ctrlMain.js

myApp.controller('ctrlMain', ['$scope', function ($scope) {
 //code
     $scope.paragraphToWrite = { text: "let's write something" };
 //code
}])

main.html

<div id="main-body-wrapper">
<...>
    <paragraph-Component obj="paragraphToWrite"></paragraph-Component>
 <...>
</div>

paragraphComponent.js

    function paragraphController($scope, $element, $attrs) {
        var ctrl = this;
        ctrl.user = $scope.$parent.textFields.whatWeDo.title;
        var x = ctrl.obj;
    } 


    myApp.component('paragraphComponent', {
        templateUrl: '/app/Views/paragraphCom.html',
        bindings: {
            obj : '='
        },  
        controller: paragraphController 
    })

（第二个问题），我这里做错了什么，我什至不能将一个简单的对象传递给组件

请帮忙，我需要在今天结束之前把我的脑袋放在组件上，我昨天整晚都在阅读这个，但仍然不太明白。我什至不明白组件的好处，when directive can do more from my understanding

Answer 1

别担心，这不是什么新鲜事。 AngularJS 组件 API 是 just a wrapper around a directive API。当您使用 .component API 时，它会在幕后创建一个指令。引入这些更改是为了使 AngularJS 到 Angular(2+) 版本的迁移更加顺畅。此外 API 可读性看起来也很相似，因为 Angular 完全基于 component。

回到你的问题

每当您在定义控制器时使用 controllerAs 模式，所有绑定值都位于您的 $scope.controllerAlias 变量中。最终，如果您看到 alias 中的内容，您会看到 this(context) 正好填充在那里。你不应该在控制器内部使用 $scope，而一切都将驻留在你的控制器函数 this 中，它只不过是 $ctrl 默认控制器别名。
您在使用组件名称时有错别字。 paragraph-Component 标签应该是 paragraph-component
```
<paragraph-component obj="paragraphToWrite"></paragraph-component>
```

无法理解 angularjs 个组件。之前只使用过指令

have trouble understanding angularjs components. Only used directives before

angularjs

angularjs-components