Templating | Web Development

AngularJS Weekley Meeting тут

AngularJS 2.0 это не очередной большой релиз, это полный рефакторинг библиотеки с использованием последних стандартов ES6!

Что же нас ожидает ?

Основные направления разработки: Change Detection, Dependency Injection, Templating, Persistance, Routing, Logging, Annotations, Documentation, Benchmarking, Touch/Animations, Package Repository, Reference App, Scaffolding and Build/Deploy.

Часть данных направлений уже имею рабочие прототипы.

Change Detection

Используется Object.observe() — низкоуровневый метод API позволяющий отслеживать изменение состояния JavaScript объекта.
Более подробное описание можно прочитать тут и тут.

В отсутствие нативной поддержки данного метода (на данный момент), команда AngularJS нашла замену в использовании Watchtower.js

Исоходный код Watchtower.js

Дизайн документ тут

Dependency Injection

Данный прототип уже готов к тестированию. DI сделан с учетом стандарта ES6 и обеспечивает удобный синтаксис, декларативные аннотации и отложенные загрузки.

Ниже пример кода DI. Зависимости передаются в качестве аргументов конструктора.

import {Inject} from 'di/annotations';
import {Electricity} from '../electricity';

@Inject(Electricity)
export class Heater {
    constructor(electricity) {
        this.electricity = electricity;
    }

    on() {
        console.log('Turning on the coffee heater...');
    }

    off() {
        console.log('Turning off the coffee heater...');
    }
}

import {Inject} from 'di/annotations';

import {Electricity} from '../electricity';

@Inject(Electricity)

export class Heater {

constructor(electricity) {

this.electricity = electricity;

}

on() {

console.log('Turning on the coffee heater...');

}

off() {

console.log('Turning off the coffee heater...');

}

import {Provide} from 'di/annotations';
import {Heater} from './coffee_maker/heater';

@Provide(Heater)
export class MockHeater {
    constructor() {}

    on() {
        console.log('Turning on the MOCK heater...');
    }

    off() {}
    }
}

import {Provide} from 'di/annotations';

import {Heater} from './coffee_maker/heater';

@Provide(Heater)

export class MockHeater {

constructor() {}

on() {

console.log('Turning on the MOCK heater...');

}

off() {}

}

Чтобы уже сейчас попробовать DI,
# Clone репозиторий (или fork).
git clone https://github.com/angular/di.js.git

# устанавливаем dev dependencies, Karma, Gulp, etc.
npm install

# Если захотите использовать «karma» или «gulp»:
npm install -g karma-cli
npm install -g gulp

# Transpile ES6 в ./compiled/*
gulp build

# Детект изменений кода
gulp watch

gulp build_examples
gulp serve

Исходный код di.js
Дизайн документ тут

Continue reading “AngularJS 2.0 Preview” »