forked from ng-girls/todo-list-tutorial-portuguese
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Language corrections, making it clearer and nicer :)
- Loading branch information
Showing
3 changed files
with
73 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,15 @@ | ||
# Angular Tutorial for Beginners: Todo List | ||
# Angular Tutorial for Beginners - Creating Todo List | ||
|
||
This tutorial will take you step by step for creating your own todo list application with Angular \(2.x an above\). You will use Angular-CLI, save the list in local storage and deploy to Github Pages. | ||
This tutorial will take you step by step on how to create your own todo list application using Angular \(version 2 and above\). Through the tutorial, we'll be using the Angular-CLI, save data in the local storage and deploy the code to Github Pages. | ||
|
||
This tutorial is open source and is written by the community. Please feel free to send suggestions and pull requests. Special thanks to the members of** Angular AfterHours meetup group **for kickstarting this tutorial during the [special meetup event](http://www.meetup.com/Angular-AfterHours/events/235151422/)! | ||
This tutorial is open source and is written by the community. Please feel free to send any suggestions and pull requests. Special thanks to the members of** Angular AfterHours meetup group **for kickstarting this tutorial during a [special meetup event](http://www.meetup.com/Angular-AfterHours/events/235151422/)! | ||
|
||
The tutorial is used in the [ngGirls](http://ng-girls.org) workshops. You are welcome to use it in your workshop. We'd love to hear about it - write us: [info@ng-girls.org](/mailto:info@ng-girls.org). | ||
The tutorial is used in the [ngGirls](http://ng-girls.org) workshops. You are welcome to use it as your own workshop and we'd love to hear about it! - write us to: [info@ng-girls.org](/mailto:info@ng-girls.org). | ||
|
||
![](/assets/ngGirls banner transparent.png) | ||
|
||
![](/assets/slogen.png) | ||
|
||
|
||
**About the lead author:** Shmuela Jacobs is a senior front-end developer and consultant mastering Angular. During her academic studies \(M.Sc. in Information Management Engineering and B.Sc. in Physics\) she has combined her passions of coding and teaching as a software developer, teaching assistant, science museum guide, and researcher. Today she continues to enjoy these activities as a full-time front end developer, sharing her knowledge and experience in meetups and conferences. Shmuela is the founder of ngGirls and the organizer of Angular AfterHours meetup group. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,81 +1,108 @@ | ||
# Installation | ||
|
||
Every developer needs a set of tools and libraries to start working. In our case, we'll install all the tools, and Angular-CLI will take care of installing the libraries we'll need at this point. | ||
Every developer needs a set of tools and libraries before start working. In our case, we'll install all necessary tools together and once we have our Angular-CLI installed, it will take care of additional libraries we'll need for current and future projects. | ||
|
||
## Tools | ||
|
||
### Browser | ||
|
||
Our first tool is the **browser**. We'll use it to see the result of our work and debug it. We recommend [Google Chrome](https://www.google.com/chrome/browser/desktop/) - it has great developer tools. [Firefox](https://www.mozilla.org/en-US/firefox/new/) is also awesome. If you don't already have one of those, just follow the link and the instructions to download the browser you choose. | ||
Our first tool is the **browser**. We'll use it to see the result of our work and debug it. We recommend [Google Chrome](https://www.google.com/chrome/browser/desktop/) - it has great developer tools. [Firefox](https://www.mozilla.org/en-US/firefox/new/) is also awesome. If you don't already have one of those, just click the relevant link and follow the instructions to download and install the browser you choose. | ||
|
||
### IDE | ||
|
||
Our next tool is the **IDE** - integrated development environment. It's a software that helps you write the code. IDEs can do a lot of amazing things: | ||
Our next tool is the **IDE** - integrated development environment. It's a software that helps you write the code. IDEs can do a lot of amazing things such as: | ||
|
||
* show you all the files in the project, | ||
* paint the code so it's easier to identify each expression, | ||
* suggest completions to what you write, | ||
* paint the code so it's easier to identify expressions | ||
* suggest completions to what you type | ||
* helps navigate easily through the files in your project | ||
* and a lot more... | ||
|
||
JetBrains [Webstorm](https://www.jetbrains.com/webstorm/download/) is a wonderful IDE. You get the first month for free, and a totally free license if you're a student. | ||
JetBrains [Webstorm](https://www.jetbrains.com/webstorm/download/) is one of the strongest IDE's in the market. You get the first month for free, and a totally free license if you're a student. | ||
|
||
Microsoft [Visual Studio](https://www.visualstudio.com/vs/) is also a great choice that gains a lot of popularity lately. It is free for individuals. | ||
Microsoft [Visual Studio Code](https://www.visualstudio.com/vs/) is also a great choice that gains a lot of popularity lately. It is completely free for individuals. | ||
|
||
Choose the IDE you'd like to work with and follow the downloading instructions on its website. | ||
Choose the IDE you'd like to work with and follow the installation instructions in its website. | ||
|
||
### Git | ||
|
||
Git is a tool that helps you manage versions of your code, and work on a project with a team. There is a lot to know about it, but we will cover only minimal usage of Git in this tutorial. | ||
Git is a tool that helps you manage versions of your code and work in collaboration with team members. There is a lot to know about it, but in this tutorial we will cover only basic usage. | ||
|
||
Download it [here](https://git-scm.com/) and follow the installation instructions. | ||
You can download it and follow the installation instructions [here](https://git-scm.com/) . | ||
|
||
### Github | ||
|
||
[Github](https://github.com/) is a code repository which integrates with Git. It allows you to publish your project on the Web, use other open source projects, and collaborate. If you'd like to publish the project you're developing with this tutorial, and/or deploy it, make sure you have a Github user. | ||
[Github](https://github.com/) is a code repository website, which integrates with Git. It allows you to publish your project on the Web, copy other open source projects and collaborate. To be able to publish your project, make sure you create a user in Github's website (for free of course). | ||
|
||
### NodeJS and NPM | ||
|
||
Another tool which most web developers use is **NodeJS**, which comes with **NPM** - Node Package Manager. | ||
Another tool which most web developers are using is **NodeJS**. Once installed, it comes with another tool called **NPM** (Node Package Manager). | ||
|
||
NodeJS lets you run JavaScript code on your computer. It is used to run a local server which serves the project files to the browser. | ||
NodeJS lets you run JavaScript code on your computer. It's used to run a local server which serves the project files to the browser and then simulates a real running website. | ||
|
||
NPM allows you to easily install libraries and manage their versions. | ||
NPM allows you to easily download and install different libraries from the internet and also manage their versions. | ||
|
||
Download NodeJS [here](https://nodejs.org/en/). | ||
|
||
If you already have NodeJS installed, check if the version is greater than 4.0, by running this in your command line / terminal: | ||
`node -v`. \('-v' stands for 'version'.\) | ||
If you already have NodeJS installed, make sure you check that the version is greater than 4.0 by running this in your command line / terminal: | ||
``` | ||
node -v | ||
``` | ||
\('-v' stands for 'version'.\) | ||
|
||
If it's lower than 4.0, download the new version from the website and install it. | ||
|
||
Once installed, you should also have NPM. Check its version by running: | ||
`npm -v` | ||
Once installed, you should also have NPM installed. Check its version by running: | ||
``` | ||
npm -v | ||
``` | ||
|
||
|
||
### Angular-CLI | ||
|
||
[Angular-CLI](https://github.com/angular/angular-cli) is a powerful tool that takes care of a lot of the development process, including installing libraries you'll use in your project. Install it by running: `npm i -g angular-cli`. | ||
[Angular-CLI](https://github.com/angular/angular-cli) is a powerful tool that simplify a lot the development process. It also installs libraries you'll use in your current and future projects. Install it by running: | ||
``` | ||
npm i -g angular-cli | ||
``` | ||
|
||
We're using the recently installed NPM here - it knows where to find the package you're looking for by the name of the package you provide. 'i' is a short form of 'install'. '-g' stands for 'global' - we'd like to have this tool globaly installed on the computer, so we can use it from any folder. | ||
This command runs the NPM we recently installed here - it knows where to find the package (angular-cli) you're looking for by the name of the package you provide. | ||
the 'i' parameter, is a short form of 'install'. | ||
the '-g' parameter, stands for the word 'global' - we'd like to have this tool globaly installed on the computer, so that we could use it from any folder to any future projects. | ||
|
||
Read more about Angular-CLI in the following section. | ||
|
||
### Create a Project | ||
### Creating a Project | ||
|
||
First, create a folder to store all your projects, for example _myProjects_, and then go into the folder, using a terminal (command line window): | ||
``` | ||
cd the-path-to-your-folder/myProjects | ||
``` | ||
|
||
Now, create a new project, called _todo-list_ inside the projects folder, using Angular-CLI, by running the following command: | ||
``` | ||
ng new todo-list | ||
``` | ||
This can take a while, since many packages are being downloaded and installed. | ||
|
||
|
||
Now enter the new folder that Angular-CLI created for this project | ||
``` | ||
cd todo-list | ||
``` | ||
Once inside the folder of the application, run the application by using the following command: | ||
``` | ||
ng serve | ||
``` | ||
Now open your web browser and enter the URL - `localhost:4200` | ||
|
||
Create a folder for your projects, for example _myProjects_, and enter this folder in the terminal: | ||
`cd the-path-to-your-folder/myProjects` | ||
You should see the title **App works!** | ||
|
||
create a new project called _todo-list_ in this folder, using Angular-CLI, by running: | ||
`ng new todo-list`. This can take a few minutes, since many packages are being installed. | ||
|
||
Now enter the new folder that Angular-CLI created for this project: `cd todo-list` | ||
Run the application: `ng serve` | ||
Open your browser and enter in the URL line: `localhost:4200` | ||
You should see the title **app works!** | ||
|
||
### Congratulations! | ||
|
||
You have a running Angular application! | ||
To stop it from running, press `Ctrl+C` in the terminal. | ||
As long as it's running, any change you make in the project code will be immediately reflected in the browser thanks to the hot reload option. | ||
To stop it from running, press `Ctrl+C` in the terminal. | ||
As long as it's running, any change you make in the project code, it will be reflected immediately in the web browser. | ||
|
||
In the next sections you will learn about the project and start developing your todo list application! | ||
Now we're ready to start with our project! | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,20 @@ | ||
# Introduction | ||
|
||
Angular is more than a framework. It's a whole platform for creating applications that can run not only on the browser, but actually anywhere. It gives you tools to easily create dynamic components, define routes, and connect your application to the internet. | ||
Angular is much more than a framework. It's a whole platform for creating applications that can run, not only on a browser, but anywhere. It gives you tools to advanced capabilitues, such as easily creating dynamic components, routes definitions and much more. | ||
|
||
In this tutorial you'll learn how to develop a basic application with Angular. You will use the building blocks to have a working application: modules, components and services. Angular-CLI will help you in the process in so many ways, and will make the development process much easier. | ||
In this tutorial you'll learn how to develop a basic application using Angular 2. You will get to know the building blocks to have a working application: modules, components and services. Angular-CLI will help you in the process in many ways and will simplify the development process. | ||
|
||
By the end of this tutorial you will have a todo-list application, with which you'll be able to add and delete items, and, of course, see all the items in the list. You will even be able to change the title of an item that's already on the list. | ||
By the end of this tutorial, you'll have a ready todo-list application, that shows a list of items and let you add or delete items. You will even be able to change the title of an existing item. | ||
|
||
The list is saved in the browser's local storage. All the changes will remain even when you refresh the browser or even turn your computer off \(as long as you use the same browser on the same computer and not in private mode\). | ||
The list is saved in the browser's local storage. All the changes will remain even when you refresh the browser or even turn off your computer \(as long as you use the same browser on the same computer and not in private mode\). | ||
|
||
You will even publish the application on the Web, so that other can use it! | ||
You will even publish the application on the Web, so that other could use it! | ||
|
||
After completing this tutorial you are more than welcome to continue developing the application and adding your personal touch. | ||
After completing this tutorial, you are more than welcome to continue developing the application and adding your personal touch. | ||
|
||
This tutorial is meant for beginners. As such it tries to address good practices, but it's not always possible due to its simplicity. | ||
This tutorial is meant for beginners. As such it tries to address good practices, but due to its simplicity, it's not always possible. | ||
|
||
We hope this tutorial helps you in the first stages of Web development with Angular! | ||
We really hope this tutorial will help you in your first stages of Web development using Angular! | ||
|
||
Enjoy! | ||
|