I need to get up and running with Angular

I know some Java Script and JQuery. I have a work assignment where I need to install and then start using JQuery. I am using Visual Studio.
Can someone give me some context on Angular? Is it just another library like JQuery? Is it a simple install, as I would like to get up and running quickly using JQuery in my Asp.net web application. I am not using MVC.

I need some expert help from experts who have actually used Angular. I can google all day, however I need some expert guidance. Also once I install Angular, is it easy to create an application using JQuery? Even a simple hello world example would help me out.
Who is Participating?
Julian HansenCommented:
Anguar is a development frame work based on the MVC pattern. It uses something called two way binding to keep your view and model synchronised which means that when you change the model Angular automatically updates the view elements bound to the model and vice versa.

<html ng-app="myapp">
<input ng-model="myname" type="text" /> 
Your Name is {{myname}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

Open in new window

Working sample here
This is the equivalent of an Angular Hello world - but it does not tell the whole story.

Firstly, there are two flavours of Angular 1.x and 2.x - that use paradigms that are quite different. Angular 2 works on components and many of the conventions of Angular 1 are deprecated.

Secondly, Angular is typically used to build a complete application - unlike jQuery which is a library for manipulating the DOM, Angular is a framework for building Single Page Applications (SPA). These are essentially state based apps that manipulate the view based on the model but don't use URL's to different pages. Actually, they do use urls for routing but these are in page URL's using hashbang (#) notation - there is not (usually) hard linking to other pages that the browser then fetches and displays. You run off the same page and Angular pulls in the views and data that is needed for the application to work.

While Angular 1.x included a version of jQuery lite - this has been removed in Angular 2. This is because the paradigm Angular is based on does not require jQuery. This does not mean they cannot work side by side. Sometimes including jQuery is necessary for a plugin you may want to use - however, the library of Angular equivalent plugins is extensive and you should always look for an Angular version first.

When to use Angular and when to use jQuery
Use jQuery when you have a normal web site (pages) you want to enhance by manipulating the DOM and / or responding to user interactions.
Use Angular when you want to create a web application.

One of the advantages (in my view) of Angular is that it moves the client code into the client - no more generating html output on the server and serving up pages. The server is now used for REST calls from the client to send and retrieve data. In my experience this makes for a much cleaner and simpler application.

Angular's two way binding is where the framework really makes a difference. As you can see from the simple app again - without having to write any code you can link user interaction to the view.

Here is another example that demonstrates more of how Angular works. This sample keeps what we had but adds a button which is linked to a click (ng-click) that is bound to a function in the controller (you can Google controllers to find out what they do). The click pulls data from a web "service" and fills a table. The table is only shown if there is data in the model
<html ng-app="myapp">
<title>AJAX Hello World 2</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<input ng-model="myname" type="text" /> 
Your Name is {{myname}}
<div ng-controller="mycontroller">
<button class="btn btn-primary" ng-click="fetchData()">Fetch Data</button>
<table class="table" ng-show="items.length > 0">
  <tr ng-repeat="item in items">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
(function() {
'use strict';
  .controller('mycontroller', function($scope, $http) {
    $scope.items = [];
    $scope.fetchData = function() {
      .then(function(response) {
          $scope.items = response.data;

Open in new window

Working sample here

What you will note in the above code is that it appears to violate some of the conventions of AJAX programming - where the items variable is used in the view before the AJAX call has fetched the data. This is because of Angular's 2 way binding. As soon as items has a new value (is dirty) the Angular framework detects this and updates the view. This makes for much cleaner and simpler coding when making REST calls for external data.

Angular 2 includes the same basic paradigm but uses a different implementation. Typically you would code your Angular 2 app in TypeScript and the cross compile to JavaScript. Angular 2 uses components (Google that) where your custom <tags/> are linked to component classes which then handle the rendering (template) and interactions on that component.

Unfortunately this thread is a bit limited to go into a full breakdown of Angular, but what I can say is that once you get your head around the methodology - it makes coding web (SPA) application a whole lot easier and quicker.
Angular - complete framework for building an application
JQuery - library for manipulating DOM and responding to interactions on a page.

You could achieve the same effect with jQuery but it would take many hours of coding and debugging to get to even a small part of what Angular offers out of the box
Once you start on Angular you can forget JQuery. JQuery manipulates the HTML DOM. Angular hides it completely. It provides a two way data binding so you never ever access the HTML elements themselves.

I don't use Visual Studio - but simply edit and "make" with Grunt. I also scaffold my apps with Yeoman. And that is a good place to start. http://yeoman.io/learning/index.html
brgdotnetcontractorAuthor Commented:
Thank you.
Julian HansenCommented:
You are welcome.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.