Angular 8 boot up (1) ,Interpolation

 Angular 8 boot up (1), Interpolation

https://github.com/jalbertomr/Angular8Bootup.git


    Let's do a fast upgrade of knowledge about the latest version of Angular.
https://angular.io/docs
The very first is install Angular 8, and we use the usefull npm (package manager of installations), the way these are installer are constantly updated, so better refer to the home page.

 For this work we intent to follow the work of Mr. Vishwas, a fast and comprehensive guidance. https://www.youtube.com/watch?v=0eWrpsCLMJQ&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ

On terminal in this case inside WebStrom run the command to create de app structure.



D:\WebstormProjects\Angular>ng new Angular8-Bootup
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

Structure Created

D:\WebstormProjects\Angular>cd Angular8-Bootup

To start It
D:\WebstormProjects\Angular\Angular8-Bootup>ng serve -o
10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html

 or

D:\WebstormProjects\Angular\Angular8-Bootup>npm start

And Display the predefined app

app.component.ts

Index.html

create a new component called "miComponente"

D:\WebstormProjects\Angular\Angular8-Bootup>ng g c miComponente
CREATE src/app/mi-componente/mi-componente.component.html (28 bytes)
CREATE src/app/mi-componente/mi-componente.component.spec.ts (671 bytes)
CREATE src/app/mi-componente/mi-componente.component.ts (296 bytes)
CREATE src/app/mi-componente/mi-componente.component.css (0 bytes)
UPDATE src/app/app.module.ts (422 bytes)

D:\WebstormProjects\Angular\Angular8-Bootup>

look at "miComponente" structure. the component recently created.

ts - The typeSrcipt of the component

 html - part of the component.

index.html of the app.

Modify the app.component.html to add mi-componente, with selector <app-mi-componente>, and remove the half down part of the original html, just to clean a little the screen.

We rerun, we get the new aspect with mi-componente integrated.

For demostrative purpouses we modify the metadata of the component to modify in the same file the
template (html) and style (css) of the component. generally they are pointed to the html and css files of the component.

The component can be inserted used as:

   - html custom tag.
   - class.
   - attribute.

Used as html custom tag

 Used as class

 Used as attribute.

 Can be modified the template, (view, html) directly inline.

Also accept many lines.

Changing the metadata of styles directly, without a reference to an external file o url.

Interpolation

with interpolation we bing a class variable ( data in a model ) with a place on the html (view ).

eot

Review Functional Programming Java8 Java11

 Review Functional Programming Java8 Java11

https://github.com/jalbertomr/functionalProgramingJava11.git



   On 2014 was delivered a presentation on youtube by IntelliJ with Venkat Subramaniam, https://www.youtube.com/watch?v=Ee5t_EGjv0A&t=573s
, on that was discussed temes like method references, lambda expressions on streams and more.
it was made over java8, Now this is reproducen with java11, to see what change are necessary to made, in this case, only one change was made on Predicate<Integer> isDivisible , on his use in commit marked as
Declarative immutability .range(...).noneMatch(...) isPrime, .test to call Functional Interface on java11

original
    .noneMatch( index -> isDivisible(index))
new
    .noneMatch( index -> isDivisible.test(index))

That's because in the version of java 11 includes the test method., this was the unique change needed for the moment on this exercises.

Excercises

1. Traditional for loop




Output:
false
true
true
false

2. The same, now using Stream, the output is the same.




Output:
false
true
true
false

3. Using a Predicate

Output:
false
true
true
false

4. For vs Stream


Output:
with for : 8
with stream: 8

5.  With out the .get() returns Optional[] which could be Empty value.


Output:
with for : 8
with stream: Optional[8]

6. Using Method References instead of lambda expressions in the stream.


7. Stream show Lazy optimization


Output:
isGreatherThan3 1
isGreatherThan3 2
isGreatherThan3 3
isGreatherThan3 5
isEven 5
isGreatherThan3 4
isEven 4
doubleIt 4
with stream: Optional[8]

8. LAZY optimization don´t do nothing at all until it's required by one … 
   In this case the last instruction on the stream "findFirst" is omitted.

Output:
with stream:

9. Replacing method references with lambdas

Output:
with stream:
isGreatherThan3 1
isGreatherThan3 2
isGreatherThan3 3
isGreatherThan3 5
isEven 5
isGreatherThan3 4
isEven 4
doubleIt 4
Optional[8]

10. Replacing static functions on main class with function into function … 


Output:
with stream:
isEven 5
isEven 4
doubleIt 4
Optional[8]

11.  Generalizing Predicate with Function to receive a parameter 



Output:
with stream:
isEven 5
isEven 4
doubleIt 4
Optional[8]

12.  totalValues sum all values without filter or Selector



Output:
55

13. Dependency Inyection (Strategy Pattern) with OOP composite


Output:
suma todos: 55
suma even: 30

14. Dependency Inyection (Strategy Pattern) with Function composition, Predicate.
 
Output:
suma todos: 55
suma even: 30

15. Pure functions, then can do Referential transparency takes 6sec using stream.

Output:
42

16. Pure functions, then can do Referential transparency takes less than 2 sec using parallelStream.
 
Output:
42

So apparently change from java8 to java11 on functional programming does not represent at the moment a great change on code or implementation. Rest to see the other possible changes that could appear.


eot