Web #4: JavaScript Framework and Why We Need Them (Angular Part 1)

We'll discuss JS Frameworks

  1. Let's pause - great job getting this far.
    • Expect it to get tougher.
    • Practice makes perfect. Learn it, and keep practicing from scratch.
  2. Before we talk about AngularJS, let's talk about JavaScriptScripting language for interactive sites. Adds event handlers, such as mouse click..
    • Client-sideYou can right-click on the page to view client-side / JavaScript code. scripting, while C# is server side.
    • There are many JavaScript-based frameworks or libraries, such as jQuery, React, Angular, Knockout, Node, Vue, etc.
    • We need them because client-side cannot talk to server-side.
    • These frameworks can help your app what to do when a page loads or when a user clicks on something.
    • Your app's potential is limited if you don't use a framework. You have to learn it! AngularJS is a good starter.
    • Sometimes, a group of programmers will create a library or framework that contains commonly used JavaScript functions (such as checking if email is valid).
  3. What is AngularJS?
    • Developed by Google in 2010. Now on version 6.
    • JavaScript framework
    • It's an "external" library, so you'll have to import (or reference) it in your website.
    • If you can learn AngularJS, you will gain the skills to learn other frameworks.
  4. So why? And how does JavaScript help client talk to the server?
    • Why? Benefits?
      • Helpful in pages that requires user input and data needs to go back and forth.
      • Asynchronous (async). Multiple data requests without waiting for the previous one to finish.
      • Get data without page refreshing. Page isn't loading, and data appears when ready.
    • How?
      • Angular: $http (uses XmlHttpRequest)
      • jQuery: $.ajax <-- Most configurable. Sends data to the controller using an HTTP POST / GET request.
      • jQuery: $.get or $.post. <-- Same thing. Shorthand for $.ajax
  5. Open Visual Studio. We're not going to create an app using Angular, but let's go over key pieces of an AngularJS website.
    • Download Angular 1 file to help you get started.
    • Module (myApp.js)
    • AngularJS Controller <-- Dependency (or component) injection. Probably the first time you'll hear this.
    • How it works?
      • Requests data from server( C# controller)
      • Server returns dataAsync data is referred to as promise data. to the Angular controller
      • Angular makes that data available to the MVC View (.cshtml page)
      • In the View, use curly bracket syntax for getting the data
  6. Go to the next lesson - Angular part 2