FAQ Database Discussion Community


Difference between angular.dev.js and angular.sfx.dev.js

angular2
Can anyone explain the difference between these two files in the angular 2 alpha release on https://code.angularjs.org/2.0.0-alpha.20. From looking at the source code, it seems that in sfx.dev.js the global.System object is overwritten, having the 'import' and 'config' functions removed....

Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript

angularjs,typescript,angular2
I am going through the step by step tutorial on angular.io (Angular 2). I am using typescript. I get the following error when trying to compile: Cannot find external module 'angular2/angular2' using the watch command. main.ts import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ template: '<h1>My first...

AngularJS 2.0 Directives and its attributes

angularjs,typescript,angular2
I have a simple app that fetches data from sample API. Trying to figure out whats wrong when defining a directive as a component: app.ts import {Component, View, bootstrap, For} from 'angular2/angular2'; import {ArticlesSvc} from 'services/articlesSvc'; import {ArticleItem} from 'directives/ArticleItem'; @Component({ selector: 'main-app', injectables: [ArticlesSvc] }) @View({ template: `<p *for="#post...

Working with Angular 2

javascript,angularjs,angular2
Our team is way too excited with the alpha release of Angular 2 and we're just eagerly waiting for it's stable release and getting started with it. But during the ng-conf 2015 on Angular 2 by Misko, we came across following things which made me confused TypeScript! Is it really...

Parent and Ancestor annotation in ts

angularjs,typescript,angular2
Trying to add the Parent and Ancestor annotations to TypeScript typings so I did: declare module "angular2/src/core/annotations_impl/visibility"{ function Parent():(target: any) => any; function Ancestor():(target: any) => any; } Using either of the annotations throws "TypeError: decorator is not a function". I am using alpha 22. Why do I get this...

DI in angular 2

typescript,angular2
I m actually studying the angular DI container and I need some informations. In fact, reading the API, it seems that the Injector class accepts a Binding list in the factory arguments, and resolve it to acquire a ResolvedBinding list. NB : https://angular.io/docs/js/latest/api/di/ I was wondering how the system is...

Angular 2 No provider error

javascript,angularjs,angular2
I am creating simple starter app to play with angular 2 and i am trying to make a todo service and inject him to my component and i get this error: No provider for TodoService! (TodoList -> TodoService) TodoService.ts export class TodoService { todos: Array<Object> constructor() { this.todos = [];...

Angular 2/Typescript: require not found

typescript,gulp,angular2
I am trying to get the angular 2 example running with a gulp typescript compiler. The gulp-script compiles import {Component, View, bootstrap} from 'angular2/angular2'; to var angular2_1 = require("angular2/angular2") which does not run in the browser. What is wrong with this? As far as I know, this kind of implementation...

TypeScript Definition manager error on query

typescript,angular2,angularjs-2.0,tsd
Following the Angular 2 5 minutes quickstart, I wanted to install Angular 2 definitions (for TypeScript compiler and my IDE) provided by DefinitelyTyped using their package manager, tsd. So I typed this command on a terminal tsd query angular2 --action install And all I got is the following error >>...

What is the correct way to bind child to model shared by parent?

angular2,typescript1.5
I have an Angular 2 (alpha 26) app in the works. I'm trying to arrange into sensible components and sub-components but having trouble with binding. I have a Singleton model (let's call it AppModel) which I'm injecting successfully from my App component into the constructor of my first subcomponent (ItemBrowser)....

How angular2 is going to use shadow dom while it's not supported in some popular browsers?

web-component,shadow-dom,angular2
From the documentations: When a component is instantiated, Angular creates a shadow DOM for the component. loads the selected template into the shadow DOM. creates a child Injector which is configured with the appInjector for the Component. But, as far as I know, shadow DOM is not supported yet in...

ng-switch in Angular2

typescript,angular2,ng-switch
I am playing around with angular 2 (currently with version alpha 26). ng-for and ng-if for example are working fine. I do however have problems with ng-switch. I just can't get it to work, i.e. nothing is printed. It seems as if the whole template is ignored. This is the...

Injectables not working in angular 2.0

angular2,typescript1.5,angularjs-2.0
I recently started playing with angular2. I've been trying to get injectables to work for about half a day now, but I still can't figure out what I'm doing wrong. To keep it as simple as possible, I copied code from "5 Min Quickstart" in the official webpage. Demo itself...

Injectables in Angular2

angularjs,typescript,angular2
I am playing around with Angular2. As a basis, I used the quickstart project from the angular.io page. Everything seems to work fine, but as soon as I try to inject a service (ItemService) into my AppComponent I get following exception: Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: Cannot resolve...

How to get component properties from main component in Angular2?

angular2
been scratching my head like crazy over this. Basically all I want is in my index.html something like: <app hero="iron man"></app> in my main index.html file, then be able to read the value of hero in my component class. Been at this for a week, to no avail. Here's my...

Cannot read property 'split' of undefined

angularjs,annotations,typescript,components,angular2
I have the following code running on my local server. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="https://jspm.io/[email protected]"></script> <script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script> </head> <body> <my-app></my-app> <script> System.config({ paths: { '*': '*.js', 'angular2/*': 'angular2/*' } }); System.import('main'); </script> </body> </html> The above is the...

Angular2 - Bootstrap v3 datetimepicker issue in FF and IE

web,bootstrap,bootstrap-datetimepicker,angular2
I am rather new to clientside web development and am currently learning how to work with Typescript, Angular2(0.27) and bootstrap. I know that Angular2 is still in heavy development, but I ran into an issue, of which I am not sure what (technology) exactly is causing it. The problem has...

Writing the most basic Unit test in Angular 2?

javascript,unit-testing,karma-runner,ecmascript-6,angular2
Problem: As soon as I import Angular 2 into a file none of my tests execute. Question: How can I set up my karma config to support angular two so my test pass properly? OR Question: How can I set up any testing framework with angular2 written in es6? Git...

angular2 quickstart ReferenceError: angular is not defined new angular.Component({

angular2
I'm starting to take a look at angular2, but with this simple code <html> <head> <script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script> <script> function AppComponent() {} AppComponent.annotations = [ new angular.Component({ selector: 'my-app' }), new angular.View({ template: '<h1>My first Angular 2 App</h1>' }) ]; document.addEventListener('DOMContentLoaded', function() { angular.bootstrap(AppComponent); }); </script> </head> <body>...

Angular 2 router examples + @RouteConfig typing support

angularjs,typescript,angular2
I am trying to find a concrete example on how to use the router in Angular 2. Furthermore the current angular2.d.ts typing file from the 5 min quickstart does not support @RouteConfig annotation. Thanks!...

Angular2 example in ChromeApp using ChromeDevEngine missing require?

angularjs,google-chrome-app,angular2
I am trying to get the angular2 demo code to run in Chrome Dev Engine. I followed the example exactly and get the following error. Uncaught ReferenceError: require is not defined main.js:4 Uncaught TypeError: Cannot read property 'Component' of undefined However when I put the exact same code anywhere else...

Angular2 build process (npm install) failing on 'gulp pubget.dart'

angularjs,angular2
Following the build steps, when I run npm install, I end up with this error: module.js:340 throw err; ^ Error: Cannot find module 'object-assign' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (/Users/bearfriend/Sites/angular2/node_modules/gulp/node_modules/gulp-util/lib/PluginError.js:5:20) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load...

Using Angular 2 with older browsers thanks to TypeScript?

javascript,internet-explorer-8,internet-explorer-7,typescript,angular2
Since the Angular 2 team is using Typescript for it's build, would it be a feasible assumption that they could compile a version of Angular 2 that would work on older browsers? Thoughts?

How to update the view after changing the model in Angular2

javascript,typescript,angular2
How do I let angular2 propagate the changes i did to the model. In angularjs 1.x this would be really easy, but i cannot seem to get it working in angular2. I know the entire change detection system and view propagation is changed entirely. Somehow, i need to inform angular...

Karma testing with typescript and angular 2 is throwing Typeerror for “System.config”

javascript,unit-testing,typescript,karma-jasmine,angular2
I'm super new to testing, I'm using angular 2 as a new beginning to learning. ERRROR: INFO [Chrome 42.0.2311 (Mac OS X 10.9.3)]: Connected on socket xo5ufjmFKLGc5QSuAAAB with id 34336816 WARN [web-server]: 404: /base/jspm_packages/es6-module-loader.js ERROR [karma]: Uncaught TypeError: System.config is not a function at http://localhost:9876/base/js/angular.js?4c894ae47e8d04bb01965dbf22fa08aed20f0eb2:25575 ERROR [karma]: Uncaught ReferenceError: require...

Module '“angular2/angular2”' has no exported member 'For'

angularjs,typescript,angular2,typescript1.5
hi I am following the tutorial on the official Angular2 website. https://angular.io/docs/js/latest/guide/displaying-data.html Here is my ts file /// <reference path="typings/angular2/angular2.d.ts" /> import {Component, View, bootstrap, For} from 'angular2/angular2'; @Component({ selector: 'display' }) @View({ template: '<p>name: {{myName}}</p>' + '<p>Friends:</p>' + '<ul>'+ '<li *for="#name of names">'+ '{{name}}'+ '<li>'+ '<ul>', directives: [For] })...

Angular 2 - Substitute for $scope.$apply?

javascript,angular2
$scope.$apply will no longer be part of Angular 2. Then how do we let Angular know to update the DOM if any of the bound properties have been changed outside the regular angular execution context? Taken from a blog post by Minko Gechev: No more $scope.$apply But how then AngularJS...

How to use jQuery with Angular2?

jquery,angularjs,angular2
can anyone tell me, how to use jQuery with Angular2? class MyComponent { constructor() { // how to query the DOM element from here? } } I'm aware there are workarounds like manipulating the class or id of the DOM element upfront, but I'm hoping for a cleaner way of...

Binding to a component property in angular2

javascript,ecmascript-6,angular2
I'd like to reference a property on a component within A. that' component's constructor B. that component's template. The apis on this seem to be shifting a little bit, but i'd expect the following to work: <my-component [greeting]="hello"></my-component> // my component.es6.js @Component({ selector: 'my-component', properties: { 'greeting': 'greeting' } })...

Is it a good idea to use both Angular 1.x and 2.0 in the same application during migration?

javascript,angularjs,angular2
There is no questioning that Angular v2.0 is on the way and TypeScript will be the writing language of choice for Angular apps (Microsoft and Google collaborating on TypeScript Language). Because Angular 2 breaks compatibility with previous versions, for current project that use v1.x, is it a good idea to,...

Is the Angular 2 @Component syntax part of ES6?

angularjs,typescript,ecmascript-6,angular2
Can anyone tell me. The '@' symbol in front of the imported Component function. Is that ES6 syntax? I've not seen it used on any other non-angular ES6 projects I've looked at. import {Component from ...} @Component({}) Here is a example...

Angular 2 alpha 22, How to pass down a value to a component through attributes?

javascript,angular2
I declared a component with a selector 'app' then I used it like follow: <app title="Awesome Title"></app> in the template I wrote this: The title passed {{ title }} I did add write the Component annotation: @Component({ selector: 'app', properties: {title:'title'} // also tried ['title'] }); But nothing shows up,...

ng-class in Angular2

typescript,angular2,typescript1.5
I am developing a test application in angular 2 and I'm stuck with a problem of adding classes based on list from model. In Angular 1 one could do: // model $scope.myClasses = ['class1', 'class2', ...]; // view ... ng-class="myClasses" ... In Angular 2, all I have been able to...

Angular 2 di container

javascript,dependency-injection,typescript,angular2
I m actually studying Angular 2 and I was wondering how does the team do to handle dependency injection in their component ? Explanation It seems that Ng2 is based on ES7 decorator through TypeScript. In fact, class decorator is "launch" (I mean, the code of the decorator) is only...

Angular2 Hidden Ignores

javascript,angular2
I am trying to use the Hidden property in Angular2 and when I include a style that alters the display of the DIV, the hidden property is ignored. When the code below is run, both divs are displayed. When I remove the class .displayInline the first DIV is hidden and...

Why isn't my property being updated inside the “Scope”?

angularjs,firebase,ecmascript-6,angular2
I am starting to venture into AngularJS2 for a hobby project and have run into something I don't know how to debug or search for yet. I started out using the ng2-play repository. I have two simple classes (this code is drastically simplified for this post): words-ui.js export class WordsUI...

Angular2 two-way data binding

data-binding,2-way-object-databinding,angular2
I know Angular2 doesn't have two-way data binding but is there a way to mimick the two-way data binding behavior from Angular1.x?