brandonroberts / angularjs-component-router

A simple example app using the angular 1 component router and component helper

angularjs-component-router

An Angular 1.x example app using the component router and module component helper

Installation

Clone this repo

Install the dependencies

npm install

Build the app

npm start

Navigate to http://localhost:8080 in your browser

angularjs-component-router's Issues

ng-outlet problem

Running the application on http://localhost:3000/ results in page with "Component Router" and this additional html comment in source code:

<!-- ngOutlet: undefined -->

Seems like ng-outlet is not working correctly.

$routeOnActivate won't be called when using templateUrl

Hi,

thanks a lot for sharing your example application! I was playing a bit around with it, especially I was interested in the $routerOnActivate function. If I use your application as it is everything works fine but as soon as I use a templateUrl instead of inlining the template via template the $routeOnActivate function won't be called anymore (e.g. here https://github.com/brandonroberts/angularjs-component-router/blob/master/app/routes/about/about.js#L5). I know this is not an issue of your sample application but maybe you've an guess what goes wrong.

Thanks a lot!

loader-function

Hi,

I've noticed, that we can use a loader-function instead of a component within a router-config-object. The question is, how to use it, to load a component dynamically?

Is that even supported in 1.x or do I have to use community-extensions?

Wishes,
Manfred

"ng-outlet" directive has no content

Am I missing something?

https://www.dropbox.com/s/fzzwntkntk8ig11/angularjs-component-router.mp4?dl=1

$routeConfig no longer work since $rootRouter update

To configure routes, we need to use $rootRouter.config([]),
and we cannot configure nested routes without $routeConfig on the component.

Functions on the global scope

Hey @brandonroberts, I'm sorry to abuse your github issues like this, but I'm following your great example that you've given in this repo, and wanted to ask if you know why the standard convention for Angular code emerging in last year or so is to declare the controller functions on the global scope? Eg as in your code

angular.module('app.admin', []).component('admin', {
   ...
    controller: AdminController,
   ...
});

function AdminController() { // function is on the global scope
}

As far as I've ever known, this is bad practice. Any idea how has it become widespread practice in Angular?

Activate router hook

Hello.

Is there a way to declare a "activate" router hook inside a component? I am trying to resolve some data before controller invocation, but either $activate/activate/$routerOnActivate is never called. On the other hand $canActivate seems to work.

Possible to use "component" in routes?

Hi, one more question :) I was wondering if it's possible to use the new component also for the routes. I've forked your plunker and tried to modify the admin.js but no luck, it's not working. Any guess what's going wrong or is it simply not possible (or doesn't make sense at all) to use here a component instead of a directive + controller?

http://plnkr.co/edit/jJur6w9VnyzLUSimTz6a

What is the source/version of the router?

I wonder if the router here was ported directly from Angular2?
Is the npm package no more updated?

Would it be possible to have a reference to it for version tracking?

Navigate in a dialog

Hi @brandonroberts !
Do you know how can I open a dialog (with $mdDialog) who performs a navigation ?
For example, there is a list of objects in a view, and when I choose Delete, it opens a dialog with a new component to confirm.

Component attributes

Hi,

I am trying to use ngComponentRouter in angular1.5 application. Here is my sample code.

(function() {
  'use strict';

  angular
    .module('components')
    .component('tzApp', tzAppFactory());

  function tzAppFactory() {
    return {
      class: 'test',
      template:
        '<tz-toolbar></tz-toolbar>' +
        '<main flex layout="column" layout-fill ng-outlet></main>',
      $routeConfig: [
        {
          path: '/chat/inbox/...',
          component: 'tzInbox',
          name: 'TzInbox',
          useAsDefault: true
        }
      ]
    };
  }
})();

When this code is executed following html code is created

<tz-toolbar></tz-toolbar>
<main flex layout="column" layout-fill ng-outlet>
  <tz-inbox>some inner content</tz-inbox
</main>

My question is: is there any way to to pass some additional attributes to tzInbox component ? For example what I want to do is to attach another attribute directive on this component while it is beying created. My result should look like this for example:

<tz-toolbar></tz-toolbar>
<main flex layout="column" layout-fill ng-outlet>
  <tz-inbox flex class="flex">some inner content</tz-inbox
</main>

Is is event possible or am I missing something ?

Thank you for any answer

Uncaught TypeError: angular.module(...).component is not a function

Hey,

I'm getting this error on a recent build of your demo app, any thoughts ?

Uncaught TypeError: angular.module(...).component is not a function

Thanks for the demo app, its very useful to me :)

Component route x bindings

Hi Brandon.

Is there a way to pass in component bindings along with a routeconfig?

I have this scenario i am struggling to fit under routing scenarion while trying to make components as independent as possible having bindings for input/ouput:

// activated via /order/1
app.component('order', {
    template : '
        <h2>Order</h2>
          <div><customer-info customer="$ctrl.customer"></customer-info></div>
          <div><order-products products="$ctrl.products" on-add="$ctrl.productAdded(product)"...</order-products></div>',
    bindings : {
       id : '<'
    },
    controller : function() {
        this.customer = { ... };
        this.products = [ {...}, ... ];
    }
});

//"order-products" component switches between "product-list" and "product-editor" components
app.component('orderProducts', {
    template : '<product-list products="$ctrl.products" on-click="$ctrl.edit"></product-list></product-editor product="$ctrl.product"></product-editor>',
    bindings : {
        products : '<',
        onAdd : '&'
    },
    controller : function() {
        ...
        this.edit = function() {
           ...
        }
    }
});

My question is:
How would i be able to call /order/1/products to make order-products display only its product-list (default) and /order/1/products/20 to have order-products to display product-editor for product 20?

So i tried:

app.component('orderProducts', {
    template : '<div ng-outlet></div>',
    bindings : {
        products : '<',
        onAdd : '&'
    },
    controller : function() {
       ...
    },
    $routeConfig : [
    { path: '/', component: 'productList', name: 'ProductList' //, ? bindings },
    { path: '/:id', component: 'productEditor', name: 'ProductEditor' //, ? bindings  }
    ]
});

So, if i want to keep productList and productEditor independent, how could i pass on their bindings "products" and "product" respectively from orderProducts ?