learn/tools_and_testing/client-side_javascript_frameworks partial update content (#651)

1 files changed, 50 insertions, 0 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index 89c677beac..3b64985649 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -114,6 +114,56 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
  <dd>最後的最後，我們將提供鑽研 Vue 所需的資源，以及有用的資訊。</dd>
 </dl>
 
+<h2 id="Svelte_tutorials">Svelte 教學</h2>
+
+<div class="notecard note">
+<p><strong>Note</strong>: Svelte tutorials last tested in August 2020, with Svelte 3.24.1.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Svelte app code as it should be after each article, in our <a href="https://github.com/opensas/mdn-svelte-tutorial">mdn-svelte-tutorial</a> repo. For a running live version, see our Svelte REPL at <a class="external external-icon" href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2" rel="noopener">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Getting started with Svelte</a></dt>
+ <dd>In this article we'll provide a quick introduction to the <a class="external external-icon" href="https://svelte.dev/" rel="noopener">Svelte framework</a>. We will see how Svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far. Then we will learn how to setup our development environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Starting our Svelte Todo list app</a></dt>
+ <dd>Now that we have a basic understanding of how things work in Svelte, we can start building our example app: a todo list. In this article we will first have a look at the desired functionality of our app, then we'll create a <code>Todos.svelte</code> component and put static markup and styles in place, leaving everything ready to start developing our To-Do list app features, which we'll go on to in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Dynamic behavior in Svelte: working with variables and props</a></dt>
+ <dd>Now that we have our markup and styles ready we can start developing the required features for our Svelte To-Do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Componentizing our Svelte app</a></dt>
+ <dd>The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. Advanced Svelte: Reactivity, lifecycle, accessibility</a></dt>
+ <dd>In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. To avoid common pitfalls, we'll have to dig a little deeper into Svelte's reactivity system. We'll also look at solving some accessibility focus issues, and more besides.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Working with Svelte stores</a></dt>
+ <dd>In this article we will show another way to handle state management in Svelte — <a class="external external-icon" href="https://svelte.dev/tutorial/writable-stores" rel="noopener">Stores</a>. Stores are global data repositories that hold values. Components can subscribe to stores and receive notifications when their values change.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. TypeScript support in Svelte</a></dt>
+ <dd>We will now learn how to use TypeScript in Svelte applications. First we'll learn what TypeScript is and what benefits it can bring us. Then we'll see how to configure our project to work with TypeScript files. Finally we will go over our app and see what modifications we have to make to fully take advantage of TypeScript features.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. Deployment and next steps</a></dt>
+ <dd>In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey.</dd>
+</dl>
+
+<h2 id="angular_tutorials">Angular 教學</h2>
+
+<div class="notecard note">
+<p><strong>Note</strong>: Angular tutorials last tested in April 2021, with Angular CLI (NG) 11.2.5.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Angular app code at <a href="https://github.com/kapunahelewong/angular-to-do-example/tree/main/src">angular-to-do-example</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">1. Angular 新手入門</a></dt>
+ <dd>In this article we look at what Angular has to offer, install the prerequisites and set up a sample app, and look at Angular's basic architecture.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">2. Beginning our Angular todo list app</a></dt>
+ <dd>At this point, we are ready to start creating our to-do list application using Angular. The finished application will display a list of to-do items and includes editing, deleting, and adding features. In this article you will get to know your application structure, and work up to displaying a basic list of to-do items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">3. Styling our Angular app</a></dt>
+ <dd>Now that we've got our basic application structure set up and started displaying something useful, let's switch gears and spend an article looking at how Angular handles styling of applications.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">4. Creating an item component</a></dt>
+ <dd>Components provide a way for you to organize your application. This article walks you through creating a component to handle the individual items in the list, and adding check, edit, and delete functionality. the Angular event model is covered here.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">5. Filtering our to-do items</a></dt>
+ <dd>Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">6. Building Angular applications and further resources</a></dt>
+ <dd>This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.</dd>
+</dl>
+
 <h2 id="該選什麼框架？">該選什麼框架？</h2>
 
 <p>我們在最初發布的文章集，主要介紹了 React/ReactDOM、Ember、Vue。之所以選中這三個框架是因為：</p>