import { Blob } from '#firebase/firestore-types';
#Injectable()
export class ImagehandlerProvider {
nativepath: any;
firestore = firebase.storage();
imagestore: any;
constructor(public filechooser: FileChooser, public blob: Blob) {
console.log('Hello ImagehandlerProvider Provider');
}
uploadimage() {
var promise = new Promise((resolve, reject)=> {
this.filechooser.open().then((url)=> {
(<any>window).FilePath.resolveNativePath(url, (result)=> {
this.nativepath = result;
(<any>window).resolveLocalFileSystemURL(this.nativepath, (res)=> {
res.File((resFile)=> {
var reader = new FileReader();
reader.readAsArrayBuffer(resFile);
reader.onloadend = (ent: any) => {
// var imgBlob = new Blob([ent.target.result], {type: 'image/jpeg'});
var imgBlob = new Blob([ent.target.result], {type: 'image/jpeg'});
var imgStore = this.firestore.ref(firebase.auth().currentUser.uid).child('profilepic');
imgStore.put(imgBlob).then((res)=> {
alert('Upload successful');
}).catch((error)=> {
alert('Upload failed' + error);
})
}
})
})
})
})
})
}
}
The code above has a simple problem. I am on the 3rd day learning ionic-angular, I want to implement image upload, and I think by default angular makes all imported classes private. I have searched online how to Blob is implemented and have sen that it is by instantiating the Blob class, which I did, since the class is made private by default it's not accessible so I have to create a public property in the constructor of this class. In short way, without creating this property I am getting this error:
[ts] Constructor of class 'Blob' is private and only accessible within the class declaration.
How do I make use of the Blob class
Related
I am having trouble injecting the Angular built-in orderByFilter. Any suggestion would be helpful. Thanks in advance! I am getting this error:
TypeError: undefined is not a constructor (evaluating 'this.orderBy(this.registrationList, this.registrationSort, this.sortReverse)
Here is my component:
import { RegistrationModel } from "../models/RegistrationModel";
import { IRegistration } from "../../../services/interfaces/IRegistration";
export class RegistrationsComponent implements ng.IComponentOptions {
public static componentName = "registrations";
public template: string = require("./Registrations");
public controller = RegistrationsController;
}
export class RegistrationsController {
static $inject = ["RegistrationModel", "orderByFilter"];
public registrationsList: IRegistration[] = [];
public registrationSort: string;
public sortReverse: boolean = false;
constructor(
public RegistrationModel: RegistrationModel,
public orderBy
) {}
public sortRegistrations() {
this.registrationsList = this.orderBy(this.registrationsList, this.registrationSort, this.sortReverse);
}
}
Here is my unit test:
import "angular-mocks";
import { RegistrationsComponent, RegistrationsController } from "./RegistrationsComponent";
import { IRegistration } from "../../../services/interfaces/IRegistration";
describe("Registrations", () => {
var registrationModelMock = {};
var orderBy;
beforeEach(angular.mock.module("onboardingTestApp", ($provide: any) => {
$provide.service("RegistrationModel", () => registrationModelMock);
$provide.service("orderByFilter", () => orderBy);
}));
var registrationList = [
{
Created: "2016-05-13",
Email: "test1#test.com",
},
{
Created: "2017-03-13",
Email: "test2#test.com",
},
]
var registrationController = new RegistrationsController(<any>registrationModelMock, orderBy);
it("should sort the registrations", () => {
registrationController.registrationsList = <any>registrationList;
registrationController.registrationSort = "Email";
registrationController.sortReverse = true;
registrationController.sortRegistrations();
expect(registrationList[0].Email).toBe("test2#test.com");
});
});
There is no 'orderBy' pipe in angular 2. They do have other pipes like currency, uppercase, but they removed orderBy.
They removed because of the performance issue from previous angular version.
Here is the the documentation that states that. https://angular.io/docs/ts/latest/guide/pipes.html
Read the appendix part that explains lot more about this.
As I'm learning Angular 2 I used an observable to fetch some data via an API. Like this:
getPosts() {
return this.http.get(this._postsUrl)
.map(res => <Post[]>res.json())
.catch(this.handleError);
}
My post model looks is this:
export class Post {
constructor(
public title: string,
public content: string,
public img: string = 'test') {
}
The problem I'm facing is that the map operator doesn't do anything with the Post model. For example, I tried setting a default value for the img value but in the view post.img displays nothing. I even changed Post[] with an other model (Message[]) and the behaviour doesn't change. Can anybody explain this behaviour?
I had a similar issue when I wanted to use a computed property in a template.
I found a good solution in this article:
http://chariotsolutions.com/blog/post/angular-2-beta-0-somnambulant-inauguration-lands-small-app-rxjs-typescript/
You create a static method on your model that takes an array of objects and then call that method from the mapping function. In the static method you can then either call the constructor you've already defined or use a copy constructor:
Mapping Method
getPosts() {
return this.http.get(this._postsUrl)
.map(res => Post.fromJSONArray(res.json()))
.catch(this.handleError);
}
Existing Constructor
export class Post {
// Existing constructor.
constructor(public title:string, public content:string, public img:string = 'test') {}
// New static method.
static fromJSONArray(array: Array<Object>): Post[] {
return array.map(obj => new Post(obj['title'], obj['content'], obj['img']));
}
}
Copy Constructor
export class Post {
title:string;
content:string;
img:string;
// Copy constructor.
constructor(obj: Object) {
this.title = obj['title'];
this.content = obj['content'];
this.img = obj['img'] || 'test';
}
// New static method.
static fromJSONArray(array: Array<Object>): Post[] {
return array.map(obj => new Post(obj);
}
}
If you're using an editor that supports code completion, you can change the type of the obj and array parameters to Post:
export class Post {
title:string;
content:string;
img:string;
// Copy constructor.
constructor(obj: Post) {
this.title = obj.title;
this.content = obj.content;
this.img = obj.img || 'test';
}
// New static method.
static fromJSONArray(array: Array<Post>): Post[] {
return array.map(obj => new Post(obj);
}
}
You can use the as keyword to de-serialize the JSON to your object.
The Angular2 docs have a tutorial that walks you through this. However in short...
Model:
export class Hero {
id: number;
name: string;
}
Service:
...
import { Hero } from './hero';
...
get(): Observable<Hero> {
return this.http
.get('/myhero.json')
.map((r: Response) => r.json() as Hero);
}
Component:
get(id: string) {
this.myService.get()
.subscribe(
hero => {
console.log(hero);
},
error => console.log(error)
);
}
Im trying to combine those technologies, but nothing good comes, as entity framework meta-datas doesn't get consumed by breeze.js, even all configurations where setup, it's a bit tricky situation, there is literally no examples of that, so this is my sample code which doesn't work properly, but somehow maybe someone will find my mistake and eventually help to solve this puzzle or will find it as starting point.
OdataService.ts
'use strict';
module twine.components {
class MetadataStoreOptions implements breeze.MetadataStoreOptions{
namingConvention:breeze.NamingConvention = breeze.NamingConvention.defaultInstance;
}
class Manager implements breeze.EntityManagerOptions {
metadataStore: breeze.MetadataStore;
constructor( public dataService: breeze.DataService) {
}
}
class DataServiceOptions implements breeze.DataServiceOptions {
serviceName = 'http://twine.azurewebsites.net/odata';
hasServerMetadata = true;
}
export class ODataService {
options: Manager;
manager: breeze.EntityManager;
metadataStore: breeze.MetadataStore;
storeOptions: MetadataStoreOptions;
static $inject: string[] = ['$http', '$rootScope'];
cache: twine.Model.IEntity[];
constructor(private $http: ng.IHttpService, private $rootScope: ng.IRootScopeService){
this.storeOptions = new MetadataStoreOptions();
this.metadataStore = new breeze.MetadataStore(this.storeOptions);
this.options = new Manager( new breeze.DataService( new DataServiceOptions() ));
this.options.metadataStore = this.metadataStore;
this.manager = new breeze.EntityManager( this.options );
breeze.config.initializeAdapterInstance('dataService', 'webApiOData', true);
//this.manager.fetchMetadata((meta) => {
// this.metadataStore.importMetadata(meta);
//});
}
All( query:breeze.EntityQuery, successCallback: Function, failCallback?: Function ): void {
this.manager.executeQuery( query )
.then( ( data: breeze.QueryResult ) => {
successCallback( data );
this.$rootScope.$apply();
})
.catch( ( reason: any ) => {
if ( failCallback ) {
failCallback( reason );
}
});
}
Get( key:number, successCallback: Function, failCallback?: Function ): void {
//this.manager.fetchMetadata();
//var entityType = this.manager.metadataStore.getEntityType('Tag');
//var entityKey = new breeze.EntityKey(entityType, key);
this.manager.fetchEntityByKey( 'Tag', key )
.then( ( data: breeze.EntityByKeyResult ) => {
successCallback( data );
this.$rootScope.$apply();
})
.catch( ( reason: any ) => {
if ( failCallback ) {
failCallback( reason );
}
});
}
}
}
And this is tagController.ts
'use strict';
module twine.routes {
interface ITagsScope extends ng.IScope {
vm: TagsCtrl;
}
interface ITagsCtrl extends twine.components.ITwineRoute{
tags:any[];
getTags: () => void;
tag: any[];
getTag: (id:number) => void;
}
export class TagsCtrl implements ITagsCtrl{
/* #ngInject */
static controllerId: string = 'TagsController';
static controllerAsId: string = 'tagsCtrl';
static $inject: string[] = ["$scope", "ODataService", '$route'];
entityQueryName: string = 'Tag';
query: breeze.EntityQuery;
tags:any;
tag: any;
constructor (private $scope: ITagsScope, private ODataService: twine.components.ODataService, $route: ng.route.IRouteService) {
this.query = new breeze.EntityQuery(this.entityQueryName);
if($route.current && $route.current.params.id){
this.getTag($route.current.params.id);
}
else {
this.getTags();
}
}
getTags() {
this.ODataService.All(this.query , (data) => {
this.tags = data.results[0].value;
}, (error) => {
console.log('error', error);
});
}
getTag(id:number){
this.ODataService.Get(id , (data) => {
this.tag = data.results[0].value;
}, (error) => {
console.log('error', error);
});
}
}
}
There are many errors, on different configurations, sometimes it's There is no resourceName for this query or EntityKey must be set, or Other stupid errors which are indeed doesn't have to appear because it's a typescript which doesn't allow type mismatches, but the configuration itself is not correct.
And this is abstract controller
[EnableCors(origins: "*", headers: "*", methods: "*")]
public abstract class EntityController<T> : ODataController where T: Entity
{
protected ODataRepository<T> repo = new ODataRepository<T>();
private static ODataValidationSettings _validationSettings = new ODataValidationSettings();
public EntityController()
{
}
// GET: odata/Entity
[EnableQuery]
public IQueryable<T> Get(ODataQueryOptions<T> queryOptions)
{
try
{
queryOptions.Validate(_validationSettings);
}
catch (ODataException ex)
{
Trace.WriteLine(ex.Message);
return null;
}
return repo.All();
}
// GET: odata/Entity(5)
[EnableQuery]
public SingleResult<T> Get([FromODataUri] long key, ODataQueryOptions<T> queryOptions)
{
try
{
queryOptions.Validate(_validationSettings);
}
catch (ODataException ex)
{
Trace.WriteLine(ex.Message);
return null;
}
return SingleResult.Create(repo.All().Where(x=>x._id == key));
}
//ommitted
}
And lastly this is ASP.NET webApi configuration
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Конфигурация и службы веб-API
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
// Маршруты веб-API
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
//CORS
var cors = new EnableCorsAttribute(
"*",
"*",
"*",
"DataServiceVersion, MaxDataServiceVersion"
);
config.EnableCors(cors);
// Маршруты Odata
//config.EnableQuerySupport();
config.AddODataQueryFilter();
Builder<Account>(config);
Builder<Branch>(config);
Builder<Bucket>(config);
Builder<Ingredient>(config);
Builder<Like>(config);
Builder<Meetup>(config);
Builder<Shot>(config);
Builder<Skill>(config);
Builder<Tag>(config);
Builder<Team>(config);
}
private static void Builder<T>(HttpConfiguration config) where T: class
{
var entityType = Activator.CreateInstance<T>().GetType();
if (entityType != null)
{
var builder = new ODataConventionModelBuilder();
builder.EntitySet<T>(entityType.Name);
config.Routes.MapODataServiceRoute("odata_" + entityType.Name, "odata", builder.GetEdmModel());
}
}
}
For testing purpose i have this working backed OData service at http://twine.azurewebsites.net/odata/Tag, (currently no restrictions by CORS, feel free) last entity can be changed to other name based on webApi configuration Build method. Please feel free to ask any other information. If someone need whole source, im willing to publish on github
Update
Forget to mension, problem is in method Get of ODataService. I cannot bind metadata from server to breeze, method All works fine. But query fetchByEntityKey throws errors as described above
evc, please take a look at the following article under AngularJs Apps/Projects. You'll find sample projects that you can actually follow and learn using AngularJs, Breeze, Asp.net Web api. You're right, there's a lot of material out there but there not that effective. Hope it helps. http://www.learn-angularjs-apps-projects.com/
Have a look at the Breeze samples, especially WEB Api OData and Breeze. It's sample tutorial for a angularjs+webapi+odata+breeze, no typescript (but isn't javascript just typescript :). For your WEB Api controllers you should definitely install this nuget package :
PM> Install-Package Breeze.Server.WebApi2
This will allow you to build a breeze aware api controller and expose breeze odata metada easily using the Breeze.Server.ContextProviderClass.
Also you can check the excelent but paid training from Pluralsight. It covers SPA from scratch using JavaScript, Angular, and Breeze.
http://www.pluralsight.com/courses/build-apps-angular-breeze
I'm writing my angular app in typescript.
For sake of redundancy prevention I would like to accomplish some type of generic handling.
This is where I'm coming from:
class BaseProvider {
api_url = 'http://localhost:80/api/FILL_OUT_PATH/:id';
$get($resource){
var provider = $resource(this.api_url, {}, {
update: {
method: 'PUT'
}
});
return provider;
}
}
and
class User extends BaseProvider{
constructor() {
super();
this.api_url = 'http://localhost:80/api/users/:id';
}
}
then
module Controllers
{
export class BaseController {
message = "Base controller";
entity : any;
entities : any;
constructor($scope)
{
}
}
}
and
module Controllers
{
export class UserController extends BaseController {
name = "UserController";
constructor($scope, User)
{
super($scope);
this.entity = new User();
this.entities = User.query();
$scope.vm = this;
}
}
}
This is where I'd like to go with UserController (P-Code):
module Controllers
{
export class UserController<T extends BaseProvider> extends BaseController {
name = "UserController";
static $inject = ['$scope', T.typename]; // Inject the types name somehow?
constructor($scope, entity)
{
super($scope);
this.entity = new T();
this.entities = T.query();
$scope.user = this;
}
}
Is there a facility in typescript to handle this?
Is there a facility in typescript to handle this?
No. All type information is erased from the generated JS so you cannot use generic parameters as variables.
There is no way to do it with generics since there will be no typing related information at the runtime, but as a workaround you can pass the type via constructor and type safety with generics. The following code compiles without error and shows how it could be accomplished.
class C1 {
m() { }
}
class C2 extends C1 { }
class C<T extends C1> {
constructor(t: { new (): C1 }) {
var instance = new t();
}
}
new C(C2);
I want to write a TypeScript class that gets a "prefix" parameter in the constructor, this class also needs access to a LogService inject.
Using plain JavaScript you should do it like this:
angular.module('myModule', []).factory('LogWithPrefixFactory', ['LogService', function(LogService) {
var LogWithPrefixFactory = function(prefix) {
this.prefix = prefix;
}
LogWithPrefixFactory.prototype.log = function(txt) {
// we have access to the injected LogService
LogService.log(this.prefix, txt);
}
return LogWithPrefixFactory;
}]);
So when you inject this factory to a controller, you can initiate it many times like this (No need to inject the LogService):
angular.module('myModule').controller('Ctrl', function(LogWithPrefixFactory) {
var foo = new LogWithPrefixFactory("My PREFIX");
var foo = new LogWithPrefixFactory("My OTHER PREFIX");
}
How would you define this Factory in a TypeScript class?
TypeScript classes can not be defined inside functions...
This class should have access to the LogService, but it can't get it in one of the injects.
The following is one way to achieve this:
class LogWithPrefixFactory {
static LogService;
constructor(prefix) {
this.prefix = prefix;
}
log = function(txt) {
// we have access to the injected LogService
LogService.log(this.prefix, txt);
}
}
angular.module('myModule', []).factory('LogWithPrefixFactory', ['LogService', function(LogService) {
LogWithPrefixFactory.LogService = LogService;
return LogWithPrefixFactory;
}]);
angular.module('myModule').controller('Ctrl', function(LogWithPrefixFactory) {
var foo = new LogWithPrefixFactory("My PREFIX");
var foo = new LogWithPrefixFactory("My OTHER PREFIX");
});
Rational: You effectively want a static property in a the LogWithPrefixFactory (using a closure in JS) , and you want it to come from Angular.
There are at least 2 options.
First option, have LogWithPrefixFactory provide a method getInstance that returns the prefixed logger.
module services {
class LogService {
$window: any;
constructor($window: any) {
this.$window = $window;
}
log(prefix: string, txt: string) {
this.$window.alert(prefix + ' :: ' + txt);
}
}
angular.module('services').service('LogService', ['$window', LogService]);
export interface ILog {
log: (txt) => void;
}
export class LogWithPrefixFactory {
logService: LogService;
constructor(logService: LogService) {
this.logService = logService;
}
getInstance(prefix: string): ILog {
return {
log: (txt: string) => this.logService.log(prefix, txt);
}
}
}
angular.module('services').service('LogWithPrefixFactory', ['LogService', services.LogWithPrefixFactory]);
}
Which can be used in the controller like:
this.log1 = logWithPrefixFactory.getInstance("prefix1");
this.log2 = logWithPrefixFactory.getInstance("prefix2");
Complete plunker here.
Second option (similar to another answer), give Angular another function to be used as a constructor, which handles manually the LogService constructor injection (personally, I don't like static).
angular.module('services').service('LogWithPrefixFactory', ['LogService', function(logService) {
return function LogWithPrefixFactory(prefix) {
return new LogWithPrefix(prefix, logService);
};
}]);
Which can be used in the controller like:
this.log1 = new LogWithPrefixFactory("prefix1");
this.log2 = new LogWithPrefixFactory("prefix2");
or even:
this.log1 = LogWithPrefixFactory("prefix1");
this.log2 = LogWithPrefixFactory("prefix2");
LogWithPrefixFactory is injected in the controller but it's not the TypeScript class constructor, it's the intermediate function which returns the actual instance of the class, after it has been "manually" injected with LogService.
Complete plunker here.
Note: These plunkers synchronously compile typescript on the browser. I have tested it only on Chrome. No guarantees that they'll work. Finally, I manually added a small part of angular.d.ts. Full file was very big and my proxy does not allow large POSTs.
I have achieved like below
module Dashboard {
export class LayoutServiceFactory {
static $inject = ["$q", "$http"];
private q: ng.IQService;
private http: ng.IHttpService;
constructor(private $q: ng.IQService, private $http: ng.IHttpService) {
this.q = $q;
this.http = $http;
}
getDataFromServer(serviceUrl) {
var deferred = this.q.defer();
this.http.get(serviceUrl, null)
.then(response => {
deferred.resolve((response) as any);
});
return deferred.promise;
}
static factory() {
var instance = ($q: ng.IQService, $http: ng.IHttpService) =>
new LayoutServiceFactory($q, $http);
return instance;
}
}
appModule.factory("LayoutService", LayoutServiceFactory.factory());
}
This worked for me.
namespace Services
{
export class MyService
{
constructor( protected $someService :any )
{
return this;
}
}
}
angular.module( 'myModule', [] ).factory( Services );
this is how i do it
namespace app {
let app =angular.module('foo',[]);
app.factory(factories);//for registering whatever is there in factories namespace
}
namespace app.factories {
export class fooFactory {
static $inject = ['fooHelperService']
constructor(fooHelperService: services.fooHelperService) {
return {
fooFunc: () => {
return 'hellow world'
}
}
}
}
}
You can create a type that allows you to define what the constructor of the factory looks like:
// Defining the factory
// THIS IS THE IMPORTANT PART!!
export type SelectorFactory = new (config: any) => Selector;
export class Selector {
constructor(protected config: any, protected $http: ng.IHttpService) {
// do some stuff
}
}
angular.module('app')
.factory('Selector', ($http: ng.IHttpService) => {
// This is what the factory looks like to the end user
return (config: any) => {
return new Selector(config, $http);
};
});
// Using the factory
export class SampleCtrl {
constructor(public SelectorFactory: SelectorFactory) {
let config = { op: 1 };
let selector: Selector = new SelectorFactory(config);
}
}