搜尋

首頁 >web前端 >js教程 >將您的應用程序升級到Angular 1.5組件及以後！

將您的應用程序升級到Angular 1.5組件及以後！

Christopher Nolan
Christopher Nolan原創
2025-02-18 11:37:10270瀏覽

將您的應用程序升級到Angular 1.5組件及以後！

>本文由Dan Prince和Michaela Lehr進行了同行評審。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態！ >隨著AngularJS的每個新版本，開發團隊都試圖彌合AngularJs 1.x和2之間的差距。隨著AngularJS 1.5的釋放，開發人員將能夠在結構上編寫類似於AngularJS 2.0。

的應用程序。 在本教程中，我們將在AngularJS 1.4中創建一個網格指令。然後，我們將逐步升級到1.5，然後查看如何將其轉換為使用2.0版。

鑰匙要點

從AngularJS 1.4開始：首先在AngularJs 1.4中創建一個簡單的網格指令以顯示JSON數組，並利用Bootstrap進行佈局設計。

升級到AngularJS 1.5：通過更換腳本參考並利用新組件指令助手方法，將您的AngularJS 1.4指令轉換為1.5，這簡化了配置並準備將來升級。 AngularJS 1.5中的組件優點：AngularJs 1.5中的組件提供句法糖，而不是指令，提供默認配置和簡化的方法，這對於過渡到AngularJS 2.0。
    >過渡到AngularJS 2.0：由於其與1.x版本的架構差異，需要從划痕開始時從頭開始時從頭開始，需要其他庫和新的設置。
  • > 使用AngularJs 2.0組件：使用Typescript在AngularJS 2.0中實現組件，可增強代碼的可維護性和可檢驗性，並承認AngularJS 2.0是基於組件的，並且支持高級功能，例如層次依賴性注入和動態載荷。
  • 入門
  • >讓我們從創建一個稱為AngularMigrateApp的項目目錄。在此文件夾中，創建一個稱為index.html的HTML頁面。 這是頁面的外觀：
    • 以及角框架，我們還將利用引導程序設計指令佈局。我們直接從CDN中加入了這兩個文件。
    • 創建網格指令

>讓我們創建一個簡單的網格指令以顯示JSON數組。我們將首先創建一個AngularJS模塊。

>我們定義了一個名為“僱員”的常數，該常數包含一個示例數據的數組。然後，我們將此數組注入homectrl，並在控制器的範圍上提供。 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
>讓我們創建一個稱為MyGrid的指令，我們將使用該指令顯示上述JSON數組。

我們想通過標籤名稱使用該指令，例如：

>

>因此，我們將添加限制選項以指定：
angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
>

接下來，我們要將員工數據從視圖傳遞到指令。因此，我們將其添加為綁定：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

>現在，我們可以將員工數據作為屬性傳遞給指令：>

最後但並非最不重要的一點是，我們需要一個HTML模板來顯示數據：> 
angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>

>在index.html的主體中添加以下HTML模板腳本。 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>
>您在上面的代碼中看到，我們正在迭代信息屬性，並在員工列表中顯示每個項目。

>讓我們在index.html內使用myGrid指令。添加以下代碼：
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span>
</span>

>我們已經指定了HOMECTRL控制器，並在內部使用了我們的指令。將更改保存並瀏覽到index.html頁面。這是行動中數據網格的演示：

>

>請參閱codepen上的sitepoint（@sitepoint）的筆Angularjs 1.4演示。 
<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E'
</span>    <span>}
</span><span>})
</span>

>升級到1.5

到目前為止，我們已經使用1.4版創建了一個AngularJS指令，並且運行良好。現在，讓我們嘗試使用AngularJS 1.5使用相同的代碼，看看是否有任何事情破裂。

