jasonaden

Sample Packaging Application

This app was put together to show how to create and distribute an Angular library. It corresponds with the talk given at the Angular Mountain View Meetup (video here).

The steps below correspond to commits in this repo (after initial setup) so you should be able to refer to the individual commits to see the changes made.

Steps

Step 0:

jasonaden

Observer:

• Seems like it's okay. There's PartialObserver<T> and Observer<T> as the main exports.

Subscription:

• Subscription is currently a class implementation. ISubscription is closest to the spec, and AnonymousSubscription is any object returning an unsubscribe() method.
• ISubscription should be renamed to Subscription. This means the current Subscription class (which is used almost exclusively in type position) would be renamed to RxSubscription. See description below in Observable for how RxSubscription and Subscription would be implemented and used.

Subscriber:

jasonaden

@angular/common/router

Store

• DONE Create RouterStore to hold RouteConfig objects
• Helpers:
  • DONE getConfig(state: RouterState, id: number)

URL

jasonaden

Goals

• Basic understanding of how to create an Angular application
• Hands-on experience with fundamental pieces of the Angular platform
• A good idea of "what's next" to continue learning journey

Links

• Angular on Github
• Tour of Heros

jasonaden

ROUTER NOTES

The Angular router is loved for the features it provides, but is also a sore spot in terms of bugs, testability, edge cases causing errors during implementation, and bundle size. We would like to improve heavily on all these areas. Ideally this could be done without breaking changes so it could be released in v6. While some of the items below can be done in that way, there may be advantages to forking to a new package that would use the same concepts and much of the same core implementation, but do so with treeshakability and simplicity in mind to help address the sore spots.

These are some notes about how to get to this goal.

DESIGN

Testing Improvements

jasonaden

// Require the version of Rx you want to use (_esm5 or _esm2015)
const rxPaths = require('rxjs/_esm5/path-mapping');

var config = {
  // Other config options...
  resolve: {
    extensions: [".ts", ".js"],
    modules: [path.resolve('./src'), 'node_modules'],
    // Use the "alias" key to resolve to an ESM distribution

jasonaden

# bash/zsh completion support for core Git.
#
# Copyright (C) 2006,2007 Shawn O. Pearce <[email protected]>
# Conceptually based on gitcompletion (http://gitweb.hawaga.org.uk/).
# Distributed under the GNU General Public License, version 2.0.
#
# The contained completion routines provide support for completing:
#
#    *) local and remote branch names
#    *) local and remote tag names

jasonaden

it('should allow lazy loaded module in named outlet',
    fakeAsync(inject([Router, NgModuleFactoryLoader], (router: Router, loader: SpyNgModuleFactoryLoader) => {
        
    @Component({selector: 'lazy', template: 'lazy-loaded'})
    class LazyComponent {}

    @NgModule({
      declarations: [LazyComponent],
      imports: [RouterModule.forChild([{path: 'lazy', component: LazyComponent}])]
    })

jasonaden

Compare jQuery and AngularJS: https://www.airpair.com/angularjs/posts/jquery-angularjs-comparison-migration-walkthrough

jasonaden

var directive = ['$parse', function ($parse) {
        var directive = {
            restrict: 'A',
            require: ['ngModel'],
            link: link
        };
        return directive;

        function link(scope, element, attr, ctrls) {
            var ngModelController = ctrls[0];