dart-archive / angular.dart Goto Github PK
View Code? Open in Web Editor NEWLegacy source repository. See github.com/dart-lang/angular
Home Page: https://webdev.dartlang.org/angular/
Legacy source repository. See github.com/dart-lang/angular
Home Page: https://webdev.dartlang.org/angular/
Using exceptions for control flow is considered an anti-pattern by some engineers.
e.g. ctrl._private
So the profiling can hook into it.
e.g ng-repeat="x in y.z" where y is null.
This doesn't work:
<my-component ng-repeat="a in ctrl.aList" a="a"></my-component>
Workaround: wrap component into an outer element, e.g.:
<div ng-repeat="a in ctrl.aList">
<my-component a="a"></my-component>
</div>
The element that's injected into the Component is the element where the component is set, but once the shadow dom is created it's invisible to that element.
Is it expected that something like this should currently work or is there more to it than this:
@NgComponent(
selector: "simple",
template: "<div>This is some simple HTML</div>"
)
class SimpleComponent {
// Do I need to do something here perhaps?
//Element element;
//Scope scope;
//SimpleComponent(Element this.element, Scope this.scope) {
//}
}
main() {
var module = new AngularModule()
..directive(SimpleComponent);
bootstrapAngular([module]);
}
I have a <simple></simple> tag in an html file, but nothing happens.
Basically, I'm looking for the Dart equivalent of
app.directive('simple', function() {
return {
restrict: "E",
replace: true,
template: "<div>This is some simple HTML</div>"
}
});
Thanks!
'Import as' allows us to introduce namespace collisions for dependent apps that don't 'import as'.
e.g. Angular.dart has an 'Event' class which collides with dart:html.
Angular.dart should not be exporting internal classes to projects that import Angular.
One solution is to create a private Impl library which the main Angular.dart library imports.
I saw in some classes ? symbol is used for checking optional parameters. AFAIK, ? operator is deprecated in Dart.
I submitted a bug for fancy-syntax in polymer for this behavior (https://code.google.com/p/dart/issues/detail?id=12475) but I saw the same behavior with angular. A comment on the bug which seems to identify the cause:
"We had a similar bug long time ago in webui, the issue was that we were assigning the value of the text field to the observable variable, and then again back to the text field. This last unnecessary assignment makes the browser loose the cursor position.
(for reference, see https://github.com/dart-lang/web-ui/issues/368, and the fix: https://github.com/dart-lang/web-ui/commit/85cc2a029a9feae87716621660f40d762e8b608f)"
Angular expressions tend to fail silently, but in dart we can detect things which are clear errors.
a.b -> is fine if a is null
But
a.foo -> is an error if a is a non-null object which does not have a foo proprety and does not have [] operator.
If I have a component that has no attach method, but its supertype has, it won't get called, only after I've added attach() => super.attach();
When using $template or $templateUrl the template is loaded after the directive is instantiated and there is no way to know when the template is loaded.
Hi,
I installed Karma using the instructions at https://github.com/karma-runner/karma-dart and I can successfully launch it with the karma.conf file, and browse to http://localhost:9876/.
What is the next step to start the tests?
I am using the latest version of the Dart editor.
This does not currently exist.
Right now:
class FooComponent {
static var $map = {
'bar': '='
};
FooComponent(Scope scope) {
expect(scope.bar, isNull);
scope.$watch(() => scope.bar, (value) {
if (value != null) { // watcher will fire with a null the first time.
// use the value.
}
});
}
}
The value should be available on the scope before the component is instantiated.
Unlike two-directional binding (=) it won't require the component to maintain the original value or provide a getter for it. Unlike expression binding (&) it will pass the result of calling BoundExpression, not BoundExpression itself.
Use-case: an editor component that modifies a working copy of an object, but only reports the modifications on a specific event, e.g. successful PUT request.
Eg. <span>{{remaining()}}</span>
, if remaining
is not defined on the scope, you get:
Exception: Uncaught exception during mirrored execution: <$interpolate error! Can't interpolate: {{remaining()}}
Missing function.
ORIGINAL STACKTRACE:
#0 _relaxFnApply (package:angular/angular.dart:75:5)
#1 Parser.parse.<anonymous closure>.<anonymous closure> (package:angular/parser.dart:701:29)
#2 ParsedFn.call (package:angular/parser.dart:11:25)
#3 Interpolate.call.<anonymous closure> (package:angular/interpolate.dart:53:28)
#4 ParsedFn.call (package:angular/parser.dart:11:25)
ORIGINAL STACKTRACE:
#0 ExceptionHandler.call (package:angular/exception_handler.dart:5:5)
#1 Interpolate.call.<anonymous closure> (package:angular/interpolate.dart:64:28)
#2 ParsedFn.call (package:angular/parser.dart:11:25)
#3 _relaxFnArgs.<anonymous closure> (package:angular/angular.dart:88:16)
#4 Scope.$digest (package:angular/scope.dart:202:39)
#5 bootstrapAngular.<anonymous closure> (http://localhost:8000/demo/todo/main.dart:37:23)
>
It uses reflection now, which is scary.
class ParentComponent {
static var $visibility = DirectiveVisibility.CHILDREN;
ParentComponent(Compiler compiler, Injector injector) {
var div = new Element.html('<child></child>');
compiler([div])(injector);
}
}
class ChildComponent {
ChildComponent(ParentComponent parent);
}
throws
Cannot resolve a circular dependency! (resolving ParentComponent -> ChildComponent -> ParentComponent)
Which is this case: dart-archive/di.dart#5
-> expando on futures.
-> we need a counter to make sure we don't cancel a request somebody else is waiting for.
As a dartuser, the use of $ in variable does not look really nice, is there a good reason to keep it?
Cannot pass a function through bindings in angular. It dumps errors. James has seen the issue.
Current workaround is to use scope to pass the function.
scope['addToItemList'] = (Suggestion suggestion) {
itemListModel.add(suggestion.value);
};
e.g. class Foo { bool get bar => bad expression; }
evaluating "!foo.bar" will thrown an error:
Can't convert Closure: ([dynamic, dynamic, dynamic, dynamic, dynamic]) => dynamic
to boolean.
it should throw "Exception: bad expression".
<img src="{{src}}" title="{{title}}">
This will only bind title
.
class Some {
foo(value) {
return value;
}
}
scope['some'] = new Some();
_scope['val'] = true;
_scope['foo'] = (value) {
return value;
};
dump(parse('foo(val)').getter(scope, {}));
// this will work fine and print expected true
dump(parse('some.foo(val)').getter(_scope, {}));
// this will fail with:
Uncaught exception during mirrored execution: <Compile-time error during mirrored execution: <Object does not implement the List interface>
ORIGINAL STACKTRACE:
#0 Injector._getInstanceBySymbol (package:di/injector.dart:91:7)
#1 Injector.getBySymbol (package:di/injector.dart:143:61)
#2 NgControllerAttrDirective.attach (package:angular/directives/ng_controller.dart:28:78)
#3 Block.attach (package:angular/block.dart:253:29)
#4 bootstrapAngular.<anonymous closure> (http://localhost:8000/demo/todo/main.dart:31:46)
>, #0 _LocalClosureMirrorImpl._apply (dart:mirrors-patch/mirrors_impl.dart:291:1)
#1 _LocalClosureMirrorImpl.apply (dart:mirrors-patch/mirrors_impl.dart:268:18)
#2 Injector.invoke (package:di/injector.dart:175:24)
#3 bootstrapAngular (http://localhost:8000/demo/todo/main.dart:30:18)
#4 main (http://localhost:8000/demo/todo/main.dart:55:19)
This refers to @ngdirective(selector: 'input[type=text][ng-model]') in ng_model.dart.
Because the render method unconditionally sets the inputElement.value whenever the model is updated, any keystroke that causes the model to change causes a round-trip from DOM to model and back to DOM again. That last step, updating the DOM, causes the trouble. It becomes nearly impossible for the user to edit any part of the text field other than the end.
This could be solved by implementing render something like:
void render(value) {
// If the inputElement's value is unconditionally updated, then the cursor
// gets moved to the end of the input area, even if the value hasn't
// changed. And it's slow.
if (inputElement.value != value) {
inputElement.value = value == null ? '' : value;
}
}
is: [email protected]:mhevery/dart-di.git
should be: git://github.com/mhevery/dart-di.git
fixes:
awesome initiative, thanks!
We are debugging an issue and I think this is what we are seeing.
Right now it says:
Uncaught Error: Instance of 'HttpRequestProgressEvent'
Exception: Instance of 'HttpRequestProgressEvent' dart:async/future_impl.dart:180
_FutureImpl._scheduleUnhandledError. dart:async/future_impl.dart:180
_asyncRunCallback._asyncRunCallback dart:async/event_loop.dart:9
_asyncRunCallback._asyncRunCallback dart:async/event_loop.dart:13
Timer.Timer. dart:async-patch/timer_patch.dart:9
_timerFactoryClosure..
I'm pretty sure this used to work.
class A {
B b;
A(B this.b);
}
class B {
String c;
B(String this.c);
}
scope['a'] = new A(new B('x'));
parse('a.b.c').assign(scope, 'whatever');
Caught Uncaught exception during mirrored execution: <Class 'A' has no instance method '[]'.
NoSuchMethodError : method not found: '[]'
Receiver: Instance of 'A'
Arguments: ["b"]>
ORIGINAL STACKTRACE
e.g. it fetches a template through an async Future. The future resolves immediately and could be part of the first digest loop.
@pavelgj In block.dart attrAccessorFactory the optional argument operator "?" removal was done incorrectly in #23 since one cannot distinguish "explicitly passed null" from "did not pass an optional argument" parameter. :
attrAccessorFactory(dom.Element element, String name) {
return ([String value]) {
if (value != null) {
if (value == null) { // THIS CODE IS NOW DEAD
element.removeAttribute(name);
} else {
element.setAttribute(name, value);
}
return value;
} else {
return element.getAttribute(name);
}
};
}
In a Google+ thread I saw this suggestion for handling similar problem with a special default value:
class Nothing() { const Nothing(); }
class List {
List([n = const Nothing()]) { if(identical(n, const Nothing()) { ... } else { ... } }
}
Just like in a HashMap or a Set, ng-repeat should use equals in addition to hashCode (if hashCode is equal) to determine if two objects are truly equal.
<my-shape
g-tooltip="{{ctrl.tooltip}}"
@ngdirective(
selector: '[g-tooltip]',
map: const {'.': '=.tooltip'}
)
class GTooltipAttrDirective {
set tooltip(value) {
// value is the literal "{{ctrl.tooltip}}"
}
The behavior works correctly in angular.js
We keep breaking the demo with API changes in Angular.dart.
Right now MockHttp is in test directory. Need to move it to lib so that it can be used externally.
A way to run something after $digest()
It would be nice to use the parser in a command-line app.
The demo is still broken, now the components work but ng-bind and ng-repeat dont.
Exception: No top-level getter or setter 'Directives' declared.
NoSuchMethodError : method not found: 'Directives'
Receiver: top-level
Arguments: [...]
Here is a screenshot
https://lh4.googleusercontent.com/-OE2u7DoYHig/Ubqv9gu4YfI/AAAAAAAAWSM/A6vTf3Cs6Bg/w774-h598-no/Screenshot-127.0.0.1%253A3030-home-d2m-dart-angular.dart-demo-web-index.html+-+Chromium-1.png
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.