Geekly Articles each Day
📜 ⬆️ ⬇️

Amazing Angular

Awesome angular



From translators


Hello everyone, with you Maxim Ivanov and Dmitry Sergienkov , and today we will talk about news in the world of Angular. We have prepared for you the most interesting materials and selected a list of questions that you should like. We only note that if you wait for the answer to the question “What is Angular Better than Other Technologies?” From this article, you will have to be upset, we will not have an answer to it. Why? As a rule, all opinions of the form "Technology X is better than technology Y" are almost always no more than a reflection of the point of view expressed. However, for those who are just starting to learn this framework, we will try to explain what this technology gives you and what benefits it brings. Also, do not pass by and respond to the survey; the most popular answers will be sent to Igor Minar (the leading developer of the Angular team). Well, let's get started.



Contents :


  1. Angular
    1.1. What does Angular give you?
    1.2. Angular-RU - Russian-speaking community
    1.3. Angular Russia Meetups
    1.4. Angular + StackBlitz
    1.5. Angular 6: coming soon


  2. Angular digest
    2.1. Official resources
    2.2. News in twitter
    2.3. Communities
    2.4. Server rendering
    2.5. Cheatsheet (cheat list)
    2.6. UI libraries
    2.7. Important features
    2.8. Angular cli
    2.9. Dev tools
    2.10. Starter kit
    2.11. Webpack starters
    2.12. Angular universal
    2.13. Publications
    2.14. Video lessons
    2.15. Style guides
    2.16. Angular Connect conference
    2.17. Books
    2.18. Courses and trainings
    2.19. Selection of articles
    2.20. Integration
    2.21. Component Selection
    2.22. Pipe
    2.23. Data strictures
    2.24. Routing
    2.25. Validation
    2.26. Logging
    2.27. i18n
    2.28. Performance
    2.29. Lazy loading
    2.30. Loaders
    2.31. Application examples
    2.32. Generators
    2.33. Documentation Tools
    2.34. TodoMVC
    2.35. Extensions for IDE's
    2.36. TypeScript
    2.37. Dart
    2.38. Babel
    2.39. ES5
    2.40. Ionic
    2.41. Meteor
    2.42. NativeScript
    2.43. React native
    2.44. Haxe
    2.45. C #
    2.46. Java
    2.47. Kotlin
    2.48. Scala
    2.49. Bit
    2.50. Security
    2.51. Ngrx




Angular


Angular is a platform for developing mobile and desktop web applications.

Current Angular version:

npm version


Current Browser support for Angular:

Sauce Test Status


Brad Green (Brad Green, Angular Platform Engineering Director at Google): "By platform, I mean that we created a structure supported by a collection of a huge number of libraries, tools and services that create a complete and scalable development infrastructure."



Brad has been working at Google for almost 12 years, he has worked in many places, but most of all he is proud of the fact that he has worked with Steve Jobs for almost 5 years. Even here, talking about Angular, we can remember the old Jobs and honor his memory.




1.1. What does Angular give you?


Angular allows you to create large and complex applications in terms of business logic from the “box”. Angular was a complete rethinking of AngularJS, it was probably the most painful, but it was worth it, the framework itself became much cleaner and more flexible, more enterprise-like and, from this point of view, has high scalability.


What advantages can be identified :



To remain honest, it is worth highlighting the disadvantages :



In fact, all these disadvantages are leveled by the developer’s own experience. Everything you need to learn in Angular to develop productive and fast-running applications of any level of complexity is described in the following concepts below:




1.2. Angular-RU - Russian-speaking community




Evolving community


Angular-RU Angular-RU Angular-RU


Most recently, our community was officially added to angular.io . Now we are trying with all our might to develop it, and you can take part in it. You can join our telegram chat (there you can also find out information about various Angular streams that we have), or simply send us your pull-request (s) or developments and become a member of the Angular-RU developer community.



Current list of community developments


List of starters :



List of npm packages :




