I need to get up and running with Angular

Posted on 2016-08-10
Last Modified: 2016-08-13
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 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.
Question by:brgdotnet
  • 2
LVL 27

Assisted Solution

BigRat earned 100 total points
ID: 41752127
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.
LVL 55

Accepted Solution

Julian Hansen earned 400 total points
ID: 41753378
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=""></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="" 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=""></script>
(function() {
'use strict';
  .controller('mycontroller', function($scope, $http) {
    $scope.items = [];
    $scope.fetchData = function() {
      .then(function(response) {
          $scope.items =;

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

Author Comment

ID: 41754561
Thank you.
LVL 55

Expert Comment

by:Julian Hansen
ID: 41754624
You are welcome.

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below.…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question