#Angular 1 - Basics
##Setup
- Create an
index.htmlfile - Add
ng-app
##2 Way Data Binding
Let's start with something simple that showcases the power of Angular. In index.html create a text input.
<input type="text" placeholder="What is your name">
Add a new attribute ng-model="name" to the text input. This binds the value of the text input to a property called "name". Technically, ng-model tries to bind "name" by evaluating the expression on the current scope, and since the property "name" doesn't already exist on this scope, it will be created implicitly and added to the scope. We'll talk a lot more about this when we learn about controllers in a few lessons, so don't worry about it for now.
Now that we've bound the input to the "name" property, let's display the value of "name" on the page. We can write expressions in our HTML using {{ }}.
<h1>My name is: {{name}}</h1>
Open up index.html in your browser. What does the h1 say when the page loads? Try typing something into the input and notice that the h1 reflects whatever value we type into the input. This is our first example of 2-way data binding.
EXERCISE: Replicate the exact same functionality without using Angular. In a new file, write vanilla JS code that will automatically update the h1 when the value in the text input changes.
Questions
- What does ng-model do?
- Find a way to set the initial value of "name" as "Bojack".
- What are those
{{ }}expressions? Are they Handlebars? - Explain what 2-way data binding is.
EXERCISE: Use ng-model with a dropdown menu(select tag). Give the user the following four items to pick from: "Dogs", "Cats", "Dogs and Cats", "Neither". Display the user's choice in an h3. For example, if the user selects "Dogs", the h3 should say "I love dogs <3".
##Epressions and Built-In Filters
Simple calculator Simple tip calculator
Questions
- Find a list online of all the built-in filters
- Get out currency filter to display in Euros
EXERCISE: Add a text input to a page that displays user input in all caps and all lowercase. You will need to use 2 built-in filters that we haven't covered. Use the following gif as a reference
EXERCISE: Create a simple tip calculator using the basic Angular concepts that we've covered so far(and nothing more advanced). A user can enter a meal price into an input, then select a percentage to tip from a dropdown menu. Display the esulting tip at the bottom of the page. Check out the following gif to see how it should work.
