Getting Started With AngularJS

Every once in a while a new apparatus arises and usually as it unexpected appeared, it seeps down into oblivion. Not AngularJS though. While it’s been around given 2009 given a origination by Misko Hevery, AngularJS has been gaining a lot of courtesy in a past integrate of months.

People are articulate about it, developers have been integrating it in their works, and authors have been essay books about it and earning loads of cash. So, what is AngularJS and since should we bound on it? Is it life-changing? It certain is! Let me tell we why.

Note: I rarely advise that we get gentle with JavaScript initial before delving deeper into AngularJS. If we aren’t informed with MVC and DOM, we advise reading some-more about them before move further, differently we competence get confused with many of a terminologies used in this article.

Recommended Reading: Learning Programming: 10 Misconceptions That Are Not True

What is AngularJS?

AngularJS is not usually another JavaScript framework. Sure, we have Backbone, Ember, and a hottest jQuery, though AngularJS is opposite in many ways.

Data-Binding and Built for Single-Page Applications (SPA)

Firstly, AngularJS is a data-binding horizon that is privately built for SPAs. Meaning, we can simply build an focus though regulating any other libraries given it already has all we will ever need. It also maintains synchronization for a indication and view.

The beauty of building a SPA is that it imitates a desktop knowledge in that a page stays a same all throughout, with usually a views being altered along with a URL – AngularJS handles routing as good as views. It’s faster and smoother this wa. It’s as if you’ve usually non-stop a desktop focus and carrying all we need already there.

Another thing is that unlike other SPAs, a browser story is indeed kept. For example, if we wish to click on a behind symbol to get behind to a prior view, AngularJS will indeed take we behind to a prior view. Most SPAs don’t work this way.

Model-View-Controller Implementation Done Right

AngularJS implements MVC in a pleasing way. Most frameworks that use MVC requires we to apart your focus into modules and afterwards write formula that will bond them together. While a logic behind this is to make a formula work some-more stretchable and reusable, this leads to many coding horrors, generally for idle (or sleepy) developers. AngularJS handles this beautifully by simply requiring we to just separate your focus into opposite modules. It afterwards handles a rest.

Animation

Of march a single-page focus can’t demeanour good though a suitable animations. As mentioned earlier, AngularJS is a feature-rich horizon that has all of a things you’ll need in building general applications. As such, it provides an easy approach to deliver animation in each perspective a same approach as jQuery does.

Here’s a good instance of how AngularJS handles animations.

But that is usually a aspect of AngularJS. Here is some-more of what it can do:

• Data validation


• Dependency injection


• Handle tradition logic


• Multi-element directives


• Share information between controllers


• Enhance HTML


• DOM strategy with a assistance of jQlite (built-in)


• AJAX


• Routing


• Testing


• and many more

A Comparison

Now, let’s take a look on how AngularJS works by comparing it to a unchanging JavaScript and jQuery.

Vanilla JavaScript

Without regulating any JavaScript library, this is how it looks when we arrangement a information we submit in real-time.

html 
 conduct 
 titleVanilla JavaScript/title 
 /head 

 physique 
 Name: submit id="textInput" type="text" / 
 br/ 
 Your name is camber id="name"/span 
 
 book 
 var textInputElement = document.getElementById('textInput'), 
 nameElement = document.getElementById('name'); 
 textInputElement.addEventListener('keyup',function() 
 var content = textInputElement.value; 
 nameElement.innerHTML = text; 
 ); 
 /script 
 
 /body 
/html

JQuery

With jQuery, displaying a information we submit becomes many simpler given many of a behind and onward is rubbed by jQuery. Thus, enabling we to write reduction code.

html 
 conduct 
 titlejQuery/title 
 book src="http://code.jquery.com/jquery-2.1.1.min.js"/script 
 /head 
 
 physique 
 Name: submit id="textInput" type="text"/ 
 br/ 
 Your name is camber id="name"/span 
 
 book 
 $('#textInput').on('keyup',function() 
 $('#name').html($('#textInput').val()); 
 ); 
 /script 
 /body 
 
/html

AngularJS

AngularJS takes all adult a notch. Not usually is a horizon lightweight, the approach we write your HTML becomes easier too.

!DOCTYPE html

html ng-app
 head
 book src="angular.min.js"/script
 titleAngularJS/title
 /head
 
 body
 Name: submit type="text" ng-model="name" /
 br /
 Your name is name 
 /body
/html

As demonstrated above, a beauty of AngularJS lies in making we write reduction formula while progressing firmness for your application. There is small behind and onward opposite a code, given many of a stringing adult of modules is finished by AngularJS. Another notable thing is that you don’t have to manipulate a controllers in sequence to make changes on a view.

Limitations of AngularJS

AngularJS is not all fever and rainbows. If we are aiming to emanate an focus that does elementary calculations – a calculator, a nonplus game, animations, energetic forms and a like – afterwards AngularJS is a horizon we are looking for.

However, if we are building a large and complete focus like a government tool, we competence wish to curve off from AngularJS given it’s not grown for that, or during slightest use other frameworks in conjunction.

AngularJS is built for fast prototyping, privately for general applications, though there are instances when we can use it to build applications of incomparable scales, though that is nonetheless to benefit popularity.

AngularJS Resources

Learn a fundamentals of AngularJS during CodeSchool. It’s a giveaway march that is sponsored by Google. It teaches one how AngularJS can be used from many opposite angles. Don’t forget to check out AngularJS’ YouTube channel where a developers themselves tell tutorials and news updates.

But if we are some-more of a support arrange of developer, we competence wish to check out a AngularJS API documentation. For people who are proficient in JavaScript, this support should be easy adequate to zephyr through.

You don’t need to reinvent a circle possibly as there are a lot of modules that we can use and improve during ngmodules.org’s repository.

If we have a supports and are critical about training AngularJS, we rarely advise checking AngularCourse.com with a 7 hour HD video course that will assistance we build a real-life product.

Are we a redditor? If we are, we can check out /r/angularjs for community contention and support.

AngularJS In Action

ngSweetAlert

It’s a really honeyed deputy for JavaScript’s unchanging “Alert”.

Angular-nvD3 Charts

As formerly mentioned, we can use AngularJS for elementary to middle calculations. Using Angular-nvD3, we can customize your charts according to your needs.

Shaking Login Form

You can even piquancy adult your forms while carrying validation. Don’t forget to check out a tutorial!

AngularJS Sliding and Word Search Puzzle

This elementary nonplus shows how stretchable and elementary AngularJS is. Don’t forget to flare it on Github as well.

2048 Game

Remember this game? It’s 2048 and a series is nowhere to be seen since we don’t wish to get dependant again. The diversion has been remade regulating AngularJS. How cold is that? Check out a educational and learn for yourself!

Conclusion

AngularJS is a absolute horizon that can assistance developers assist growth of web applications. The use of AngularJS is apropos some-more and some-more renouned as a days go by, and we rarely advise hopping on a trend as there is a energetic and useful village out there watchful for we to join!

Getting Started With AngularJS