Angular4.0.0發佈總覽文章

来源:http://www.cnblogs.com/yitim/archive/2017/04/07/angular-4-release.html
-Advertisement-
Play Games

翻譯自angular.io上的關於4.0.0版本發佈的文章,內容主要是介紹了4.0.0版本下的改進以及接下來還會有的其他更新,4.0.0其實已經出來好多天了,截止目前都已經到了4.0.1版本了,這也是前兩日筆者一時興起拿想ng2寫個自己的新網站時安裝angular時無意發現幾個模板與組件聲明時的錯誤 ...


翻譯自angular.io上的關於4.0.0版本發佈的文章,內容主要是介紹了4.0.0版本下的改進以及接下來還會有的其他更新,4.0.0其實已經出來好多天了,截止目前都已經到了4.0.1版本了,這也是前兩日筆者一時興起拿想ng2寫個自己的新網站時安裝angular時無意發現幾個模板與組件聲明時的錯誤提示變得極其精準,一看發現angular版本居然都到4.x了並且依賴里提示還要多安裝一個@angular/animation的包。看來谷歌沒有食言,真的可以追趕iphone的更新腳步了。

 

angular 4.0.0 現在可用了
angular 4.0.0 版本現在已經悄悄的完成可用了。這是依據announced adoption of Semantic Versioning文章發佈的一個主要版本,並且向下相容絕大多數基於2.x.x版本的應用。
我們很激動的來社區分享這一發佈,它包含了一些主要的提升與我們過去三個月工作完成的功能。我們致力於確保開發者能很容易的更新到這一發佈版本。

 

什麼是新的


更小&更快
這一版本我們履行了我們的諾言來讓angular應用更小且更快。絕不是說現在我們已經做到了,但你會看到我們將在接下來幾個月做出更遠的提升。


視圖引擎
我們更改了AOT方式下的代碼。這些更改減少了約60%生成的組件的代碼的量。你的組件越複雜,節省的代碼也就越多。
在接下來的補充時期,我們聽到了很多遷移到4版本的開發者反饋說他們的產品最後壓縮減少了數百kb的量。
你可以在Design Doc中查看更多關於視圖引擎的內容。


動畫包
我們現在將動畫移出@angular/core到了單獨的包中。這意味著如果你不使用動畫,這一額外的代碼就不會被綁定到你最終的產品代碼中。
這一更改同時允許你更容易的查找文檔來收益於自動補全功能。你可以通過引入@angular/platform-browser/animations中的BrowserAnimationsModule來添加自己的動畫到你的主NgModule中。


新特性


改進*ngIf和*ngFor
我們的模板綁定語法現在有了兩個有用的改動。你現在可以使用if/else風格的語法,並且在展示一個可觀察變數時分配給本地變數。
<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user">
</user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>


angular Universal
Universal工程允許開發者運行angular在一個伺服器上,現在也更新到最新了,並且這是從Universal本本後的第一次發佈,最初只是一個社區驅動的項目,現在被angular團隊採用了。這一發佈現在包含了Universal團隊這幾個月來內在的與外在的成果。主要的Universal代碼現在被放在@angular/platform-server中。
為了學習更多Angular Universal的內容,可以查看新的@angular/platform-server中的 renderModuleFactory 方法,或者Rob Wormald的Demo Repository。更多的文檔與代碼示例即將到來。


TS2.1與TS2.2相容
我們更新了angular到更新的TS版本,這將會強化ngc的速度,你可以得到更強的類型檢查支持。


模板的SourceMap
現在,當有因為你的模板代碼造成的錯誤時,我們將會生成source map來給出有意義的原始模板上下文錯誤。

 

包更改


Flat ES Module(Flat ESM/FESM)
我們現在裝載我們的模塊的扁平版本(在example file查看我們代碼在EcmaScript模塊格式下的rolledup版本)。這一格式能幫助搖樹優化,幫助減少你生成的壓縮代碼的大小,並且加快構建,編譯與在瀏覽器中確定場景的速度。
在 "The cost of small modules"中查看更多關於Flat ES Modules的改進。


