angularjs-components – Tarik Billa

angularjs 1.5 component dependency injection

September 6, 2023 by Tarik

You can inject services to component controller like this: angular.module(‘app.module’) .component(‘test’, { templateUrl: ‘views/someview.html’, bindings: { subject: ‘=’ }, controller: [‘$scope’, ‘AppConfig’, TestController] }); function TestController(scope, config) { scope.something = ‘abc’; } or like this: angular.module(‘app.module’) .component(‘test’, { templateUrl: ‘views/someview.html’, bindings: { subject: ‘=’ }, controller: TestController }); TestController.$inject = [‘$scope’, ‘AppConfig’] function TestController(scope, config) … Read more

What is best practice to create an AngularJS 1.5 component in Typescript?

September 5, 2023 by Tarik

If you wanted to completely adopt an Angular 2 approach, you could use: module.ts import { MyComponent } from ‘./MyComponent’; angular.module(‘myModule’, []) .component(‘myComponent’, MyComponent); MyComponent.ts import { Component } from ‘./decorators’; @Component({ bindings: { prop: ‘<‘ }, template: ‘<p>{{$ctrl.prop}}</p>’ }) export class MyComponent { prop: string; constructor(private $q: ng.IQService) {} $onInit() { // do something … Read more

How to watch component binding change using Angular component

July 29, 2023 by Tarik

You can add the $onChanges method to the controller $onChanges(changesObj) is called whenever one-way bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form. Following example handles canChange change event. angular.module(‘app.components’, []) .component(‘changeHandler’, { controller: function … Read more

AngularJS 1.5+ Components do not support Watchers, what is the work around?

February 9, 2023 by Tarik

Writing Components without Watchers This answer outlines five techniques to use to write AngularJS 1.5 components without using watchers. Use the ng-change Directive Use the $onChanges Life-cycle Hook Use the $doCheck Life-cycle Hook Intercomponent Communication with require Push Values from a Service with RxJS Use the ng-change Directive what alt methods available to observe obj … Read more