angularjsnotes/Day 1/intro_to_angular.md

Intro to AngularJS

Learning Objectives

• Describe what are Single Page Apps and their pros and cons
• Describe what are front-end frameworks
• Describe AngularJS and what problems it tries to solve
• Set up first Angular app
• Learn some basic angular directives

Important

Remember in your google searches we are learning Angular 1.7 or AngularJS - the newer angular is called Angular or Angular 2.x - 6.x

AJAX and the Start of Single Page Apps

A major advancement in web development was AJAX (Asynchronous JavaScript And XML).

What if you didn't have to reload an entire web page every time you needed to make a request? What if you only needed to reload the parts of the page that needed to be updated?

Think about google maps that are embedded in a web page. When you click on the map, move around, zoom in or out, the whole page doesn't reload, just the map.

This allows for a better user experience, since it is faster (no whole page reload), and generally smoother, (user keeps their place and can keep moving around the map).

This technology opened the doors to Single Page Apps.

Single Page App Pros and Cons

Pros:

• Fast, resources only loaded once and then only data is transmitted back and forth
• The client's browser renders the views, rather than the server, which usually allows for a faster experience
• Separate data from views. By making the back end have end points that are just data, the data can be resused for multiple apps - desktop vs android app, vs iOS app all can use the same data/database.

Cons:

• Initial load can be slow because there could be a lot of code to download
• Building large apps gets very tricky very fast (new frameworks try to solve this over and over again)

Front End Frameworks

You can build a single page application with vanilla javascript or jQuery.

But, much as we favored jQuery over vanilla JavaScript in unit 1 for its useful functionality and thus let us write less and do more, Front-End Frameworks have been developed to try to help solve common problems in developing Single Page Applications.

There are many, some of the most popular are

• Backbone
• Ember
• Meteor
• Knockout
• AngularJS (Angular 1.x)
• Angular (Angular 2.x - 5.x and beyond)
• Vue
• React

Some are popular because everyone was excited about them at one point and companies continue to use them. Others are popular because they have a lot of buzz.

As of March 2018, the landscape continues to change. There is even 'framework fatigue' where people are tired of all the options and new things being released all the time!

Front End Frameworks generally try to solve the same problems:

• Speed - all frameworks are pretty darn fast, but this is something that gets a lot of attention. Speed is an easy metric to understand for even a non-coding person. But should not be the only deciding factor
• Code organization - some stick to MVC, some combine MVC in some way, and some choose a different way to organize code. This helps with scaling the scope of the project, having many devs working with the same patterns so it is easier for people to maintain consistency and join projects
• Managing state - state has to do with the way the data is stored/represented in the database, on the web page and how the data is updated

AngularJS

AngularJS (Angular 1.x) came out in 2009 and was the first blockbuster framework. Everyone was excited about it, everyone wanted to use it. AngularJS is built by Google. It continued to grow in popularity and features for years.

Its replacement Angular (versions 2 - 5+), came out in January 2016 and was a total rewrite of Angular and is completely incompatible with Angular 1.x. Despite this new version, many companies kept and keep using 1.x.

Angular's features include:

• Open source, free to use
• Handles the V in MVC (Models, Views, Controllers)* (not everyone agrees with this particular semantic, but it is close enough; the alternate you might see is MVVM (Model-View-View-Model))
• 2 way data binding - the data displayed on the web page is the same as the data in js, if one is updated, the other updates as well. This is really cool, but also saves you from having to dedicate code to traverse, manipulate and listen to the DOM for every change of data on your page.
• Fast start! Getting started with AngularJS is as simple as adding a link in the header, just like jQuery.
• HTML Template, write your HTML as you always would, and then add in AngularJS to provide functionality where needed.
• Directives - these mark DOM elements to interact with AngularJS, things like click events, showing/hiding elements, binding data and much more
• Services (Dependency Injection), you can use AJAX to make http requests and many other services are available that can help you build all the functionality you'd like for a Single Page Application. The fancy term 'dependency injection' - just means it is pretty easy to add services. We'll see this later in our code alongs

Our First AngularJS App

Setup

In your student examples folder

• mkdir first_app
• cd first_app
• touch index.html app.js
• atom .

index.html

• add html boilerplate
• in the head tag add

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

and below that link our app.js

<script src="app.js" charset="utf-8"></script>

Module

We will only have one module in our apps. Our modules can have many controllers.

To make sure our module encompasses all our html, we're going to put the directive in our opening html tag.

Remember a directive is just extra text in an html element tag that will let us do cool angular stuff. It always starts with ng-

This one is to say 'hey this is our angular app'

<html ng-app="MyApp">

Let's head on over to our app.js to configure our app.

app.js

const app = angular.module('MyApp', []);

We're saying let's make a variable app that is equal to an angular.module, which is a function that takes two arguments.

The first argument MUST match what we named our app in our html, in this case, we named it MyApp, we could have named it KarolinApp or whatever we want, but it must match in the html and the app.js file.

The second argument is an empty array. Right now our app is going to be really simple and we'll just go over some fundamental AngularJS. We'll be filling in that array soon enough.

Controller

Controllers control a certain area of the page. A controller can control it's own HTML element and the children inside of it. By default, it doesn't know anything about sibling or parent elements.

Let's write our first controller inside our

app.js

app.controller('MainController', function(){
  this.hello = 'oh hai!';
});

