Engenho &amp; Engenhocas

Do Angular 1 para o Angular 2

Para ler

Razões para actualizar

Renderização do lado do servidor

O Angular 2 está dividido em duas partes, uma camada de aplicação e uma camada de renderização, o que permite executar Angular noutros ambientes além de navegadores web.

Templates mais robustas

Há uma nova sintaxe analisável estaticamente, há directrizes que desaparecem e há melhor integração com componentes web e outros elementos.

Melhor desempenho

Detecção de alterações mais rápida, pré-compilação das templates e o bootstrap mais rápido são algumas das melhorias que fazem a framework mais rápida.

O que muda

Componentes

Tudo é uma componente, até a própria aplicação.

Inputs/Outputs

Propriedades e eventos dos elementos

Content Projection

Trata-se da nova transclusão, mas mais alinhado com o padrão das componentes web.

Dependency Injection

Cada componente tem o seu injector.

Outras coisas vão mudar no Angular 2 como routing, forms e a camada Http.

Actualização para Angular 2

Este processo compreende duas fases: preparação e actualização.

Preparação

Considera a estrutura da aplicação, as ferramentas ou a actualização da linguagem.

Actualização

Executar ambas as frameworks lado a lado. É aqui que entra em acção o ngUpgrade para tornar as componentes das versões 1 e 2 interoperáveis.

Actualizar com ngUpgrade

Este módulo actua como um adaptador, o que abstrai a existêcnia de duas frameworks a correr em simultâneo. Quatro coisas têm de interoperar.

Dependency Injection

Componentes de Angular 1 a usar serviços do Angular 2 e vice-versa

Component Nesting

Componentes de Angular 2 a usar directivas de Angular 1 e vice-versa.

Content Projection

Componentes Angular 1 transcluem componentes Angular 2 e vice-versa.

Change Detection

Intercalação entre Scope Digest (A1) e Change Detectors (A2)

Exemplo aplicado a bootstrap

import {UpgradeAdapter} from 'angular2/upgrade';

var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);

adapter.bootstrap(document.body, ['myApp']);

Todo o processo detalhado e em actualização no artigo original por Pascal Precht.

fonte: thoughtram Blog

Carreira Imagem

Na hora de despedir

Para ler

Cloud Colaboração Social conversação social Ferramenta Vídeo

E-mail colaborativo pela IBM

Para ler

Analítica Big Data Cloud Imagem

Analítica comportamental na cloud

Para ler

Carreira Vídeo

Empresas exemplo para desenvolver a carreira

Para ler

Cloud Estratégia IoT

CE aposta em IoT e Cloud

Para ler

Estratégia

Mercado Único Digital em 2017

Para ler

Carreira Estratégia

Tendências para 2016

Para ler

Cloud Imagem

Serviços da nuvem para oferecer

Para ler

Desenvolvimento Imagem

Frontend + Backend

Para ler

AngularJS Desenvolvimento TypeScript Web

Angular 2 & TypeScript

Para ler

Pré-requisitos

Instalação AngularJS 2
Instalação TypeScript

Código AngularJS 2

Componentes

As componentes são os blocos principais para construção de uma app em AngularJs 2:

AngularJS 1	AngularJS 2
App.js	Componente de topo
Directiva	Componente
Controller e view	Componente
Directiva com controller	Componente

Implementação de uma componente

app.ts


import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';

class Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'my-app',
    template: '<div>
 <label>name: </label>
 <input [(ng-model)]="hero.name" placeholder="name">
        </div>',
    directives: [FORM_DIRECTIVES]
})

