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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...