>讓我們用1.5版的CDN鏈接替換現有腳本引用。如果您嘗試刷新頁面，則所有內容都應該繼續正常工作。隨著1.x行的新版本，該框架正在更靠近AngularJS 2.0使用組件的工作方式，我們可以在代碼中利用它，從而使最終過渡到版本2.0更容易。 在Angularjs 1.5中，組件是指令的句法糖，可照顧默認值並具有更簡單的配置。他們應該被替換為替代品，尤其是對於那些希望將來升級的人。

與AngularJS合作時，開發人員通常傾向於使用基於控制器的方法，但這會隨著應用程序開始增長而造成許多問題。基於控制器和基於視圖的方法會導致重複的NG-Controller/View，但是基於組件的方法通過創建可以組成較大組件而無需重複代碼的組件來解決問題。 >

>讓我們嘗試使用新的組件指令方法並修改我們現有的代碼。我們將首先創建一個組件：

>與指示方法（採用函數）不同，組件方法採用對象。我們將通過不同模板中的指令中的相同對象。這是HTML模板：

這是修改的組件代碼：>

>在上述代碼中可以看到，我們傳遞了我們舊指令中的所有選項。

在index.html頁面中創建一個稱為mycomp的組件。 
<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E',
</span>        <span>scope: {
</span>            <span>info: '=info'
</span>        <span>}
</span>    <span>}
</span><span>})
</span>
>

保存更改並刷新頁面，您應該能夠看到數據未顯示，但瀏覽器控制台中也沒有錯誤。 
<span><span><span><my-grid</span> info<span>="employees"</span>></span><span><span></my-grid</span>></span>
</span>

如果我們查看官方站點的組件和指令之間的比較圖表，我們可以看到範圍始終是隔離的組件。

將您的應用程序升級到Angular 1.5組件及以後！

因此，我們需要利用綁定選項將數據綁定到控制器。不再需要限制選項，因為組件僅限於元素。

這是修改的代碼：

> 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
綁定信息將綁定到控制器。控制器的默認別名為$ ctrl，在模板中，我們將使用它來訪問信息屬性：

> 

angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
現在，如果刷新頁面，則應該能夠查看使用MyComp組件顯示的數據。

>請參閱codepen上的sitepoint（@sitepoint）的筆Angularjs 1.5演示。

>升級到2.0

注意：AngularJS 2.0仍在beta中。我們使用的版本是Angular2.0.0-Beta.8。

>讓我們用CDN中的2.0版鏈接替換我們的應用中的AngularJS的現有版本，看看是否有任何破壞：

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>
刷新頁面後，頁面上什麼也不會顯示，如果我們檢查瀏覽器控制台，我們也可以看到幾個錯誤。

>

將您的應用程序升級到Angular 1.5組件及以後！ 如您所見，我們的組件代碼與Angular 2.0！

>讓我們從非常划痕開始，看看新版本的工作原理，然後我們將嘗試移植我們的組件。

>可以通過包含單個腳本標籤的框架來開始使用Angular 1.X，但Angular 2.0的情況已更改。我們需要其他幾個庫才能運行。儘管可以通過腳本標籤分別加載它們，但可以將它們捆綁在一起，以作為生產構建過程的一部分。

>

>如果我們查看官方快速啟動指南，我們可以看到我們需要其他一些庫和開發依賴性才能開始使用2.0。

>讓我們創建一個稱為angularjs2.0component的文件夾，然後創建一個package.json文件，如下所示

上面的文件顯示了AngularJS 2.0應用程序所需的所有依賴項。保存更改並使用npm安裝所需的依賴項：

>創建一個名為app的子文件夾，並在內部創建一個名為app.component.js的文件，並具有以下代碼：
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span>
</span>

在上面的代碼中，我們正在使用Angular Core命名空間NG.CORE創建一個組件。我們已經將組件的選擇器定義為my-comp。我們使用相同的html，grid.html作為我們應用的模板。我們已經在組件的構造函數中定義了我們的員工對象。 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E'
</span>    <span>}
</span><span>})
</span>
在以下代碼中創建一個名為main.js並粘貼的文件：>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

這告訴Angular加載我們剛剛創建的組件。