class LittleComponent {
    public title = 'Tour of Heroes';
    public hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

bootstrap(LittleComponent);

Para definir uma componente AngularJS 2 é necessário criar uma classe (TypeScript) e decorá-la (TypeScript) com a anotação @Component. A classe contém a lógica enquanto a anotação define a componente AngularJS 2.

Selector

Indica como a componente vai ser activada no HTML

<my-app></my-app>

Template

O HTML que vai ser inserido na componente. Pode ser URL;

Directives

Array das componentes a usar. FORM_DIRECTIVES componentes nativas.

[(ng-model)]

Two-way data binding. Binding hero.name - input;

Typed language

Instanciação da classe Hero.

Dependency Injection

import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';

Com TypeScript há autocomplete enquanto se escreve dentro do 'import { '.

Templating

Bootstrap

bootstrap(LittleComponent);

Código HTML

index.html


<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Outro exemplo disponível aqui.

fonte: Creating your first Angular 2 app

AngularJS Desenvolvimento Framework Imagem Node.js Web

Node.js vs AngularJS

Para ler

Estratégia Framework Imagem Projecto Vídeo

Gestão da mudança

Para ler

Cloud Estratégia

HP aposta na cloud privada

Para ler

Agile Desenvolvimento Projecto Vídeo

Metodologias ágeis e documentação

Para ler

Big Data Vídeo

O que é Big Data?

Para ler

Carreira Vídeo

Fazer a diferença nas TI

Para ler

Impressão 3D Vídeo

Ténis em impressoras 3D

Para ler

Carreira Cloud Estratégia Vídeo

O desafio do desenvolvimento com os serviços da Cloud

Para ler

Desenvolvimento Framework Imagem Nancy

Nancy e o conteúdo multiparte

Para ler

O que é a Nancy?

Nancy é uma framework leve para .Net que pode ser uma alternativa interessante à framework ASP.Net MVC.

Limitação

A Nancy não processa pedidos PUT ou POST do tipo multipart out of the box, i.e., não lhe é intrínseco.

Solução

Vamos assumir que se pretende processar um verbo POST do protocolo HTTP com e pelo menos um ficheiro anexo. O content-type deste pedido será multipart/form-data: JSON e dados binários.
Para já, o model binding da Nancy suporta apenas pedidos com content-type application/JSON ou application/XML.

No entanto, esta framework disponibliza a classe HttpMultipart que trata de partir o corpo do pedido em várias partes e detectar os content-type respectivos. Apresenta-se de seguida código para exemplificar:

public class IndexModule : NancyModule
{
    public IndexModule()
    {
        Get["/"] = parameters =>
        {
            return "Demo module";
        };

        Post["/"] = parameters =>
        {
            try
            {
                var contentTypeRegex = new Regex("^multipart/form-data;\\s*boundary=(.*)$", RegexOptions.IgnoreCase);
                System.IO.Stream bodyStream = null;

                if (contentTypeRegex.IsMatch(this.Request.Headers.ContentType))
                {
                    var boundary = contentTypeRegex.Match(this.Request.Headers.ContentType).Groups[1].Value;
                    var multipart = new HttpMultipart(this.Request.Body, boundary);
                    bodyStream = multipart.GetBoundaries().First(b => b.ContentType.Equals("application/json")).Value;
                }
                else
                {
                    // Regular model binding goes here.
                    bodyStream = this.Request.Body;
                }

                var jsonBody = new System.IO.StreamReader(bodyStream).ReadToEnd();

                Console.WriteLine("Got request!");
                Console.WriteLine("Body: {0}", jsonBody);
                this.Request.Files.ToList().ForEach(f => Console.WriteLine("File: {0} {1}", f.Name, f.ContentType));

                return HttpStatusCode.OK;
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error!!!!!! {0}", ex.Message);
                return HttpStatusCode.InternalServerError;
            }
        };
    }
}

Em primeiro lugar verifica-se se o conteúdo é do tipo multipart/form-data através da expressão regular

"^multipart/form-data"

Em seguida extrai-se o elemento boundary que separa as partes contíguas, encontrado pela expressão regular

"\\s*boundary=(.*)"

e passa-se-lo para o objecto HttpMultipart bem como o corpo do pedido

var multipart = new HttpMultipart(this.Request.Body, boundary);

e com este objecto obtém-se, então, o conteúdo JSON

bodyStream = multipart.GetBoundaries().First(b => b.ContentType.Equals("application/json")).Value;

e obtém-se, também, o ficheiro através da propriedade Request.Files

this.Request.Files.ToList().ForEach(f => Console.WriteLine("File: {0} {1}", f.Name, f.ContentType));

fonte: Applandeo Software

conversação social

O verdadeiro anti-facebook

Para ler

Agile Continuous Delivery DevOps Ferramenta IDE Visual Studio

DevOps pela Microsoft

Para ler

AngularJS Framework Web

AngularJS: Service vs Factory

Para ler

Qual a diferença?

.service() é um método do módulo que recebe um nome e uma função que define o serviço.

app.service('myService', function () {
  this.sayHello = function () {
    console.log('Que lindo dia!');
  };
});

.factory() é um método do módulo que recebe um nome e uma função que define a factory.

app.factory('myFactory', function () {
  return {
    sayHello: function () {
      console.log('Lindo dia realmente.');
    };
  }
});

Então, qual é a diferença?
Como se pode verificar, ao invés de se trabalhar com this na factory, é retornado um objecto. Porquê? Porque um serviço é um construtor e a factory não.

Quando usar um e outro?

A escolha mais acertada é optar pela adopção de serviços sempre que possível no que toca à migração para , visto que o serviço é um constructor e a factory não. Optar por um constructor em permite usar classes ao migrar para .
Pode pegar-se, por exemplo, no código acima e reescrevê-lo desta forma em ES6:

class MyServiceClass {
  sayHello() {
    console.log('Que lindo dia!');
  }
}

app.service('MyService', MyServiceClass);

Na verdade, uma classe é um construtor em . Com uma factory tal não é possível, uma vez que é invocada como uma função.

Aqui está disponível um bom artigo sobre o uso de ES6 em AngularJS.

Mais informação sobre a versão do JavaScript em ES6js.com.

fonte: Blogue thoughtram