angularjs-components

I was doing some reading about directives and was wondering what the distinction was between a directive and a component, when I found that there are lots of components in AngularJS. There is a function component, type component, service component, filter component, provider component, etc... Then to top it off I found that a module component is a component consisting of directives, services, filters, providers, templates, global API’s, and testing mocks. That tended to make things more confusing. I couldn't find a definition of a "component" in the Angular documentation that would explain the

I am experimenting with the .component() syntax in Angular 1.5. It seems that the latest fashion is to code the controller in-line in the component rather that in a separate file, and I can see the advantage of that given that the component boilerplate is minimal. The problem is that I having been coding my controllers as typescript classes and would like to continue doing so because that seems to be consistent with Angular2. My best effort is something like this: export let myComponent = { template: ($element, $attrs) => { return [ `<my-html>Bla</my-html>` ].join('') }, controller:

Should it be associated with the app module? Should it be a component or just a controller? Basically what I am trying to achieve is a common layout across all pages within which I can place or remove other components. Here is what my app's structure roughly looks like: -/bower_components -/core -/login --login.component.js --login.module.js --login.template.html -/register --register.component.js --register.module.js --register.template.html -app.css -app.module.js -index.html This might be a bit subjective to answer but what I personally do in a components based Angular application is to

How can I listen to angular component binding change and perform actions? angular.module('myapp') .component('myComponent', { templateUrl: 'some.html', controller: MyController, controllerAs: 'myCtrl', bindings: { items: '<' } }); now when items changes I want to perform another action using this value, How can I do it? now when items changes I want to perform another action using this value, How can I do it? But I want to avoid using the dying $scope If you don't want to use $scope you can use a property setter to detect any changes e.g. : class MyController { private _items: string[] = []

Angular ng-change on ng-model passed into child directive Basically, I want to be able to pass in ng-model from a parent directive to a child directive. I could just in a 2-way binded value, but then I wouldn't be able to use a ng-change in the parent directive on the child element. I could also use ng-click, but this wouldn't work with a non-clicking change (such as a text area instead of a checkbox). So I'm wondering if there's a way to allow a custom directives to have a ng-model/ng-change pair similar to how inputs, buttons, text areas and other html elements can. I want to avoid using

Can I use more than one template in AngularJS 1.5 components ? I have one component having one attribute, so I want to load different template based on that attribute name. How can I achieve loading of templates based on attribute name of element? jsConfigApp.component('show', { templateUrl: 'component/show.html', //How to change it based on attribute value? bindings:{ view:"@" }, controller: function () { console.log(this.view) if (this.view = "user") { console.log("user") } else if (this.view = "user") { console.log("shop") } else { console.log("none") } } }) Thanks. I use two ways for

Can't access controller scope from angular component output binding function I'm trying to access my home controller scope from dashboard component but it's undefined. I also tried a second approach but then my function variable is undefined. I'm using Angular 1.5 with Typescript FIRST APPROACH: Home controller HTML: <div class="home-container"> <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged"> </dashboard-component> </div> Home controller js: namespace app.dashboard { 'use strict'; class HomeController { static $inject:Array<string> = ['$window']; constructor(private