Home Web Front-end JS Tutorial Detailed interpretation of the new features of Angular5.1

Detailed interpretation of the new features of Angular5.1

Jun 19, 2018 pm 02:39 PM
new function

This article mainly introduces the new features of Angular5.1 and related usage. Friends who need it can refer to it.

This article introduces the new features of Angular5.1 to share with you in detail the improvements and additions of 5.1. The following is the full content:

New features

Angular Material and CDK stable version

Support Service Worker in CLI

Improved support for Universal and AppShell in CLI

Improved error messages for decorators

Support for TypeScript 2.5

For a complete list of features and bug fixes, please See the changelog for Angular, Material and CLI.

Angular Material and CDK Stable

After releasing 11 alpha versions, 12 beta versions, and 3 release candidates, we are excited to now mark 5.0 for Angular Material and Angular CDK .0 stable version. Based on Google's Material Design visual design language, Angular Material provides 30 UI components for your Angular applications. Combined with Angular CDK, Angular CDK (Component Development Kit) provides a set of building blocks that help you build your own custom components without having to solve common problems again. These components are already used in production by many Google applications, including the Google Analytics suite, the Google Cloud Platform Developer Console, and Google Shopping Express.

Starting from this version, Angular Material will follow the same semantic philosophy as Angular, and the main version of Angular Material and Angular CDK will be released as the main version of other platforms at the same time. Bug fix releases will be made in weekly iterations, while minor releases will be released as features are completed.

Visit matrial.angular.io for documentation, demos, and our getting started guide. You can also follow our progress on Github as we continue to add more classes to the framework. In the coming months, keep an eye out for things like new mat-tree, virtual scrolling, component test suites, and drag-and-drop functionality.

Service Worker support for CLI1.6

Performance has always been an important goal for web developers, and in today's LAN WIFI and mobile network events, performance has always been an important goal. Modern browsers have a new API for building reliable and fast-loading sites called the Service Worker API.

Angular 5.0.0 comes with a new Service Worker implementation customized for Angular applications, and Angular CLI 1.6 includes support for building applications that take advantage of this new feature. Using @angular/service-worker can improve the loading performance of your application in browsers that support this API, and make the loading experience of your application more like a native app.

CLI1.6 Improved Universal and App Shell support

In addition, with the release of Angular CLI1.6, it is better to add Universal to your existing projects through Schematics and provide App Shell provides support.

Angular Universal

To add Universal to your current CLI project, you can use the following command in your project directory:

npm generate universal <name>
Copy after login

Replace with the name you want to give your application. This will take your adopted application and create a common module and automatically configure your angular-cli.json file for you. You can then skip to step 4 in our guide to using Universal.

To build your Universal app, just run the following command:

ng build --app=<name>
Copy after login

App Shell

An additional added feature is support for App Shell . Now you can generate and build an application shell that uses Universal to build a static first render for your application in your index.html page. This gives the user a better experience when your application is launching.

First, make sure there is a RouterModule module imported in the NgModule in your application, and there is a in the module of your application component. App Shell uses routing to render your app.

Run the following command:

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]
Copy after login

Add support for all shells for the main application to your angular-cli.json file by passing the app-shell parameter. If the Universal application does not pass, a Universal application will be created the first time Universal Schematic is run. Routing parameters specify the routing configuration generated during application build. (App Shell requires routing support). The default is /shell.

After completing this step, just use ng build to build the application normally, and the index.html file will contain automatically rendered routes.

Improved decorator error messages

The diagnostics produced by the compiler have been significantly improved, especially when decorators contain unsupported or incorrect expressions formula time.

For example: calling a function to process a template is not supported.

@Component({
 template: genTemplate()
})
Copy after login

This is an error that would previously occur:

Error encountered resolving symbol values statically. Calling function ‘genTemplate&#39;, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts
Copy after login

This error has been improved and the source and nature of the problem clarified.

component.ts(9,16): Error during template compile of &#39;MyComponent&#39;.
 Function calls are not supported in decorators but &#39;genTemplate&#39; was called.
Copy after login

Support for TypeScript 2.5

We have added support for TypeScript 2.5, which is recommended by all developers. This version of TypeScript includes several useful advanced features.

You can upgrade your Typescript by yarn add typescript@'~2.5.3' or npm install typescript@'~2.5.3'.

This update is optional, TypeScript 2.4 continues to support Angular 5.X. We do not yet support TypeScript 2.6. Our plan is to add support in a future minor release.

Important note:If your code uses injector.get(Token) and Token has static members, then you will encounter TypeScript problems and the returned type is {} Instead of Token. You can use Injector.get(Token) to get the desired return value.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Related usage of js array reduce

How to use the replace function in javascript

How to implement the audio playback function using JavaScript

How to implement the copy function using js code

How to implement js using tangram.js library Class

How to implement delayed loading of non-first-screen images in JS

How to prevent repeated rendering using React

How to implement directive function in vue

The above is the detailed content of Detailed interpretation of the new features of Angular5.1. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

iPadOS18 new features iPadOS18 new features Jun 12, 2024 pm 10:41 PM

Early this morning, Apple officially released iPadOS18. This system not only has the classic functions of iOS18, but also adds some unique functions, such as supporting mathematical note calculators, etc., which further improves the experience of iPad users. Friends who are interested Come and take a look. This time iPadOS18 not only perfectly inherits the core functions of iOS18, such as the personalized control center design, which allows users to freely adjust the order and layout of control items according to personal preferences, and the highly anticipated game mode, providing gamers with smoother and more The immersive gaming experience also incorporates a number of unique features specifically targeting the iPad’s large screen advantages and the creative uses of Apple Pencil, further expanding the iPad’s productivity.

