I'm new to this TypeScript thing. There are a bunch of examples of using Angular with Typescript, and they all have controller classes. It looks like I have to repeat the injected services a number of times in the class declaration. Can I create an Angular controller without creating a class? Preferably something like what I could do with JavaScript:
module.controller('controller', function(service1) {DoSomething();});
You can if you want to (since valid js is valid ts). But you will lose the type safety of classes.
Related
I have an app with AngularJS and TypeScript
I want to know is there any case when I should use AngularJS factory instead of TypeScript Static Class
Nothing changes with ES6/TypeScript classes. They are just syntactic sugar for JavaScript constructor functions.
Good use cases for factory services can be figured out by the process of elimination.
Since service services are preferable for OOP-flavoured units:
class FooClass {
static $inject = [...];
constructor(...) {}
}
app.service('foo', FooClass);
And value services are preferable for singleton units that aren't constructed from classes and don't involve DI:
app.value('bar', 'bar');
app.value('Baz', BazClass);
factory services can be used for the rest of the cases. I.e. when a service needs DI and returned value cannot be easily constructed from a class - a function, a primitive, an object that is returned from function call:
app.factory('qux', ($q) => $q.all([...]));
We had same problem two years ago. The decision was to stay with angular system and only build angular services. Neither angular factory or typescript static. The reason was we could track how service has been created and shared. (by hard)
To answer your question, angular factory is an object which still need injection base on angular system. It is good if you would like keep tight with angular.
On the other hand typescript is more general. When you call a static function, it is just a function. Like you can import it anywhere else not angular, and then use it.
Something about javascript pattern:
A common pattern for creating objects in JavaScript is the module pattern.The pattern involves returning an object from the function that will be your public API.
There is a popular variation to the module pattern called the revealing module pattern. What happens with the revealing module pattern is things start explicitly private, and then choices are made about whether they become public.
I have a fairly complex angularJS application built with many modules, factories and controllers.
When this was started I used a parameters.js file to store initialization vars and constants used in the application. Some of these values are constants and others might be updated by the application (language, search date...).
This is not an angular element, it's just a js Object with these values inside. My question is, should this be also inside a module? is there any advantage in keeping this inside a module? if so, what`s the best way to do it, using .value and .constant? creating a factory?
Also, similar issue but in this case regarding an utility function js file, where I have some functions to parse dates and some other stuff used in different places in the application. Should this be stored in a module? and again, what would be the way to do it? a factory?
Any tip would be much appreciated.
Thanks!
Speaking only from a point of view of doing this, we use something like this, as a constants.js file:
import angular from 'angular';
export default angular
.module('app.constants', [])
.constant('someLength', 50)
.constant('someDateFormat', 'DD MMM YYYY')
.name
Inject the particular constant wherever you need in your app.
I've been struggling with the way to implement a good structure for directives in TypeScript. I've found couple of solutions online, however to be honest, I have no idea which one to use - they all do their job.
What is a good structure for a directive to stick to?
n.b. I'm using AngularJS 1.
In my opininion, thinking on Typescript Way, you need to import the AngularJS definition, this gives you references on the framework.
Create a Module
Export a Function that returns a Angular Directive Definition Object
In ddo use the APIs as you wish
[...] export function tsDirective(): ng.IDirective [...]
I'm new to Angular and trying to figure out how to inject some external objects into Angular.
I have a JS script defining a global Payment object with some methods on it. I'd like to somehow import it (the Payment object) into an Angular service (from what I understood the service would be the place to that). How exactly does one go about that?
What I'd like to achieve in the end would be something like:
app.controller("myController", [PaymentService, function (payment) {....}]);
This would work :
app.factory('PaymentService',['$window', function($window){
return $window.Payment;
}]);
Using a factory is an occasion to add additional behavior, for example adding methods or checking that the global object is defined.
You can declare it either as a value:
angular.module('foo').value('PaymentService',window.Payment);
or as a constant:
angular.constant('foo').value('PaymentService',window.Payment);
Hi I would like to implement Jade templates in my AngularJS project, and have mixin in my template (reusable code).
However the problem that I am facing is that we cannot use Mixin with arguments. Am I doing it correctly or is there any alternative for the same in AngularJS that I am missing?
You can create an js object from your model and pass it as strings to the mixin like the following:
+avatarRow({name: '{{avatar.name}}', uuid: '{{avatar.uuid}}', verificationCode: '{{avatar.verificationCode}}', status: '{{avatar.status}}'})
Inside the mixin you can now access e.g. #{avatar.uuid}
I considder to automate this further, because this leads to a duplication of the models code which is not so nice yet. I will share my solution if I get one :)
I figured out that mixins cannot be used in Angular as the scope is to be defined. Hence now created element directive and passed in the template (which was meant to be written in Mixin) as the templateUrl in it.