1.3. Angular Russia Meetups


Angular-RU Angular-RU



Already 2 years in Moscow, held Angular mitapy. This year we plan to hold the first meeting in St. Petersburg (information will soon appear, which you can also follow in the AngularPiter chat). If you have ideas, or you want to make a presentation, you can send your applications. Also, if in your city there are already held mitaps, but we are not aware of this, you can write us an Issue about this, so that we add you.



1.4. Angular + StackBlitz


The most remarkable news worth noting from the Angular team of developers is that they transferred all the working examples in the documentation to the modern online IDE StackBlitz. That is, now your projects that you run locally on yourself are identical to the examples from the documentation.


If earlier they were all on SystemJS and worked in Plunker, now all you have to do is go to the official site of StackBlitz and launch the application on Angular or Ionic with one button. All this works right in the browser, right there you can install npm-packages and write your own code in TypeScript.


But that's not all. The most amazing thing is that now you can run any GitHub repository with Angular-based application directly on StackBlitz.



How it works? You just need to write the following in the address bar:


stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

or so:


 .../github/{GH_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH|COMMIT}

Now it opens the way to new opportunities and makes it easier for us to collaborate on development. Thank you for the Angular team.



1.5. Angular 6


Now we will talk about what awaits us in Angular 6. In fact, there are a lot of things waiting for us, and this is wonderful. Angular 6-beta is already available, and now you can test a new version on some of your applications (as part of this, you can start a new issue on the official angular tracker in case something is not working and you know how to play it ). Many also wonder what the Angular team is busy with, what is their Roadmap? Now you can track it, a special resource hq.angular.io has appeared for us, the team’s tasks are sorted by priorities.


New render engine


Most likely, for backward compatibility, we will have to enable the flag in order for our applications to work on the new Ivy render engine. However, it is worth noting that this is fantastic news. Application performance and performance (based on synthetic tests) was better than the latest version of Vue. And the size of the application has decreased by 90%.






Remember that trolling about Angular 2 (when many started to switch from AngularJS to Angular 2), when our applications weighed 1MB and when Webpack 2 fell with incomprehensible errors? These times are almost over. Yes, in fact, Angular 2 was raw at the time, but due to burning deadlines and deadlines, the Angular team released the framework as it is. But now we understand that with each new version it is getting better and better. Of course, our framework does not develop by leaps and bounds, but it is well on its way and for this it is necessary to respect them and put stars on the githaba.


New compiler - ABC


Google is currently working on a new Bazel build system , the build system itself will also be with a built-in compiler for our projects. In fact, when your project grows heavily, (in the case when it consists of 1000 modules, the webpack assembly system starts to slow down very much, and this is noticeable: the webpack just runs out of RAM). Many believe that because of this, the Angular team has still not turned on —aot mode for incremental build. Of course, if you are developing small projects, this is not a problem for you, but, in principle, you can always use anything to build projects (Rollup, Webpack, ..). Angular, of course, does not bind to anything. However, your task is to stick to and live in harmony with the Angular CLI (and then it doesn't matter to you what's under the hood).


Now it is known, according to the statement of the Angular team, that building projects with Bazel takes 2 seconds in an incremental build, and your applications will weigh only a few kilobytes due to the built-in Rollup and Uglify2. But for now it is known (from the latest commits) that we are waiting for the next version of Webpack 4, and the use of Bazel is not yet accurate, and so far only plans.


Why the Angular team came to the conclusion that it’s time to use Bazel’s own build tool and a lot of interesting things you can see here . It describes the complex cases faced by the Angular team, tells about the asymptotic complexity of building large projects and a lot of things in terms of performance.



Angular elements



Angular Elements is a project whose essence is the ability to compile Angular components in Custom Elements. This is one of the long-awaited features that will allow you to write reusable components not only in the Angular ecosystem, but also to use them in projects for React, Vue, Ember, and so on. In fact, the future is for Web-components, due to their native use. This will allow you to basically get rid of the Angular ecosystem (where this is not required).


