What is the correct syntax for declaring a Angular 2.0 Decorator in AtScript?

How do you create Decorator directives in Angular 2.x? I’m writing against alpha version of Angular, and was trying to reproduce the functionality found in the AngularJS (1.x) directive ngClass. Below is a snippet from my attempt at my own NgClass in Angular. What I would like to do is observe the value of some expression that may contain a hash of class names to boolean expressions. As those expressions change, names would be added or removed from the classList property on the element that the decorator has been applied.

What’s wrong with this syntax? Is a Decorator not even the right template for the job, and maybe I should create a Template Directive? Even still, what’s the syntax for declaring Directives with Angular? I’ll accept answers in ES5, but I’d prefer ES6 and AtScript moreso.

For context, I was writing this as preparation for a talk I gave preview what’s going to be like to write apps with Angular 2 and beyond.

@Decorator({
  selector: '[ng-class]',
  bind: {'NgClass': 'class'},
  observe: {'ngClass': 'ngClassChanged'}
})
export class NgClass {
  constructor(element:NgElement) {
    this.element = element;
  }

  ngClassChanged(newValue) { 
    let classNames = [];
    if(newValue){
      console.log(newValue);
      this.element.className = newValue;
    }
    else {
        this.element.className = "";
    }

  }
}

Angular2: Is it slow?

Just took a look at the last angular version that the angular team launch.
Angular2 is out and they have been release a their new webpage https://angular.io.

In there they have a 5 min quickstart project that shows quickly the new syntax and what you have to use to perform a new angular application.

I just did all the steps to get it working but it took 4.93 seconds to load.

I’m just wondering, is angular 2 that slow? Or maybe I miss some steps.

Here is my code

// app.es6

import { Component, Template, bootstrap } from "angular2/angular2";

// Annotation section
@Component({
  selector: "my-app"
})
@Template({
  inline: "<h1>Hello {{ name }}</h1>"
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = "Alex!";
  }
}

bootstrap(MyAppComponent);

and index.html

<!-- index.html -->
<html>

<head>
    <title>Angular 2 Quickstart</title>
    <script src="dist/es6-shim.js"></script>
</head>

<body>

    <!-- The app component created in app.js -->
    <my-app></my-app>

    <script>
        // Rewrite the paths to load the files
          System.paths = {
            'angular2/*':'angular2/*.js', // Angular
            'rtts_assert/*': 'rtts_assert/*.js', //Runtime assertions
            'app': 'app.js' // The my-app component
          };

          // Kick off the application
          System.import('app');
    </script>
</body>

</html>

Has anybody got angular2 quickstart working?

I think I did all the steps from https://angular.io/docs/js/latest/quickstart.html and even added system.js to index.html, but sill no Hello Alice. Has anybody got it working?

Update:
Ok, when i’m trying to build it with gulp (tutorial doesn’t mention it, but looks like it’s necessary) i’m getting this:

user@edbwp400322:~/dvl/mongo/quickstart$ gulp 
[16:46:31] Using gulpfile ~/dvl/mongo/quickstart/gulpfile.js
[16:46:31] Starting 'default'...
[16:46:31] Starting 'clean'...
[16:46:31] Finished 'clean' after 25 ms
[16:46:31] Starting 'build:ng2'...
npm WARN package.json rtts_assert@2.0.0-alpha.12 No repository field.
npm WARN package.json angular2@2.0.0-alpha.12 No repository field.
npm WARN package.json angular2@2.0.0-alpha.12 No repository field.
npm WARN package.json rtts_assert@2.0.0-alpha.12 No repository field.
npm WARN package.json rtts_assert@2.0.0-alpha.12 No repository field.
[16:46:37] Finished 'build:ng2' after 6.16 s
[16:46:37] Starting 'build:shim'...
[16:46:37] Finished 'build:shim' after 21 ms
[16:46:37] Starting 'build:strip_maps'...
sed: невозможно прочитать : Нет такого файла или каталога
[16:46:37] 'build:strip_maps' errored after 49 ms
[16:46:37] Error in plugin 'gulp-shell'
Message:
    Command failed: sed: can't read: no such file or directory

Details:
    killed: false
    code: 2
    signal: null
    stdout: 
    stderr: sed: can't read: no such file or directory

