Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/born2net/Angular-kitchen-sink
:rocket: Angular - learn by example
https://github.com/born2net/Angular-kitchen-sink
Last synced: 4 days ago
JSON representation
:rocket: Angular - learn by example
- Host: GitHub
- URL: https://github.com/born2net/Angular-kitchen-sink
- Owner: born2net
- Created: 2015-12-30T03:00:26.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-27T22:28:03.000Z (about 5 years ago)
- Last Synced: 2024-08-02T05:12:47.006Z (3 months ago)
- Language: TypeScript
- Homepage: http://ng.javascriptninja.io
- Size: 3.87 MB
- Stars: 754
- Watchers: 61
- Forks: 146
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
Angular kitchen sink
======================
The Ultimate Angular kitchen sink Single Page App, because code samples are always better than docs!
----------------
Powered by angular-cli
Check this working demo: http://secure.digitalsignage.com/boiler
====
Cherry pick the snippets you like and use the code to see just what's possible with the awesomeness of Angular
to install::
```
git clone https://github.com/born2net/Angular-kitchen-sink.git
cd Angular-kitchen-sink
npm install
open browser to http://localhost:4201/
```
What features of Angular does this app cover? everything:
```
- Gulp tasks for dev / prod, doc gen and more
- use: gulp developer (to debug in real time (i.e.: compile TS in the browser and work close to the metal)
- use: gulp development --restart (see below on details for best performance debugging)
- use: gulp production (see below on details for server directory setup)
- ng-bootstrap components (https://github.com/valor-software/ngx-bootstrap)
- Support the awesomeness of Redux DevTool with live time travel (http://goo.gl/PNG5nV)
- Immutable.js (https://facebook.github.io/immutable-js/) Todo component with:
- backend server sync
- Extend Base class StoreModel makes working with Immutable.js a breeze and use the power of Typing
- Using factory to always create immutable typed instances of a class
- Lazy loading with router (ngModules)
- Use modules with ANALYZE_FOR_ENTRY_COMPONENTS to allow for AOT component registration
- Sharing a global AuthService when loading via Feature module as well as when loading via Lazy route
- Highcharts directive wrapper (http://www.highcharts.com)
- StarWars movie shop powered by Redux store
- ng-redux using multiple examples of deep selection to bind to specific reducer / values
- ng-redux with epics and switching streams on the fly (ping/pong)
- Pass custom styles to components via ngStyle and custom properties
- Pass in custom stylles via input and evaluate in component
- jQuery integration the Angular way via BrowserDomAdapter
- Access native HTML elements like by inserting identifiers (i.e.: #anotherWayToGetInput)
- CommBroker dependency service, value sharing / mediator design pattern
- Custom @Decorator (@StyleDecorator) for components
- Custom decorators style, log, thorttle, observable log, page, once, visit, retry, auto unsubs and others
- Component is passed in style via inputs and evaluates (light class)
- Component is styled using deep css selector from parent component (border)
- Use EventEmitter.observers and show element only when (onMyEvent) is bound to
- Use HTML5 CustomEvent to pass data to ancestor parent components via bubbling event
- Use ngDoCheck with a combination of IterableDiffer or KeyValueDiffers to know when specific inputs to a component changed
- LocalStorage service
- Global Consts for event and vars registration
- Responsive design (on size change Angular components will react)
- Creation of a Component's Template from Dynamic HTML fragment (notes5)
- Creation of a Component's Template from component content
- Creation of a Component's Template without synthetic suga
- Create module dynamically and its declared components at runtime via compileModuleAndAllComponentsSync
- Create component dynamically at runtime and pass in template (tooltip)
- Use templateRef instead of ng-content for content projection
- Multi slot transclusion
- RXjs powered Custom HTTP class that extends the default Http ng to add new behaviour
- Rxjs reactive operators and subscribers throughout the app (some random examples as well)
- Rxjs Change detection strategy for improved rendering of page (OnPushObserve)
- Rxjs Node server side CRUD for Observable client to server calls
- Rxjs... lots more of it...
- Use ANALYZE_FOR_ENTRY_COMPONENTS as part of ngModule provider so we can skip entryComponents
- Different ways to load and inject dynamic components (see Notes3 component)
- Import template into a component as a runtime string
- Create your own custom \*NgBookIf and \*ngBookRepeat directives with createEmbeddedView
- Force change detection via ref.markForCheck();
- Embedded SVG component
- Greensock SVG animation
- ngAnimate SVG
- Lots of standalone components such as Modal, Sliders, Todo, Tabs and more
- Shared state (Side menu and file menu)
- use module.moduleName inside component to be able to reference files paths locally (Notes1.ts)
- use contentWrap.childNodes.length to provide a default template to component if not provided by consumer
- use ngTemplateOutlet to pass in template and use $implicit for values
- use lazy loading of components when router enters path (NoteDynamic, kind of like require(...))
- manage app version by injecting from package.json and gulp bumping on release
- Extend the Date pipe with custom implementation
- Extend the http service with an Http interceptor service
- ngAnimation
- router animation
- enter / leave states
- default any / void animations
- Dependency injection and decorators such as @Host
- Advanced decorators such as @HostListener @ContentChildren @Injectable and more
- Provide data to *ngFor declaratively via @ContentChildren
- Provide components to *ngFor declaratively via @ContentChildren
- Using @CanActivate we prevent user from accessing routes if not authenticated (checkout AppInjService)
- Using @CanDeactivate to demo user prompting when navigating away from a url route segment
- trackBy to create a custom identifier for *ngFor (trackBy:identify)
- use nodeLogger to show ToDo items are only updated and not re-created when using our own identifier method
- Error handler service overrides ng error handling and provide custom options
- Dependency sharing
- Hook into application lifecycles
- Form and validation (both via FormBuilder and manual creating Control Groups)
- Form member access via contnetChild @optional
- Generic implemntation, based classed of a form NG_VALUE_ACCESSOR (hexadecimal form component)
- Use ng-container is a generic substitute to a none element (like template)
- Custom validators such as PasswordMatch (@Attribute)
- Form observables and operations including Async piping and more
- Form promised based field validation
- Form custom counter component compatible with both template and model forms
- Todo data model persistence and sync to node server via CRUD (node CRUD end point server side included)
- Subclass / Inheritance ES6 (Notes component)
- Static shared lib and single reference file
- Theme service (supports 2 themes including Lite and Dark)
- Pipes including grid sort and character counter
- Use reflection to automatically show a component's name, super useful for debugging component location in page
- Interfaces
- TypeScript ype guard example via interfaces (IPet, IWildAnimal)
- UI data binding / uni and 2 way
- Document generation
- and much more...
```
if you are on a Windows environment I highly recommend you work with: http://cmder.net as well as https://www.cygwin.com
Looking for even more?
------------
- ng-skeleton, the ultimate angular seed project: https://github.com/born2net/ng-skeleton
- checkout this enterprise level angular app that's forked off this project: https://github.com/born2net/studioDashboard
Videos:
------------------------------------------------------------------------
[](https://www.youtube.com/watch?v=vyiyJCLlGwo&feature=youtu.be "Advanced angular tips and tricks")
[](https://www.youtube.com/watch?v=bEkPEnudm7s&feature=youtu.be "The Ultimate redux typed store implementation for angular")