實驗性的ES2015構建
我們同樣裝載我們的包在ES2015 Flat ESM 格式下。這一選項還是實驗性的且可選的。開發者反饋壓縮大小節省了超過7%。想要嘗試這些新的包,你可以配置你的構建工具鏈來配置package.json中的es2015屬性來替換原有的module屬性


實驗性的閉包相容
我們的全部代碼現在都有了閉包的註釋,來幫助進行進一步的閉包優化,以得到更小的壓縮代碼以及更優的搖樹優化。

更新到4.0.0


更新到4很簡單,差不多就像是將你的angular依賴更新到最新版本,並且做兩個檢查如果你想要動畫功能的話。這在大多數情況下都有效:


Linux/Mac下:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
Windows下:
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

然後運行你常用的ng serve或者 npm start指令,一切都將很順利。
如果你依賴於動畫,引入@angular/platform-browser/animations中的BrowserAnimationsModule到你的根模塊中。如果不這麼做,你的代碼也會運行,但是動畫將報錯。從@angular/core引入動畫已經棄用了,你需要從@angular/animations中引入{ trigger, state, style, transition, animate }這些東西。

我們正在生產Angular Update Guide如果你想要查看更多你的應用需要做出的改變的話。



已知問題


4版本的一個目標是確保angular相容TS的strictNullChecks設定,允許更嚴格的類型約束的子集。我們發現在RC時期這會做更多的工作來確保這能在所有使用場景下起作用,所以我們有意讓4版本不相容strictNullChecks設定,來避免急切採用這一TS模式而破壞了app,併在4.1版本時會適當的支持。(tracking issue is #15432)



下一步做什麼
我們正致力於接下來六個月的路線圖,依據我們在2.x版本時的 published release schedule。你將會看到我們已經開始了4.0版本來給4.0.0版本做補丁。我們將繼續使angular更小且更快,並且我們將實驗性的進化比如@angular/http, @angular/service-worker以及@angular/language-service這些模塊的能力。

你同樣應該保持關註我們的文檔,包括CLI的穩定版本,以及包庫作者的導覽。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這些數組的操作方法會改變原來的數組。在使用 Vue 或者 Angular 等框架的時候會非常實用,使用這些方法修改數組會觸發視圖的更新。 ...
  • 原文鏈接:http://caibaojian.com/mobile web app fix.html 寫一個好的web app初始化樣式很重要,以下為之前的flexible.js中項目的同個樣式。 ...
  • 前些天公司要求在微信移動端做上傳圖片並預覽的功能,要求能夠調用攝像頭拍照並立即預覽。 在網上搜了一些方法,開始自己寫了個簡單的功能實現代碼。結果發現移動端拍照出來的圖片動不動就2M+,又因為要批量上傳,為用戶的流量和上傳速度考慮,我決定做一下優化,看能不能在預覽前就壓縮一下圖片尺寸。 結果又是一陣百 ...
  • 1. rem為單位時,根元素html的font-size 必須>=12px,否則 預設為font-size:12px。 再另外,有許多朋友問我:為啥 html 設置成 62.5%,或者 10px 時,這種換算無效了呢?經過研究發現,不知道什麼時候開始,小於 12px 或者 75% 的字體大小 rem ...
  • HTML:超文本標記語言(HyperText Markup Language),不是一種編程語言,是標記語言 HTML元素: <p>段落</p> HTML標簽: <p>段落</p> HTML聲明:<!DOCTYPE>並不是標簽 HTML5:<!DOCTYPE html> HTML4.0.1 stri ...
  • 安裝 直接下載CDN 引用 <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script> npm npm install vuex --save 在一個模塊化的打包系統中,您必須顯式地通過Vue.us ...
  • 1、安裝前準備 安裝 webpack 之前,需要安裝 node,這時最新的是 6,npm 是 4。如果有老的 node 項目在跑建議安裝下 nvm。 2、建議安裝在局部,即在項目下的 node_modules 里 比如在 webpack_demo 目錄下新建了一個 w1 項目,先用 npm init ...
  • 本人的博客寫了grunt的小教程,從零開始,一步一步的通過例子講解,希望喜歡的同學給我的github上加顆星,謝謝! github地址: https://github.com/manlili/grunt_learn grunt入門:點擊我學習 grunt配置:點擊我學習 grunt創建任務:點擊我學 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...