ngTransform from AngularJS to Angular

Therefore for two way data binding we’ve got these format of (parentheses) wrapped within [square brackets].So summing up from previous paragraph, we can admit that Angular discarded many built-in directives previously being used in AngularJS as most of them were replaced by existing HTML properties and events accordingly are wrapped into [square brackets] and (parentheses) (Fig. 9).Figure 9..AngularJS Built-in directives vs formatted HTML properties in AngularThe Next core concept of Angular is Services which represent reusable logic within the whole application..If in AngularJS we had a bunch of service types like Factories, Services by itself, Providers, Constants and Values, in the new Angular we have just classes (Fig. 10).Figure 10..AngularJS Service types vs Classes in AngularSo defining a class and writing a logic in it we can make it represent any of the above mentioned service types from AngularJS..In AngularJS in the definition of module we need to define service() method(or the factory(), provider(), etc.) to create a service or whatsoever connecting it with the appropriate function..In Angular we just define a class and export it (just don’t forget to add Service as a suffix of class name by convention) (Fig. 11).Figure 11..Service definition in AngularJS vs AngularAlso, to be able to use the service within the application we use @Injectable decorator above class expression.And last but not least the key specification of Angular is the Dependency Injection..That’s how we inject services into different controllers/components of our application..But before injecting we had to somehow register them..In AngularJS we were registering service together with the definition using appropriate methods (Fig. 12).Figure 12..Service registration in AngularJS vs AngularIn the new Angular we just use property providers inside of our @ngModule decorator where we actually register our services..Once the service is registered then we can inject it in the controller/component (Fig. 13).Figure 13.. More details

Leave a Reply