GOTCHA - we have to use the ES5 function(){} as our second argument. If we use an arrow function, it won't work as expected.

Super! Now let's bind our controller to our html

We'll just have one controller, so let's bind it to the body.

MainController is a lot of typing. We can give it an alias ctrl so we can type less

index.html

<body ng-controller = "MainController as ctrl">

Last step, let's get our data stored in this.hello to render in our HTML

Our data will match in our HTML and in our app.js and update whenever one is changed.

However, we access our data a little differently depending if we are in our html or js file.

When in our html file, we access the data by starting with ctrl which is the alias we set for MainController.

When in our js file, we acccess the data by starting with this

so in this case our data is the text string oh hai!

To access it in the js it is

this.hello = 'oh hai!';

and to access it in the html:

<body ng-controller = "MainController as ctrl">
  <h1>{{ ctrl.hello }}</h1>
</body>

Let's test it out and see if our data renders!

All our index.html

<!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <script src="app.js" charset="utf-8"></script>
    <title>My First App</title>
  </head>
  <body ng-controller='MainController as ctrl'>
    <h1>{{ ctrl.hello }}</h1>
  </body>
</html>

All our app.js

const app = angular.module('MyApp', []);

app.controller('MainController', function(){
  this.hello = 'oh hai!';
});

Directives

We'll go over a few directives beyond what we needed to set up our app

• ng-repeat
• ng-src
• ng-if
• ng-show/ ng-hide
• ng-click

Let's make a page for our contacts.

First let's add a little css

<style>
img {
  max-width: 100px;
  display: inline-block;
}
dl {
  display: inline-block;
  vertical-align: top;
}
</style>

ng-repeat

Here is some data of our contacts. Let's copy paste it into our app.js INSIDE our app.controller function

this.contacts = [
    {
      name: 'Jenny',
      phone: 8675309,
      state: 'California',
      image: 'http://old.unsquare.com/dance/wp-content/uploads/2008/11/jennylewis01.jpg'
    },
    {
      name: 'Claire',
      phone: 6060842,
      state: 'DC',
      image: 'http://www1.pictures.zimbio.com/mp/yOE-jyqpuoql.jpg'
    },
    {
      name: 'Morris',
      phone: 7779311,
      state: 'Minnesota',
      image: 'https://s1.ticketm.net/tm/en-us/dbimages/111807a.jpg'
    },
    {
      name: 'Alicia',
      phone: 4894608,
      state: 'New York',
      image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/AliciaKeys2013.jpg/220px-AliciaKeys2013.jpg'
    },
    {
      name: 'Etta',
      phone: '842-3089',
      state: 'California',
      image: 'http://images5.fanpop.com/image/photos/30600000/SWEET-ETTA-JAMES-etta-james-30694011-584-519.gif'
    }
  ];

Let's make cards for each of our contacts. First let's just see if we can get their names to display

Index.html

<body ng-controller='MainController as ctrl'>
  <h1>{{ ctrl.hello }}</h1>
  <div ng-repeat="contact in ctrl.contacts">
    <dt>{{ contact.name }}<dt>
  </div>
</body>

Expected Appearance:

ng-src

Let's build out some more of our contact list. We'll use another directive ng-src to get our images to show up correctly

<div ng-repeat="contact in ctrl.contacts">
  <img ng-src="{{ contact.image }}" alt="an image of {{ contact.name }}">
  <dt>{{ contact.name }}<dt>
</div>

Expected Apperance:

Let's add some more

<div ng-repeat="contact in ctrl.contacts">
  <img ng-src="{{ contact.image }}" alt="an image of {{ contact.name }}">
  <dl>
    <dt> {{ contact.name }} </dt>
    <dd> {{ contact.state }} </dd>
    <dd> {{ contact.phone }} </dd>
  </dl>
</div>

Cool! We can see that ng-repeat let's us loop over our array of objects and make a new element for each contact

ng-if

We may not want everything to appear. We can control what appears on the page using ng-if

in app.js

this.showImages = false;

in index.html

  <img ng-src="{{ contact.image }}" alt="an image of {{ contact.name }}" ng-if="ctrl.showImages">

Now, all of our images should disappear.

Expected Appearance:

We can look into our Chrome console elements tab for more info

app.js

Let's change that false to true

this.showImages = true;

Our images should reappear and in chrome console we should now see our img element. Before we just had a comment about the ng-if and our element was gone. Now it should be back

ng-show / ng-hide

In app.js

this.showInfo = false;

In index.html

<dl>
  <dt> {{ contact.name }} </dt>
  <dd ng-show="ctrl.showInfo"> {{ contact.state}} </dd>
  <dd ng-show="ctrl.showInfo"> {{ contact.phone}} </dd>
</dl>

In contrast to ng-if ng-show changes to ng-hide and the element is still on the page

ng-click

We need a way to be able to interact with our page.

Let's write a function that will toggle our this.showInfo value

app.js

this.toggleInfo = () =>{
  this.showInfo = !this.showInfo;
}

Now let's add a click event to a button that will call this function

<body ng-controller='MainController as ctrl'>
  <h1>{{ ctrl.hello }}</h1>
  <button ng-click="ctrl.toggleInfo()"> Toggle Info </button>

Now, as we update the value of this.showInfo our page changes to reflect that.

Resources SPA vs MPA

AngularJS 5 Awesome AngularJS Features

How it feels to learn JavaScript in 2016

How it feels to learn JavaScript in 2017