ngupgraders / ng-forward Goto Github PK
View Code? Open in Web Editor NEWThe default solution for those that want to write Angular 2.x style code in Angular 1.x
The default solution for those that want to write Angular 2.x style code in Angular 1.x
I have a parent directive and child directive
In the child directive i need to call a function of the parent
In angular1 i simply require the controller of the parent directive and call it
How would i do it with ng-forward ?
We need to add component tests to the todo mvc example that Pete made.
We should consider creating special directives to replace all the common angular 1 directives, but where they look like element property binding is working. It would of course be a ruse. This only included non-template directives (so things like ng-repeat, ng-if, ng-include are not included here).
ngBind -> [textContent]
ngBindHtml -> [innerHTML]
ngClass -> [class]
ngChecked -> [checked]
ngDisabled -> [disabled]
ngShow, ngHide -> [visible]
ngModel -> [value]
ngReadOnly -> [readOnly]
ngSelected -> [selected]
ngSrc -> [src]
ngSrcSet -> [srcSet]
ngStyle -> [style]
Hi all,
In angular1 we were used in jasmine to require the classes with:
beforeEach(function() {
module('x');
inject(function (_y_) {
y = _y_;
});
});
In ng-forward all objects live in a big module.
How do i get to this module?
I could theoretically import the classes myself, but then i would have to make all dependency injection myself which is not so nice.
Any thoughts?
Thanks,
David
This issue is here to discuss how a decorator could look like and work under the hood to enable routing to components with ui-router.
Most recent (and thus valid) information about the component router can be taken from the talk of Brian Ford and the corresponding slides:
https://www.youtube.com/watch?v=z1NB-HG0ZH4
https://docs.google.com/presentation/d/1bGyuMqYWYXPScnldAZuxqgnCdtgvXE54HhKds8IIPyI/edit#slide=id.
Component router aims to be universal for ng1/ng2. I don't know the exact release plans. Maybe in the near future the component router will be available for ng1 but still I think there is some value in being able to use ui-router with ng-forward and the component oriented approach.
Is possible to have that in Typescript?
I am wondering if it makes sense to provide a decorator for the ng1 config phase. AFAIK in ng2 the config phase doesn't exist so a decorator might just be there for migration.
Right now all config stuff would be moved to the the nearest top module where it would be appropriate to bundle()
a module. I'd rather like to have a solution where the config code stays close to the service it belongs to. On the other hand I'm a bit confused what will happen to all this config-code in ng2? Where will this kind of things happen?
Hi,
This feature would be cool.
Take a look at angular, there we have an indication if the build fails or not.
https://github.com/angular/angular
BR,
David
Ng-forward does a lot behind the scenes.
When things don't work out as expected it may be hard to understand what the problem is.
I wanted to discuss how to tackle the troubleshoot
Is ng-for available ?
If not would it be possible to create this ?
Hi,
I am getting the following error:
Uncaught ReferenceError:
Reflect is not defined_map @ metastore.ts:7
get @ metastore.ts:15
(anonymous function) @ providers.ts:20
(anonymous function) @ inject.ts:44
(anonymous function) @ a.service.ts:2
__decorate @ a.service.ts:2
(anonymous function) @ a.service.ts:7
124.ng-forward @ a.service.ts:32
s @ _prelude.js:1
...
It comes from the @Injectable annotation.
I cannot check the case more, because somehow chrome cannot get the source code of metastore.
Maybe something is bad with the source map?
There are modules where we need to pass in names of factories to their functions:
For example angular translate let you pass
For more information look here:
https://github.com/angular-translate/angular-translate/wiki/Error-Handling
Now the problem comes that if i write the syntax in the angular2 style i don't have a name anymore.
If we don't have uglification everything goes ok
if we have uglification:
Let's say i have a class called Foo
The name of Foo is then changed to e.
I lost the name.
What can i do?
Hello !
I like the idea behind ngForward (writing angular 2 code for ng1 is awesome), but I think that it would be more suitable as a build step, maybe as a babel plugin.
Do you think that it's something that could be done ?
This way you would write ng2 code, compile & get ng1 code on the otherside, no need to load the ngForward library along with angular.
In Angular 2, [(ng-model)]="prop"
desugars to [ng-model]="prop" (ng-model-change)="prop=$event"
.
Alter our current two way binding to behave more similarly to this.
I have a spike put together for semi-dynamic events: https://github.com/ngUpgraders/ng-forward/blob/master/src/util/events.js
When you declare custom events on your component, a special [on-${event}]
directive is created. These onEvent directives function similarly to the existing [ng-${event}]
directives. Two questions:
Hi all,
I get the following error message:
"Uncaught Error: One or more of your providers was not valid. Please make sure all providers are either: a class, decorated class, Provider instance, or module string"
"groupModulesAndProviders @ group-modules-providers.js:34
bundle @ bundle.js:70
391../prmMissingTranslationHandler.factory @ prmTranslate.module.ts:7
s @ _prelude.js:1
(anonymous function) @ _prelude.js:1
294../appConfig/appConfig.module @ app.ts:10
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous function) @ _prelude.js:1"
This is too unspecific.
I need to know which provider had the problem.
How may i migrate a directive with transclusion?
Will ng-forward support the content tag like in angular2?
If not what will be the preferred solution?
Hi,
ng-if in angular2 is written either *ng-if or [ng-if]
https://github.com/angular/angular/blob/d32f58926dd15a5771f5e3a3c2b77ea41c03b98b/modules/angular2/src/directives/ng_if.ts
How are the plans for ng-forward?
The same question is for ng-class.
Thanks,
David
How would we like to configure ng-forward? There are various options I think that we may like to provide to devs. Some examples are:
I'm trying to include ng-forward
in my TypeScript 1.6 project, but import results in errors.
This is my .ts file:
import {Component} from '../../../node_modules/ng-forward/cjs/index';
@Component({
selector: 'test',
template: `<div onclick="test()"></div>`
})
class Test{
test() {
console.log("test")
}
}
This is my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"preserveConstEnums": true,
"experimentalDecorators": true
}
}
And those are errors from gulp-typescript:
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(2,4): error TS1131: Property or signature expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(11,3): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(11,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(13,18): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(14,14): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(15,17): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(16,15): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(17,12): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(18,13): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(19,11): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(20,16): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(21,2): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(21,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(21,23): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(23,4): error TS1131: Property or signature expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(28,3): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(28,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(30,14): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(31,17): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(32,11): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(33,16): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(34,2): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(34,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(34,23): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(2,4): error TS1131: Property or signature expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(4,3): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(4,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(6,15): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(7,2): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(7,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(7,23): error TS1109: Expression expected.
Edited: I removed the previous issue as I solved it, however I have a new one.
I have module.provider() that I use to wrap JS libraries and make them injectable. I can not figure out how to use provider in ng-forward I just get Uncaught TypeError: Cannot call a class as a function when I try to use @Provider('JSONEditor', {useClass: JSONEditorProvider})
Do I have to use provide instead?
The resulting JavaScript file of the build comes without source maps
Would be great to add this
Hi,
What is the equivalent of module.config and module.run function?
For example, where do i configure the $stateProvider of the ui-router. In the traditional angular1 syntax i configure it in the config function.
Thanks,
David
To be consistent with recent Angular 2 change: angular/angular@1eb0162
Love the repo name by the way!
So I thought it would be helpful if we all reviewed all the libraries and provide general opinions on how we should implement the new library. I realize I am the loser who didn't write any libraries so I do not pretend to deeply know or understand the detailed problems and solutions that you guys have run into. But I've used one of the libraries extensively, so I'll simply play the role of 'user'. Without your pioneering works we would not be where we are, so good on you all!
Based on how there is a lot of similarity between the libraries and the fact that our goal is very clear (make it work like ng2 as much as possible), I think this actually won't be all that controversial.
I think we'll have better luck if we do our design in a google doc, just because github issue threads can get loooooong. Also the doc is easier to edit and keep organized.
Here's the doc: https://docs.google.com/document/d/1oq0T0-jicGzc5uYJc0LE1ZBHm0w1lhVB4IVqUPXWSCg/edit?usp=sharing
Please add points to each library as you review them (if you get the time), otherwise just add some points about your own library.
The annotations are missing.
The workaround in the meantime are the input and output properties of the @component annotation
Tried to get this working with jspm but can't figure out a way to make it run.
jspm-config-override
"npm:[email protected]": {
"peerDependencies": {
"angular": "^1.4.0"
},
"shim": {
"dist/index": [
"angular"
]
}
}
results in
Uncaught Uncaught TypeError: Object.defineProperty called on non-object
Evaluating http://localhost:8081/jspm_packages/npm/[email protected]/dist/index.js
Evaluating http://localhost:8081/jspm_packages/npm/[email protected]
Error loading http://localhost:8081/bootstrap.js
(anonymous function)
because the way jspm loads it, there is no exports
defined.
If I don't specify the angular dependency as shim config
"npm:[email protected]": {
"peerDependencies": {
"angular": "^1.4.0"
}
}
there is no global angular
there
Uncaught Uncaught Uncaught ReferenceError: angular is not defined
Evaluating http://localhost:8081/jspm_packages/npm/[email protected]/dist/util/jqlite-extensions.js
Evaluating http://localhost:8081/jspm_packages/npm/[email protected]/dist/index.js
Evaluating http://localhost:8081/jspm_packages/npm/[email protected]
Error loading http://localhost:8081/bootstrap.js
(anonymous function)
So maybe I'm just missing the obvious here, but shouldn't ng-forward
explicitly import angular when it needs angular instead of relying on it being there as a global?
I believe that on this line https://github.com/ngUpgraders/ng-forward/blob/master/src/util/events-builder.js#L23 we need to be using CustomEvent
not Event
for the detail
to be passed through.
With property bindings, we should probably add a list of core directives for common element properties. I know there is a list somewhere of native properties supported in the Angular 2 codebase.
Covers scenarios like:
<input type="text" [disabled]="myComponent.disabled">
ES5 lacks support for decorators and it is missing a class keyword. This issue exists to track proposals for ES5 support in ng-forward.
I suggest trying to emulate Angular 2's ES5 syntax:
var MyComponent = ngForward
.Component({
selector: 'my-component',
outputs: ['myEvent']
})
.class({
myEvent: new ngForward.EventEmitter(),
constructor(){ }
});
ngForward.bootstrap(MyComponent);
Hello all guys,
I don't know if that problem was already solved (i've take a look on the previous bugs but there is nothing on that).
So I've created a component like that:
<my-component [(data)]="serverData"></my-component>
serverData is updated from clickEvent or after n minutes and inside my component I've:
$scope.$watch('je.data', (n) => {
//perform action
});
Obviously it's a failure point for angular 2.0. How I can avoid that?
tnx
Hi,
I don't know if this is a problem with angular sanitize or ng-forward but it does not recognize the (click) attribute.
I renamed ng-click="" to (click)=
I get
Error: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.
at Error (native)
at forEach.attr
at Object.JQLite.(anonymous function) [as attr]
at Object.$$sanitizeUriProvider.$get.Attributes.$set
at http://localhost:8000/primo-explore/lib/bundle.js:52302:15
at forEach
at mergeTemplateAttributes
at applyDirectivesToNode
at compileNodes
at compileNodes
I am using angular-sanitize 1.4.7
Please let me know if i should continue this here or open a defect to angular-sanitize.
Thanks,
David
Let's say i have an old angular module X which has a service A.
Now i want to write a service B which gets the service A injected.
I need essentially something like providers in the components annotation but there isn't something like this.
When i try to write
@Inject('X','A')
class B {
}
I get
Error: [$injector:unpr] Unknown provider:AProvider
I recognized that the README is already quite lengthy and there are tons of features hidden in the codebase that are not yet documented. How about opening a wiki for this project to get the docs a little bit more structured? I also would like to contribute to the docs once I figured out myself how to use the ui-router state decorators that I found in the codebase :)
Because when I discovered this project I was all amazed on being able to get rid of angular modules in my code as well as the ability to use the new angular template binding syntax. Really cool stuff :) So I already have MikeRyan52's decorators implemented and then started wondering: No more modules.. how am I going to configure my ui-router states? Taking a quick look at the codebase I saw that there is decorator for this. Yay! So to make this easier for future users I would be glad to help out adding docs and improving docs, but I think stuffing it all into the README will not be feasible in the long run.
@MikeRyan52 Could you add a notice to your angular-decorators project that makes people know about ng-forward? Because I didn't know this successor project until watching the angular-connect talk where it is mentioned.
Hi all,
ng-submit doesnt look equivavlent to (submit).
My problem was that when i have a function (submit)="doSomething() it is called multiple times.
This also makes some sense, because if it is a simple directive then it is a part of the digest cycle and scope inheritance (My explaination).
Therefore it is still unsafe to use this.
Thanks,
David
Now that we have working events we can simulate Angular 2 style events using this syntax:
<my-component on-event="doSomething($event)"></my-component>
and thanks to some work by @timkindberg and @mitranim, we now support three types of property binding: text value, one way, and two way:
// Bind text:
<my-component color="red"></my-component>
// Bind one way:
<my-component bind-color="color"></my-component>
// Bind two way:
<my-component bind-on-color="color"></my-component>
With these building blocks in place I was taking a look through the source for Angular's $compile
service and noticed that it doesn't strip non-alphanumeric characters from scope bindings or directive names. To demonstrate I've created a new branch called proposal/template-syntax that changes both the event and properties builders so that the above examples could be rewritten like this:
// Events
<my-component (event)="doSomething($event)"></my-component>
// Bind text:
<my-component color="red"></my-component>
// Bind one way:
<my-component [color]="color"></my-component>
// Bind two way:
<my-component [(color)]="color"></my-component>
While the previous syntax would have worked just fine when ported over to Angular 2 (brackets and parens are just syntactic sugar for bind-${prop}
and on-${event}
, respectively) it is pretty verbose and would be cumbersome to write out for components with a large property/event API.
The only issue is that it would require a good bit of overhead to support both on-*
/(*)
, bind-*
/[*]
, and bind-on-*
/[(*)]
. It would be best to to choose one syntax to support for v1 of ng-forward.
Hi all,
I've created a component:
$scope.onCustomEvent = function (properties, promise) {
if (properties == 'image') {
promise.resolve('url');
}
};
<json-editor [(data)]="dataMock" (on-custom-event)="onCustomEvent" >
In my component I do:
@Component({
selector: 'json-editor',
events: [],
inputs: ['data','onCustomEvent']
})
export default class JsonEditor {
onCustomEvent;
constructor() {
new PluginInitializer(this.onCustomEvent);
}
}
but this.onCustomEvent is undefined.
What is the right way to pass it? I missed something?
thanks.
Given this example:
<parent>
<child [some-prop]="parent.value"></child>
</parent>
When parent.value
is initialized to an empty string, on first read the value comes back as undefined. Additionally, if the child writes to its someProp
property, any changes made are destroyed on the next $digest cycle. While this may sound correct, proper behavior would be to keep the changes locally to child until parent updates the value, not on every $digest cycle.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.