An example you can see here . The component written on the Angular was compiled, which together with the Angular core in the sum (without additional manipulations of compression, minification, etc.) results in a total of 44kb.


 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ng Elements Test</title> <script type="module" src="/hello-world.js"></script> </head> <body> <hello-world name="World"></hello-world> </body> </html>



There are already a bunch of examples where Angular components are used in React or Preact. But most importantly, it is now possible. However, there is still a lot of work ahead. There are many questions that need to be resolved. In addition about Angular Elements you can read here .


Angular CLI update


 $ ng update

Now you no longer need to worry about updating your application, since starting with Angular CLI 1.7+, the ability to automatically update dependencies will be added, and all the rest will be automatically refactored outdated functionality.


That is, if you previously wrote:


 this.http.get(url).map(data => /* do something with data */);

Angular CLI will automatically replace the outdated code with this (most likely again with the flag turned on):


 this.http.get(url).pipe( map(data => /* do something with data */) );


Angular digest



Official resources




News in twitter


This list is good because thanks to it, you will be aware of the main events.

Angular Team (experts from the Angular team)


Google Developer Experts


Other well-known experts:


Community:


Mitapas:


This list is far from complete ...



Communities







Server rendering





Cheatsheet (cheat list)





UI libraries


Material design





Important features


Components


