X Tutup
Skip to content

fix(angular1-router): add support for using the component helper#6796

Closed
petebacondarwin wants to merge 1 commit intoangular:masterfrom
petebacondarwin:pr-5278
Closed

fix(angular1-router): add support for using the component helper#6796
petebacondarwin wants to merge 1 commit intoangular:masterfrom
petebacondarwin:pr-5278

Conversation

@petebacondarwin
Copy link
Copy Markdown
Contributor

In Angular 1.5 there is a new helper method for creating component directives.
See https://docs.angularjs.org/guide/component for more information about components.

These kind of directives only match the E element form and the previously component
router only created HTML that matched directives that matched the A attribute form.

This commit changes the <ng-outlet> directive so that it generates custom HTML
elements rather divs with custom attributes to trigger the relevant component to
appear in the DOM.

Going forward, Angular 1.5 users are encouraged to create their router components
using the following style:

myModule.componnet('component-name', {
  // component definition object
});

Closes angular/angular.js#13860
Closes #5278

BREAKING CHANGE:

The component router now creates custom element HTML rather than custom attribute
HTML, in order to create a new component. So rather than

<div custom-component></div>

it now creates

<custom-component></custom-component>

If you defined you router components using the directive() helper and
specified the restrict properties such that element matching was not allowed,
e.g. restrict: 'A' then these components will no longer be instantiated
by the component router and the outlet will be empty.

The fix is to include E in the restrict property.

restrict: 'EA'

Note that this does not affect directives that did not specify the restrict
property as the default for this property is already EA.

In Angular 1.5 there is a new helper method for creating component directives.
See https://docs.angularjs.org/guide/component for more information about components.

These kind of directives only match the `E` element form and the previously component
router only created HTML that matched directives that matched the `A` attribute form.

This commit changes the `<ng-outlet>` directive so that it generates custom HTML
elements rather divs with custom attributes to trigger the relevant component to
appear in the DOM.

Going forward, Angular 1.5 users are encouraged to create their router components
using the following style:

```
myModule.componnet('component-name', {
  // component definition object
});
```

Closes angular/angular.js#13860
Closes angular#6076
Closes angular#5278

BREAKING CHANGE:

The component router now creates custom element HTML rather than custom attribute
HTML, in order to create a new component. So rather than

```html
<div custom-component></div>
```

it now creates

```html
<custom-component></custom-component>
```

If you defined you router components using the `directive()` helper and
specified the `restrict` properties such that element matching was not allowed,
e.g. `restrict: 'A'` then these components will no longer be instantiated
by the component router and the outlet will be empty.

The fix is to include `E` in the `restrict` property.

`restrict: 'EA'`

Note that this does not affect directives that did not specify the `restrict`
property as the default for this property is already `EA`.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should double check that this version bump doesn't affect benchmarks, etc.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do we do that?
Are the benchmarks run as part of the CI builds?

@btford
Copy link
Copy Markdown
Contributor

btford commented Feb 1, 2016

LGTM, not sure what the circle CI failure is about.

@alxhub
Copy link
Copy Markdown
Member

alxhub commented Feb 1, 2016

Hi Pete, go ahead and merge this when you're ready.

@petebacondarwin petebacondarwin added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Feb 5, 2016
@veenayp
Copy link
Copy Markdown

veenayp commented Feb 8, 2016

Could you provided latest compiled version of router i.e. .js file

@petebacondarwin
Copy link
Copy Markdown
Contributor Author

Closed via d86be24

@ericj79
Copy link
Copy Markdown

ericj79 commented Feb 9, 2016

Is there a way to get this updated component router through bower, for using with Angular 1.5.x?

@petebacondarwin
Copy link
Copy Markdown
Contributor Author

The router is published via npm: npm install @angular/router
The version published there is not yet correct.
Look for the new version later this week.

@y4nnL
Copy link
Copy Markdown

y4nnL commented Feb 26, 2016

As of today, it seems the version published with npm does not contain the fix
What is the best way to patch the directive?

@petebacondarwin
Copy link
Copy Markdown
Contributor Author

@y4nnL : Today the npm package does not contain the fixed files. The most reliable way to get it is to build it from the Angular 2 code. We are working to get a new release published very soon.

But @andreiho has kindly built it and put it in a gist for you.

See angular/angular.js#12926 (comment)

@gkalpak
Copy link
Copy Markdown
Member

gkalpak commented Mar 8, 2016

BTW, it's now available on npm (version 0.2.0).

@petebacondarwin petebacondarwin deleted the pr-5278 branch September 2, 2017 14:44
@angular-automatic-lock-bot
Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes effort1: hours type: bug/fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ngComponentRouter not calling $routerOnActivate in angular 1.5 when using a template URL

8 participants

X Tutup