Web #5: Angular Part 2 (Pull data from SQL Server and show on website)

What we'll talk about:

  1. How Angular makes building .NET applications easier.
    • ASP.NET uses controls (buttons, textboxes) which allows websites to manipulate data.
    • Unfortunately, you had to be good at C# (not an easy language to learn).
    • Years ago, client-side code was unable to talk to C# code (server-side). AngularJS introduced $http (XmlHttpRequest) which allowed the client-side code to call C# code (which pulls data).
    • Today, I only use C# to connect to the database and pull data. It returns the data to Angular in JSON format.
    • Angular has a built-in JSON parser and made it easy to fetch data from C# and show it on the website.
    • You can also easily sort, add custom filters or directives, and if-else conditions.
  2. Basic components of a data-driven website (or application)
    • Data (or back-end). SQL Server.
    • Framework (.NET and C# as the programming language)
    • A controller (or middle-layer) that has access to data.
    • External libraries, such as AngularJS
    • What is JSONJavaScript Object Notation. It simplified the way we pass data over the Internet.? When you search for code examples, most of them will expect the data to be in JSON format.
    • Web hosting. Advantages of hosting in cloud (software, license, etc).
  3. Model-View-Controller (MVC)
    • Model. The C# code that actually requests for the data.
    • View. The .aspx / .html page. Angular directives are extended in the view to give more control of data (ng-repeat, ng-if, etc).
    • Controller. The link between the interface (what you see) and the data. Makes data accessible to website. This is how the website talks to the database.
  4. Design Principle. MVC will help clean up code.
    • Avoid adding CSS styles to the View pages. Use classes to refer to styles in css files.
    • Create a utility file (.cs) for commonly used C# methods
  5. Rule-of-thumb for showing data on web page:
    • Think responsive (adjusts to the width of screen and does not look bad on smaller devices).
    • Just because you know how to pull data, doesn't mean you should pull and show everything.
    • Bootstrap / jQuery modal windows are great if you want to show more details. Redirecting to another page could waste time.
    • Remember, tables are not responsive.
    • Avoid using views if dealing with larger data sets.
  6. How to get better:
    • Copy websites. It's ok to borrow ideas. Nothing is original in the Internet.
    • Create templates for later use. This includes your favorite navigation menu (header), footer, etc.
    • Think modular designInclude files such as <!--#include file="footer.html--!>. If a section can be seen in multiple pages, create reusable code.
  7. We'll also cover:
    • Event handlers (clicking button)
    • CSS basics
    • Ready-to-use Directives (ng-if, ng-repeat, etc)
  8. Let's build an Angular site that pulls data from SQL Server when you click on a button:
    • Open your working MVC site
  9. Go to the next lesson - Angular part 3