jnewman12

Front-end Routing with UI-Router

Introduction

• To practice working with UI-Router, you're going to make a single-page app with multiple views.
• just like in our UI-Router lesson, don't forget you'll need to run your front-end through a server so http-server or server will be your friend.
• This lab builds upon our services lesson (and lab) from yesterday,
• The exercise is to make a simple crud app (index, new/create, show, delete) with an external API
• API Endpoint: https://agile-chamber-77499.herokuapp.com/artists

jnewman12

Front-end Routing with UI-Router

---

Objectives

• Understand the value of client side routing
• Build a SPA with multiple pages
• Describe when to consider server-side routing and when to consider front-end routing

jnewman12

Postal Service

---

Goals and Objectives

• Practice sharing data between controllers
• Inject services and dependencies into your controllers

jnewman12

Front-end Routing with UI-Router

---

Objectives

• Understand the value of client side routing
• Build a SPA with multiple pages
• Describe when to consider server-side routing and when to consider front-end routing

jnewman12

Angular Services Lab

Objectives

• Build a simple Todos app in Angular
• Refactor the app from controller as method to $scope method
• Use other core services in the app

Directions

jnewman12

Angular Services

---

Objectives

• Refactor an Angular app from controller as method to $scope method
• Describe what services are in Angular

jnewman12

Advanced Mongoose

---

Objectives

• Define virtual properties for a model
• Modify how a model is serialized to JSON

jnewman12

Promises in Javascript

---

Objectives

• Understand what promises are
• Define A Promise

jnewman12

AJAX with JS & JQuery

Objectives

• Implement a jQuery AJAX client for a simple REST service
• Reiterate the benefits of separation of concerns – API vs. Client

Preparation

• Understand basics of JS

jnewman12

Client Side Rendering With Underscore.js Templating

---

What is Underscore?

• Underscore.js is a highly useful complement to JavaScript’s rather sparse standard library. In a pinch, Underscore gives you simple templating, too.
• Underscore gives you a large list of helper functions, similar to what ruby might have waiting for you out of the box