Solved

I need to get up and running with Angular

Posted on 2016-08-10
4
76 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 27

Assisted Solution

by:BigRat
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. http://yeoman.io/learning/index.html
1
 
LVL 57

Accepted Solution

by:
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.

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
ID: 41754561
Thank you.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41754624
You are welcome.
0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

691 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