Updates component.md

Auto commit by GitBook Editor

README.md

@@ -1,16 +1,16 @@
-# Angular Tutorial for Beginners - Creating Todo List
+# Angular Tutorial for Beginners - 
+
+# Creating a Todo-List App
 
 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 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 as your own workshop and we'd love to hear about it! - write us to: [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 in 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. 
+**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.
 

component.md

@@ -33,15 +33,15 @@ Angular takes care of synchronizing the members of the component with the compon
 </h1>
 ```
 
-The double curly braces and their content are called Interpolation. This is one way to bind data in Angular. As we mentioned before, the code in this file is not used as is when the browser renders the component. Angular compiles it to JavaScript code. In one of the compilation steps it looks for Interpolations inside the template. The content of the Interpolation is an expression, written in JavaScript. In run time the expression is evaluated, and then you see the result.
+The double curly braces and their content are called **Interpolation**. This is one way to bind data in Angular. As we mentioned before, the code in this file is not used as is when the browser renders the component. Angular compiles it to JavaScript code. In one of the compilation steps it looks for Interpolations inside the template. The content of the Interpolation is an expression, written in JavaScript. In run time the expression is evaluated, and then you see the result.
 
 Interpolation is one of the strongest, most basic features in Angular. It exists from the very beginning of Angular - in the first version. It makes it really simple to insert dynamic data to the view.
 
-In this component, the expression is simply the member of the component class, `title`. Let's try to change it. Try out the following and see the result in the browser. \(With every change you make in the file, the browser will refresh automatically!\)
+In this component, the expression is simply the member of the component class, `title`. **Let's try to change it**. Try out the following and see the result in the browser. \(With every change you make in the file, the browser will refresh automatically!\)
 
 * Remove the curly braces and keep just the content `title`
 * Put back the curly braces and replace the content with some mathematical expression, for example: `{% raw %}{{ 2 + 2 }}{% endraw %}`. \(The spaces are not mandatory, they just make the code more readable.\)
-* Write a mathematical expression combined with the `title` member. For example: `{% raw %}{{ title + 10 }}{% endraw %}`
+* Write a mathematical expression combined with the `title` member: `{% raw %}{{ title + 10 }}{% endraw %}`
 * Pass an undefined variable to the expression - a variable which was not declared in the component class. For example: `{% raw %}{{ x }}{% endraw %}`
 * Try out anything you'd like. Don't worry - you can't do any harm to the browser or the computer! In the worst case, the browser will run out of memory and will get stuck. \(But you'll have to write something really complicated to make that happen!\)
 
@@ -51,7 +51,7 @@ Let's go back to the file `app.component.ts` and look at the component's meta-da
 
 ```js
 @Component({
-  selector: 'app-root',
+  selector: 'todo-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
@@ -73,11 +73,11 @@ The first property, `selector`, tells Angular what will be the name of the tag t
 
 ```html
 <body>
-  <app-root>Loading...</app-root>
+  <todo-root>Loading...</todo-root>
 </body>
 ```
 
-The element `app-root` is not an HTML element. It is the component that was created with the selector `app-root`. Try changing the selector. You'll see that if you change it in only one of the files, "Loading..." will be displayed. This is the content that we gave to the tag in `index.html`, and it is rendered as long as the element is not replaced with an Angular component. You can see in the browser's console an error message.
+The element `todo-root` is not an HTML element. It is the component that was created with the selector `todo-root`. Try changing the selector. You'll see that if you change it in only one of the files, "Loading..." will be displayed. This is the content that we gave to the tag in `index.html`, and it is rendered as long as the element is not replaced with an Angular component. You can see in the browser's console an error message.
 
 One last thing, the first line in the component file imports the code that defines the decorator `@Component`. It is needed to use the decorator, which is defined in the imported file \(or actually, in one of its own imports\). Try removing this line, and see the error.
 

installations.md

@@ -1,12 +1,12 @@
 # Installation
 
-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.
+Every developer needs a set of tools and libraries to start working. In our case, we'll install all the necessary tools, and once we have our Angular-CLI installed it will take care of additional libraries we'll need the 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 click the relevant link and follow the instructions to download and install 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 of your choice.
 
 ### IDE
 
@@ -37,9 +37,9 @@ You can download it and follow the installation instructions [here](https://git-
 
 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's used to run a local server which serves the project files to the browser and then simulates a real running website.
+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 and simulates a real running website.
 
-NPM allows you to easily download and install different libraries from the internet and also manage their versions.
+NPM allows you to easily download and install different libraries from the internet and  manage their versions.
 
 Download NodeJS [here](https://nodejs.org/en/).
 
@@ -59,14 +59,14 @@ npm -v
 
 ### 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:
+[Angular-CLI](https://github.com/angular/angular-cli) is a powerful tool that simplifies a lot of 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
 ```
 
 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.
+the '-g' parameter, stands for the word 'global' - we'd like to have this tool globally installed on the computer, so that we could use it from any folder to create any future projects.
 
 Read more about Angular-CLI in the following section.
 
@@ -79,9 +79,10 @@ 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
+ng new todo-list --prefix todo
 ```
 This can take a while, since many packages are being downloaded and installed.
+The prefix will be used in every component we create. The default prefix is 'app'.
 
 
 Now enter the new folder that Angular-CLI created for this project
@@ -104,5 +105,5 @@ 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 reflected immediately in the web browser.
 
-Now we're ready to start with our project!
+Now we're ready to start developing!
 

introduction.md

@@ -1,6 +1,8 @@
 # Introduction
 
-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.
+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 capabilities, such as easily creating dynamic components, routes definitions and much more.
+
+![](/assets/angular.png)
 
 In this tutorial you'll learn how to develop a basic application using Angular. 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.