The component controls how the view is displayed on the screen; it is based on the default Shadow DOM (to create encapsulated visual behavior). As a rule, components are used to create a simple widget in the user interface, while at the same time they can be a set of even simpler components within themselves (to increase abstraction and create simple functional widgets within an application).


 @Component({ selector: 'html-name-element' }) export class MyComponent { // ... }

Templates


A template is your html markup in which you can describe your interactions with the DOM based on the data model and events of your component class (in the example, the MyComponent controller).


 @Component({ templateUrl: './my.component.html' }) export class MyComponent { public title: string = "Hello world"; // .. } 

 <!-- my.component.html --> <p> : {{ title }},  : {{ this.title }} </p>

Change detection


Each component has its own change detector, which guarantees checking the data bindings defined by the template.


Dependency injection


Dependency injection (eng. Dependency Injection) is a composition of structural design patterns, in which one, conditionally independent object (service) is responsible for each application function, which may have to use other objects (dependencies) known to it by interfaces. Dependencies are transferred (implemented) to the service at the time of its creation.


 // logger.service.ts @Injectable() export class LoggerService { // .. public get trace() { return console.debug.bind(console); } } 

 // my-component.component.ts @Component({ /* .. */ }) export class MyComponent { constructor(private logger: LoggerService) { logger.trace('Init MyComponent'); } }

Directives


Directives allow you to directly access the DOM of your elements. They are of two types: structural and attribute.


Attribute directive:


 @Directive({ selector: '[bold]' }) export class BoldDirective { constructor(private elementRef: ElementRef){ this.elementRef.nativeElement.style.fontWeight = "bold"; } }

Here the "ElementRef" service is implemented. It represents a link to the element to which the directive will apply:


 <!-- my-component.component.html --> <p bold>Hello world</p>

Structural directives:


Structural directives modify the structure of the DOM by adding or removing html elements. There are at least three built-in structure directives: ngIf, ngSwitch and ngFor.


 @Component({ /* ... */ }) export class AppComponent { // .. public items = ["Apple iPhone", "Huawei Mate", "Samsung Galaxy"]; } 

 <!-- my-component.component.html --> <ul> <li *ngFor="let item of items">{{item}}</li> </ul>

Pipe


Pipe (pipe) is a special handler that allows you to format the displayed values


 // my-component.component.ts @Component({ /* .. */ }) export class MyComponent { public fields = [ { id: 1 }, { id: 2 } ]; } 

 <!-- my-component.component.html -->   : <pre> {{ fields | json }} </pre>

In addition to the standard, you can write your own


 @Pipe({ name: 'factorial' }) export class FactorialPipe implements PipeTransform { transform(value: number, args?: any): number { if (value <= 0) return 0; let result = 1; for (let i = 1; i <= value; i++) { result = result * i; } return result; } } 

 // my-component.component.ts @Component({ /* .. */ }) export class MyComponent { public x = 5; } 

 <!-- my-component.component.html -->   {{ x }}  {{ x | factorial }} <!--   5  120 -->

Web Workers


Angular Web Worker support is designed to simplify parallelization in your application. When your application starts up, Angular does all the basic work of processing your logic in separate threads, the kernel performs the calculation in its workflow, while other functions may not be executed in threads.


HTTP


The most common way to get data from web services is through the HttpClient service available to embed dependencies in your components. Angular HttpClient is pretty simple. All we need to do is call the get method and pass it the url. This get method returns an Observable object. This class is part of the rxjs library, which is used in many places in Angular.


 // rest.service.ts @Injectable() export class RestService { constructor(private httpClient: HttpClient) {} public getByObservable(url: string): Observable<any> { return this.httpClient.get(url); } public getByPromise(url: string): Promise<any> { return this.httpClient.get(url).toPromise(); } }

Like a promise (Promise), the observer (Observable) does not immediately contain values. Instead, it has a subscribe method (subscribe), where we can register a callback. This callback is called as soon as the result is available. In addition to the promise, Observable can return more than one value. You can reclaim the flow of results. But it does not matter in this case. In our case, Observable returns only one value.


 // my-component.component.ts @Component({ /* .. */ }) export class MyComponent { constructor(private rest: RestService) {} // Observable classic examples public getFields() { this.rest.getByObservable('http://anyurl.com').subscibe(value =>{ // value -  }, error => { // error -   }); } // Promise classic examples public async getAsyncField() { try { // value -  const value = await this.rest.getByPromise('http://anyurl.com'); } catch (error) { // error -   } } }

Routing



Testing



Ahead-of-Time compilation





Angular cli


Angular CLI - tool for rapid application development on Angular




Dev tools





Starter kit





Webpack starters





Angular universal


Universal (isomorphic) - Angular application rendering on the server side

Universal (core resources)



main sources





Publications





Video lessons





Style guides





Angular Connect conference





Books





Online training





Selection of articles





Integration





Component Selection





(pipes)





















i18n





Performance
















Generators









TodoMVC





IDE's





TypeScript


TypeScript JavaScript , .

TypeScript JavaScript, JavaScript.


TypeScript ( )







Dart


Dart — , Google. Dart / JavaScript. Dart — , , -, .





Babel


Babel – JS , ES5.

Babel ( )



Angular Online Playground





Babel





ES5


ECMAScript , ,


angular-es5-starter-kit Angular ES5




Ionic


Ionic — SDK .


Ionic ( )





Meteor


Meteor — - JavaScript, Web- .

Meteor ( )







NativeScript


iOS, Android JS (TS) + CSS. NativeScript — .

NativeScript ( )







React Native


React Native — iOS- Android-.


React Native ( )





Haxe


Haxe — , , , . Haxe , , : , , , (xml, zip). Haxe - API Adobe Flash, C++, PHP . , Haxe, ActionScript 3, JavaScript, Java, C#, C++, Python, Lua, PHP, Apache CGI, Node.js





Scala


Scala — , , - . Scala «» Java C#.






C #


C# — - . Microsoft .NET Framework.




Java


Java — - , Sun Microsystems ( Oracle). Java -, , Java-






Kotlin


Kotlin — , JVM JetBrains. JavaScript LLVM.




Bit


, , . Bit.




NgRx





Security



:



Angular — , , , . , . . , , Issues- , pull-request(). Telegram . Angular, . , , , , . Angular, Angular, Angular. , .

Source: https://habr.com/ru/post/348818/

More articles:


All Articles