Skip to content

Instantly share code, notes, and snippets.

View brandonroberts's full-sized avatar

Brandon Roberts brandonroberts

View GitHub Profile
@brandonroberts
brandonroberts / navigation.html
Last active September 2, 2015 14:54
Angular 1.x component router navigation bug example
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
<a href="/">Home</a>
<a ng-link="['/two']">ngLink Two</a>
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
const GITHUB_API_URL = 'https://api.github.com';
export class Repository {
name: string;
full_name: string;
@brandonroberts
brandonroberts / app-original.js
Last active September 5, 2016 14:08
Component Router Lazy Load Original App
(function() {
var app = angular.module('myApp', ['ngComponentRouter']);
app.component('app', {
template: [
'<a ng-link="[\'Home\']">Home</a> |',
'<a ng-link="[\'About\']">About</a> |',
'<a ng-link="[\'User\', \'Profile\']">User Profile</a>',
'<hr>',
'<ng-outlet></ng-outlet>'
@brandonroberts
brandonroberts / app-lazyload.js
Last active February 19, 2016 21:36
Component Router Lazy Loading
(function() {
var app = angular.module('myApp', ['oc.lazyLoad', 'ngComponentRouter']);
app.component('app', {
template: [
'<a ng-link="[\'Home\']">Home</a> |',
'<a ng-link="[\'About\']">About</a> |',
'<a ng-link="[\'User\', \'Profile\']">User Profile</a>',
'<hr>',
'<ng-outlet></ng-outlet>'
@brandonroberts
brandonroberts / app-user.js
Created February 19, 2016 21:37
Component Router Lazy Loading
(function() {
var user = angular.module('user', []);
user.component('user', {
template: 'User <br><br><ng-outlet></ng-outlet>',
$routeConfig: [
{ path: '/profile', name: 'Profile', component: 'userProfile' }
]
});
@brandonroberts
brandonroberts / ngconf-snippets-new.md
Last active May 7, 2021 08:12
Component Router (New) snippets

Snippets for workshop

Step 1 - Home Route

<base href="/">

'@angular/router':                   { main: 'index.js', defaultExtension: 'js' },

import {ROUTER_PROVIDERS} from '@angular/router';
@brandonroberts
brandonroberts / routes-v1.md
Last active June 22, 2016 13:00
Angular 2 Route Map
const ROUTES = [
  {
    path: '',
    component: HomeComponent
  },
  ...PARENT_ROUTES
]

const PARENT_ROUTES = [
@brandonroberts
brandonroberts / async-ng-module-loader.ts
Last active April 26, 2019 12:40
Webpack Async NgModule Loader
import {Injectable, NgModuleFactory, NgModuleFactoryLoader, Compiler, Type} from '@angular/core';
class LoaderCallback {
constructor(public callback) {}
}
export let load: Type = (callback: Function) => {
return new LoaderCallback(callback);
};
@brandonroberts
brandonroberts / get-route-components.ts
Created August 9, 2016 18:07
Gather route components for declarations
import { Routes } from '@angular/router';
export function getRouteComponents(routes: Routes, routeComponents: any[] = []) {
routes.forEach(route => {
if (route.component) {
routeComponents.push(route.component);
}
if (route.children) {
getRouteComponents(route.children, routeComponents);
@brandonroberts
brandonroberts / app.module.ts
Last active August 22, 2016 06:48
Route Modules
@NgModule({
imports: [
routing,
MainModule
]
})
export class MainModule {}