An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass
PatrickJS on master
Update README.md (compare)
hi @dancancro in my case, I used Swagger to generate an API client and that’s the only API service I have. It is generated outside of src
by a postinstall
npm entry.
Indeed the service is anyhow closer to the application state, but I don’t see them together, as the app state include other stuff that aren’t coming from API, such as calculated values, temporary stuff, cached data, user interactions, etc… I’d better keep the API service in something like src/app/services
@dancancro I think the idea of a “global app state” is quite plastic. I think most of it is like a local backend, indeed, but not completely, and you probably will find people with different understandings implementing it in different ways.
I’m not very experient on Redux either, so, I’m always curious to see how other people are doing too
@johnespn there is a couple of examples over the web, this is one — https://github.com/jkuri/ng2-datepicker
other — https://github.com/ocombe/ng2-translate
other much bigger one — https://github.com/angular/material2
Bear in mind that there’s nothing special about building a library of reusable components. It will be very similar to a standard Angular2 app. You just have to configure the NgModule
to export all components, pipes, directives and services you want to reuse and ensure its package.json
is as clean as possible to let the other project use it.
It probably won’t need either routes and entry components, as it will always be just used by another app.
have fun!
import {Component, ViewContainerRef} from '@angular/core';
import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material';
@Component({
selector: 'forgot-password',
styleUrls: ['./forgot-password.style.scss'.toString()],
templateUrl: './forgot-password.template.html'
})
export class ForgotPasswordDialog {
public emailAddress;
constructor(public dialogRef: MdDialogRef<ForgotPasswordDialog>) {
}
ngOnInit() {
this.emailAddress = '';
}
cancel() {
this.dialogRef.close();
}
submit(model: string, isValid: boolean) {
if (isValid) {
this.dialogRef.close(model);
}
}
}
import { async, TestBed } from '@angular/core/testing';
import { Component, ViewContainerRef } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { ForgotPasswordDialog } from './forgot-password.component';
describe('ForgotPasswordDialog', () => {
let forgotPassword: ForgotPasswordDialog;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ForgotPasswordDialog],
imports: [MaterialModule]
}).compileComponents();
}));
beforeEach(() => {
let fixture = TestBed.createComponent(ForgotPasswordDialog);
forgotPassword = fixture.componentInstance;
});
it('module should be defined', () => {
expect(forgotPassword).toBeDefined();
});
});
// Add mandatory wijmo.css
require('style!css!../vendor/wijmo/wijmo.min.css');
// Wijmo core files are not modules, so add them using the script-loader
require("script!../vendor/wijmo/wijmo.min.js");
require("script!../vendor/wijmo/wijmo.input.min.js");
require("script!../vendor/wijmo/wijmo.grid.min.js");