下一步，創建一個名為index.html的文件在應用程序文件夾之外，然後粘貼以下代碼：>

>保存更改並使用NPM啟動開始服務器。此命令運行一個名為Lite-Server的本地開發服務器，該服務器將index.html加載在瀏覽器中。 

angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>

，但數據仍未顯示！

> 在AngularJS 2.0中，循環的語法有些不同。將grid.html中的循環部分修改為如下所示：

保存更改並重新啟動服務器，您應該能夠查看應用程序中顯示的員工數據。 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>

>將其包裹起來

>組件是AngularJS 2.0的主要組成部分，可以說它基於組件的框架是正確的。在1.x行的每個新版本中，我們都在更靠近使用2.0版的應用程序開發應用程序。 >更深入地研究遷移您的AngularJS應用程序，請考慮閱讀官方遷移指南。 Angular 2代碼也可以用打字稿和DART編寫，如果您有興趣，我建議您分別閱讀AngularJS 2的官方指南，分別是Typescript或Dart。

在下面的評論中分享您的想法和建議！

經常詢問有關升級到角度組件的問題（常見問題解答）

為什麼我要從AngularJS升級到Angular？由於其層次依賴注入和基於組件的體系結構，Angular具有更好的性能。與AngularJS不同，它還支持移動設備。 Angular使用TypeScript，它提供靜態鍵入，接口和類，使代碼更可維護和可測試。角度還改善了依賴性注入，模塊化和可檢驗性。

>從AngularJS升級到Angular時，我可能面臨什麼挑戰？ >

從AngularJS升級到Angular，由於架構的差異，可能會具有挑戰性，語言和語法。您可能會面臨將AngularJS代碼遷移到打字稿的問題，適應新的基於組件的體系結構，並學習表達式的新語法。您可能還需要重寫路由配置並調整構建過程來處理打字稿。

我可以在同一應用程序中使用AngularJs並將Angular一起使用嗎？在遷移過程中的同一應用程序中。這被稱為混合應用。您可以在應用程序中引導AngularJ和Angular，它們可以共存並相互作用。這使您可以通過組件逐步遷移應用程序，而不是進行完整的重寫。

>

> typescript在Angular中的作用是什麼？編譯到普通的JavaScript。在Angular中，Typescript提供了靜態鍵入，接口和類，這使代碼更可維護和可測試。 TypeScript還提供了使用自動完成，類型檢查和源地圖支持的更好的工具，從而改善了開發體驗。

如何基於組件的Angular架構改善性能？角度的體系結構通過實現單向數據流和變化檢測來改善性能。 Angular中的每個組件都有一個明確定義的接口，並封裝了其自身的行為和渲染。這使應用程序更容易理解，測試和維護。單向數據流確保視圖始終是模型的投影，從而簡化了編程模型並提高了性能。

>角度支持移動設備如何通過提供響應迅速的佈局和触摸支持來支持移動設備。它還為移動設備（例如懶惰加載和異步模板編譯）提供了性能優化。 Angular還支持漸進式Web應用程序（PWA），可以安裝在移動設備上並離線工作。

>

我如何測試我的角度應用程序？

Angular提供了一個稱為測試台的測試框架，哪個允許您為組件創建動態測試環境。您還可以使用茉莉（Jasmine）（行為驅動的開發框架來測試JavaScript代碼，以及測試跑步者Karma。 Angular還支持使用量角器的端到端測試。

>有哪些資源可用於學習角度？

有許多可用於學習角度的資源，包括官方的角度文檔，在線教程，在線教程，書籍和課程。 Angular社區也非常活躍和支持，有許多論壇，博客和stackoverflow問題可供參考。

以上是將您的應用程序升級到Angular 1.5組件及以後！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript typescript json bootstrap html npm angular Static Array Object if for while include try Directory Error continue restrict using Interface Namespace finally Attribute Property map JS console function default constructor this display transition issue everything Access Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：用firebase圖數據下一篇：用firebase圖數據

相關文章

看更多