[16:46:37] 'default' errored after 6.26 s
[16:46:37] Error: [object Object]
    at formatError (/opt/npm-global/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/opt/npm-global/lib/node_modules/gulp/bin/gulp.js:195:15)
    at Gulp.emit (events.js:117:20)
    at Gulp.Orchestrator._emitTaskDone (/home/user/dvl/mongo/quickstart/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
    at /home/user/dvl/mongo/quickstart/node_modules/gulp/node_modules/orchestrator/index.js:275:23
    at finish (/home/user/dvl/mongo/quickstart/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/home/user/dvl/mongo/quickstart/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
    at finish (/home/user/dvl/mongo/quickstart/node_modules/run-sequence/index.js:48:5)
    at Gulp.onError (/home/user/dvl/mongo/quickstart/node_modules/run-sequence/index.js:55:4)
    at Gulp.emit (events.js:117:20)
user@edbwp400322:~/dvl/mongo/quickstart$ 

the sed (stream editor for filtering and transforming text) is installed. But I’m still not sure it’s gulp can’t find sed or sed can’t find some file.
I realize that this update doesn’t make question more specific, but it would be nice to know that quickstart is working for somebody.

Update 2: sed woes were caused by https://github.com/angular/quickstart/blob/master/strip_maps.sh. Moving filename into ” fixes the problem.

Update 3: got it build with gulp, no more 404, but still no Hello Alice and this error in console:

Potentially unhandled rejection [3] Error loading “app” at http://127.0.0.1:8081/app.es6
http://127.0.0.1:8081/app.es6:3:1: Unexpected token @ (WARNING: non-Error used)es6-module-loader.src.js:140 (anonymous function)es6-module-loader.src.js:167 fes6-module-loader.src.js:189 i

Binding to a component property in 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'
  }
})
@View({
  template: '{{greeting}} world!'
})
class App {
  constructor() {
    console.log(this.properties) // just a guess
  }
}

Plunkr

What am I doing wrong?

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

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 (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Here are some additonal logs:

verbose stack Error: angular@2.0.0-alpha.21 postinstall: `webdriver-manager update && bower install && gulp pubget.dart && tsd reinstall --config modules/angular2/tsd.json && tsd reinstall --config
 tools/tsd.json`
329 verbose stack Exit status 8
329 verbose stack     at EventEmitter.<anonymous> (/Users/bearfriend/.nvm/v0.10.38/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
329 verbose stack     at EventEmitter.emit (events.js:98:17)
329 verbose stack     at ChildProcess.<anonymous> (/Users/bearfriend/.nvm/v0.10.38/lib/node_modules/npm/lib/utils/spawn.js:24:14)
329 verbose stack     at ChildProcess.emit (events.js:98:17)
329 verbose stack     at maybeClose (child_process.js:766:16)
329 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:833:5)
330 verbose pkgid angular@2.0.0-alpha.21
331 verbose cwd /Users/bearfriend/Sites/angular2
332 error Darwin 14.1.0
333 error argv "node" "/Users/bearfriend/.nvm/v0.10.38/bin/npm" "install"
334 error node v0.10.38
335 error npm  v2.9.0
336 error code ELIFECYCLE
337 error angular@2.0.0-alpha.21 postinstall: `webdriver-manager update && bower install && gulp pubget.dart && tsd reinstall --config modules/angular2/tsd.json && tsd reinstall --config tools/tsd.json
`
337 error Exit status 8
338 error Failed at the angular@2.0.0-alpha.21 postinstall script 'webdriver-manager update && bower install && gulp pubget.dart && tsd reinstall --config modules/angular2/tsd.json && tsd reinstall --c
onfig tools/tsd.json'.

I’m not sure what exactly I’m looking at here, so any help would be appreciated. I do not plan on doing any work with Dart, so if this can be ignored or pulled out that’d be fine, but I would like to get everything set up properly.

typescript angular2.d.ts error “Expecting new line or semicolon”

my latest WebStorm10.0.2 raise Error about "angular2.d.ts" that “Expecting new line or semicolon.” in line 15-19 and line 32-37.

Angular2 team make a mistake at the 5min start example? I can’t believe, it must be my mistake.

So:

I clone step by step follow the “5min quick start of angular2″(https://angular.io/).

I have already move ‘index.html’ and ‘app.ts’ from ‘complete’ to the Base-Path.

I have also change my WebStorm10.0.2 Compiler version to custom directory which contains typescriptService.js.

Still not work…

My typescript version is 1.5Beta.

interface List<T> extends Array<T> {
}
interface Type {}

declare module "angular2/angular2" {
  function bootstrap(appComponentType: any): void;
  function Component({
    selector,
    properties,
    hostListeners,
    injectables,
    lifecycle,
    changeDetection
    }:{
      selector:string,
      properties?:Object,
      hostListeners?:Object,
      injectables?:List<any>,
      lifecycle?:List<any>,
      changeDetection?:string
    });

  function View({
      templateUrl,
      template,
      directives,
      formatters,
      source,
      locale,
      device
    }: {
      templateUrl?: string,
      template?: string,
      directives?: List<Type>,
      formatters?: List<Type>,
      source?: List<any>,
      locale?: string,
      device?: string
    });
  function For();
  function If();
}

Angular 2 Component – Access DOM (or create Component without template, purely from JS)

Trying to play with Angular 2 here… understood that it’s still in alpha.

How do I access DOM elements from Component? Specifically, I would like to use other libraries like d3 to generate custom DOM from code. I suppose I need to create a component and somehow plug into component life-circle to alter DOM with d3… any idea where to start digging?

I’m using this quickstart repo.

Thanks!