Category: Angularjs

17 Sep by vichu Tags: , , ,

ToDo List Application using AngularJS

Reading Time: 6 minutesHere we go! A simple “ToDo List” application in Angularjs. This tutorial mainly concentrate forĀ beginners in AngularJS. Here we go!! Here is a video tutorial for that. It has first demo alone for second demo please read the blog. šŸ™‚ This is the full application which we gonnaĀ develop. Lets start understanding like how to build […]
16 Sep by vichu Tags: , , , ,

AngularJS Services (Service VS Controllers)

Until now, we have dealt with data-binding in AngularJS. We have seen how to take data from our controllers and get it into the UI, and ensure that whenever the user interacts with or types in any data, we get it back into our controllers. We used and worked with some common directives, and dealt with forms and error handling. In this blog, we dive into AngularJS services. By the end of the next few blogs, we will have a thorough understanding of AngularJS services and get some hands-on experience in using core built-in AngularJS services. After that, we will learn why and when we should create AngularJS services, and actually create a simple service ourselves.

AngularJS Services

AngularJS services are functions or objects that can hold behavior or state across our application. Each AngularJS service is instantiated only once, so each part of our application gets access to the same instance of the AngularJS service. Repeated behavior, shared state, caches, factories, etc. are all functionality that can be implemented using AngularJS services. Letā€™s first take a look at why we need them.
15 Sep by vichu Tags: , ,

Quiz App using AngularJS

Reading Time: 8 minutesQuiz AppĀ tutorial is not an introduction to AngularJS but to demonstrate how quickly one can build a simple well-structured web application. This is targeted towards people who are already familiar with the basics of AngularJS. The app will have a very simple structure ā€“ a single page app, one question at a time on the […]
13 Sep by vichu

Displaying Error messages and Styling Forms

Reading Time: 7 minutesDisplaying Error Messages What can we do with all these validators? We can of course check the validity of the form, and disable the Save or Update button accordingly. But we also want to tell the user what went wrong and how to fix it. AngularJS offers two things to solve this problem: A model […]
11 Sep by vichu Tags: ,

Introduction to Form Validation and States

Reading Time: 4 minutesIn the previous blog I asked you to create a simple form. I received more mails that gives me some pleasure to start this new form validation post (Review is in progress. Will publish the best one soon). Thus We have seen how to create forms, and enable (and leverage) data-binding to get our data […]
9 Sep by vichu Tags: , , ,

Working with ng-model

Reading Time: 5 minutesIn the previous blog, we saw the ng-bind directive, or its equivalent double-curly {{ }} notation, which allowed us to take the data from our controllers and display it in the UI. That gives us our one-way data-binding, which is powerful in its own regard. But most applications we develop also have user interaction, and […]
8 Sep by vichu Tags: ,

What is Unit Testing and Why in Angularjs?

Reading Time: 4 minutesUnit testing is the concept of taking a single function or part of our code, and writing assertions and tests to ensure that it works as intended. While very common on the server side, we often find the habit of writing unit tests amiss when developing clientside applications. Here are five reasons why we should […]
7 Sep by vichu

Working with ng-repeat (PART 2)

Reading Time: 5 minutesTrack by ID By default, ng-repeat creates a new DOM element for each value in the array or object that we iterate over. But to optimize performance, it caches or reuses DOM elements if the objects are exactly the same, according to the hash of the object (calculated by AngularJS). In some cases, we might […]
6 Sep by vichu Tags: ,

Working with ng-repeat (PART 1)

Reading Time: 3 minutesThe ng-repeat directive is one of the most versatile directives in AngularJS, and can beĀ used for a whole variety of situations and requirements. We saw how we can use it toĀ repeat an array in the previous examples. In this section, we will explore some of theĀ other options we have when using the ng-repeat directive. I […]
4 Sep by vichu Tags: , ,

Working with Arrays in AngularJS

We have seen how to create a controller, and how to get data from the controller into the HTML. But we worked with very simplistic string messages. Letā€™s now take a look at how we would work with a collection of data; for example: [codepen_embed height="265" theme_id="0" slug_hash="kkYWOY" default_tab="html,result" user="vishal_srini"]See the Pen <a href='http://codepen.io/vishal_srini/pen/kkYWOY/'>Displaying arrays</a> by Vishal Srinivasan (<a href='http://codepen.io/vishal_srini'>@vishal_srini</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed] We introduced a few new concepts in this example. Before we delve into those, Codepen Demo shows how the HTML and JS would look when we run it. ng-repeat example in codepen.Ā First things first, we removed the message variable and introduced an array of JSON objects in our MainCtrl. We exposed this on the controller instance with the name notes.