Microsoft Edge browser's new feature 'Super Drag” is now available! Microsoft Edge browser's new feature 'Super Drag” is now available! Mar 04, 2024 pm 06:31 PM

The editor recently learned that the new feature of Microsoft Edge browser "Super Drag" has been launched, unlocking the fourth way to open links in new tabs, making it easier for users to open links faster. Currently, in the Microsoft Edge browser, if users want to open a link or image in a new tab, there are three ways: 1. Right-click the link or image, and then select the corresponding operation option. 2. Drag the link or image to the tab bar. 3. Use the mouse wheel to click on the link or image. "Super Drag" brings a fourth kind of interaction, where users click on a link, part of text, or image and then drag it sideways, up, or down a little to open it in a new tab. After the user drags the text, the default search engine of the Edge browser will be called by default and a new tab will be opened.

WeChat launches new feature: 'Quiet Mode” WeChat launches new feature: 'Quiet Mode” Mar 04, 2024 pm 01:43 PM

It is understood that WeChat has launched a new feature: "Quiet Mode". After turning it on, WeChat will no longer make sounds in all scenarios such as message notifications, audio and video calls, and video account content playback. Update to the latest version of WeChat on iOS and turn it on through "WeChat" - "Me" - "Settings" - "Care Mode" - "Quiet Mode". After that, WeChat will no longer make sounds in all scenarios such as message notifications, audio and video calls, and video account content playback. WeChat said the feature was developed to meet the needs of those who cannot hear. For most people, sound may be very common and accessible, but they often ignore that the deaf community does not have this perception ability, although they also use mobile phones and WeChat like everyone else. according to

iOS18 new features revealed iOS18 new features revealed Mar 06, 2024 pm 02:25 PM

As Apple is about to release iOS 18, its major annual software update, this will undoubtedly become one of the hot and highly anticipated releases in 2024. According to rumors, this update will be regarded as one of the largest software upgrades in the history of the iPhone. Here is a brief summary of the relevant function upgrades. New iOS 18 feature revelations 1. It is reported that Apple may integrate the visionOS style into iOS 18. , giving people a refreshing operating experience. 2. According to rumors, the company is actively testing AI models and is expected to make major improvements to Siri on the iOS18 version. 3. In addition, Apple has recently launched a pilot program and launched a new tool called "Ask" to AppleCare, aiming to improve the efficiency of customer inquiries. 4

Windows 11 details new features Windows 11 details new features Dec 23, 2023 pm 03:37 PM

The new win11 operating system has brought many new functions and features to users, which are very novel, easy to use and powerful. Today we will bring you a detailed introduction to the new features of win11. If you are not sure, come here for details. Let’s find out. What are the new features of win11: 1. The new design of Win11 makes the UI look simple and beautiful, and more modern. 2. Microsoft said that the start menu and application icons in the center of the taskbar can allow users to find what they need more quickly. 3. The update package of Win11 is 40% less than that of Win10 on average, which means it saves more power and runs faster. 4. The speed of the built-in Edge browser has also been improved. On Win11, multiple task arrangement methods have been added.

Win11 preview version of Paint application update adds new hidden background, copy visible layers, etc. Win11 preview version of Paint application update adds new hidden background, copy visible layers, etc. Apr 11, 2024 pm 07:10 PM

In addition to Windows updates, Microsoft has also started pushing the latest Paint application update to Canary and Dev channels today, with version number 11.2402.32.0. This update improves brush sizes in Paint, adding new size sliders for the Pencil, Brush, and Eraser tools. In addition, Microsoft has further improved the layer functionality, such as adding a new background option in the layers panel, which allows users to set the background color of the canvas. As shown in the picture, you can open the layers panel and click the "Background" tile at the bottom, or use the Ctrl+Shift+B shortcut key. The color picker dialog box will be called up, and then you can select Make any color you like

Introduction to the latest features of win10 version 1903 Introduction to the latest features of win10 version 1903 Jan 01, 2024 pm 01:33 PM

After Microsoft once again launched a new version of win101903, friends must be curious to know what new features Microsoft has launched in this update. As far as the editor knows, in addition to fixing bugs and functional defects in the previous version, this update also adds new content such as built-in apps that can be uninstalled, acrylic effect LightTheme, black and white mixed backgrounds, etc. New features of win10 latest version 1903 1. Built-in applications can be uninstalled. The win10 system has various built-in applications. Now win101903 can uninstall some of the built-in applications. Uninstallation is limited to general applications. As for Edge and the App Store, it cannot be uninstalled. After all, it will involve many underlying functions of Win10. 2. LightTh with acrylic effect

An in-depth analysis of the new features of PHP8 and its improvement in development efficiency An in-depth analysis of the new features of PHP8 and its improvement in development efficiency Jan 13, 2024 am 11:33 AM

In-depth analysis of the new features of PHP8 to improve development efficiency! PHP8 is the latest version of the PHP programming language, officially released on November 26, 2020. This version brings many exciting new features and improvements that can greatly improve development efficiency. In this article, we’ll take a deep dive into some of PHP8’s new features and provide concrete code examples. 1. JIT compiler PHP8 introduces the JIT (Just-In-Time) compiler, which can compile some popular code blocks in real time, thereby improving

See all articles