Solved

I need to get up and running with Angular

Posted on 2016-08-10
4
43 Views
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 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.
0
Comment
Question by:brgdotnet
  • 2
4 Comments
 
LVL 27

Assisted Solution

by:BigRat
BigRat earned 100 total points
Comment Utility
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
1
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 400 total points
Comment Utility
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.

Example
<html ng-app="myapp">
<body>
<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>
</body>
</html>

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">
<head>
<title>AJAX Hello World 2</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<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">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tr ng-repeat="item in items">
    <td>Name</td><td>{{item.Name}}</td>
    <td>Email</td><td>{{item.Email}}</td>
  </tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
(function() {
'use strict';
angular.module('myapp',[])
  .controller('mycontroller', function($scope, $http) {
    $scope.items = [];
    $scope.fetchData = function() {
      $http.get('t1479.php')
      .then(function(response) {
          $scope.items = response.data;
        });
    }
  });
})();
</script>
</body>
</html>

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.
Summary
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
0
 
LVL 2

Author Comment

by:brgdotnet
Comment Utility
Thank you.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now