Author Archives: Ajitesh Kumar
ReactJS Tutorial – How to Add or Delete Table Row Dynamically
The article represents high-level concepts including component design and event delegation and, demo/code samples in relation with how to add or delete a table row dynamically. For AngularJS enthusiasts, it also presents quick differences and few similarities (so to say) as well. The UI is demonstrated on the following page: http://tuts-javascript.appspot.com/reactjs-add-remove-table-row. Feel free to comment/suggest on any aspects of the article including concepts and code samples. Following is how the design is laid out: CompanyApp: The app has a top-level component named as CompanyApp. This component is composed of following components: CompanyList: CompanyList component represents a list of companies and has code to render the same. Company: Company component represents the company …
Hello World with ReactJS – Code Example
This article represents code examples and high level concepts on React.js, a javascript library for building user interfaces, being developed by Facebook Engineers. The concepts shall be presented in detail in upcoming articles. Also, I would have to say that if you are a ReactJS expert and feel that there could be improvements with the code, please drop a line with suggestion and I shall update the article/code appropriately. The demo of the code samples could be found on this page. Before I go ahead and present some code samples, I have to make a mention that it was a little difficult to get started with React.js as I have …
AngularJS – Different Ways to Declare Controllers
The article represents various ways of declaring a controller along with code examples. Please feel free to comment/suggest if I have missed on any key aspects.Following are two different ways in which controllers can be declared: Using “as aliasName” in ng-controller. Example: ng-controller=”HelloCtrl as ctrl” Just the controller name. In this strategy, $scope object is bound to data and methods. Example: ng-controller=”HelloCtrl” Using “as aliasName” in ng-controller (Recommended Way) Using “as aliasName” specifier when defining the controller in ng-controller directive. The methods and properties can be bound on to the controller using “this” keyword. There are benefits of binding properties directly to the controller and thus, it is the …
Angularjs Custom Directives Tutorial – Quiz App Code Example
The article presents a tutorial on how to create custom directives, using a sample quiz app and code examples. The quiz app demonstration could be found on following pages. Please excuse me for typos, if found. Questions set 1 Questions set 2 Following will be discussed in this article: Introduction to quiz app and related custom directives Key directives concepts demonstrated with quiz app How to use these directives? Introduction to Quiz App & Related Custom Directives The objective behind the quiz app is to enable the quiz creators create quick quiz apps by focusing on questions and answers rather than dealing with nitty gritty of web development for …
AngularJS – How to Create a Custom Directive – Code Example
The article presents high level concepts and take away code sample on how to create custom directive in AngularJS. The code given below is demonstrated on this page, http://hello-angularjs.appspot.com/angularjs-how-create-custom-directives. Following are key concepts that shall be discussed in this article: What is a directive? Why do you need a directive? Code sample – Hello World Custom Directive What is a Directive? Simply speaking, a directive in AngularJS is all about extending (or attaching) the behavior of an existing element or creating a new element with altogether a new behavior satisfying the specific requirements of your app. From code perspective, directives are markers on a DOM element (such as an …
AngularJS Interview Questions – Set 4
The article represents another set of 10 interview questions primarily related with dependency injection. Following are another set of questions that have already been published earlier. Interview questions – Set 1 Interview questions – Set 2 Interview questions – Set 3 Question Set Question:Describe what happens when Angular compiler comes across “ng-controller” directive? Ans: As the Angular compiles the HTML and come across the “ng-controller” directive (e.g.,<body ng-controller=”HelloCtrl”>), it asks the injector to create an instance of controller and its dependencies. Injector then looks out for any mechanism that has been specified by the user for creating the controller. In order to specify how the controller (HelloCtrl in current example) …
AngularJS Interview Questions – Questions Set 3
The article represents the 3rd set of 10 interview questions. Following are previous two sets that have been published earlier on our website. Following are other sets that we recommend you to go through. Interview questions Set 1 Interview questions Set 2 Interview questions Set 3 Question Set Q1: Directives can be applied to which all element type? Ans: Following represents the element type and directive declaration style: `E` – Element name: “ `A` – Attribute (default): ` ` `C` – Class: ` ` `M` – Comment: “ Q2. What is notion of “isolate” scope object when creating a custom directive? How is it different from the normal scope object? …
How AngularJS Works – Explained with Angular Code
The article is first in the series of articles that are aimed to present the angularjs in a holistic perspective (by presenting angular code side-by-side) thereby representing How AngularJS works. While talking to various developers doing both, UI and server-side programming, one thing that came out as common is the fact that AngularJS has a deep learning curve. Keeping some of the issues/concerns shown by different classes of developers in relation with learning AngularJS, following are some of the areas that shall be explored in detail: Overall AngularJS initialization & rendering process AngularJS as a Dependency Injection framework Scope & key APIs Directives Lets look at first part in this article, e.g., …
Why AngularJS is Known to Have Steep Learning Curve?
The article presents my opinion on why AngularJS is popularly known as framework with a steep learning curve. After having spent so much time with AngularJS, where I wrote few Angular applications (one of them is http://function-point-analysis.appspot.com), and also deep dived into the AngularJS code, I ended up building a set of opinion on why at all is Angular said to have deep learning curve. Before going into the details, I must say that off-late both, server-side and UI programmers are found to be digging into the AngularJS land and both of them have consistently echoed about the toughness of land 🙂 at the surface level. Thinking about it, one could come …
AngularJS Interview Questions – Set 2
The article presents another set of 10 interview questions for you to try your understanding of AngularJS fundamentals. You may find some of them as tricky ones. Questions below primarily focus on angular application initialization process. Do note that I shall be coming up with multiple such set of questions in the near future as I swim deeper into Angular Sea. 🙂 Please feel free to suggest/comment if you disagree with any of the answers below. Question Set Can the angular application be initialized on only HTML element or ANY element? Ans: ANY element Can an HTML page have multiple “ng-app” directive for bootstrapping multiple AngularJS application? Ans: Yes With more …
AngularJS Bootstrap Single Page App Template – Code Sample
The article presents take-away code sample for quickly getting started with single page app using AngularJS and Bootstrap. For detailed instructions, we recommend you to take a look at some of the following blogs we wrote earlier: How to create single page application Creating Single Page Application with RESTful APIs and Spring MVC Following are key things to note: Routes defined for different views (pages) Container page where ng-view directive is placed in order to load different views Separate HTML page representing different views Unique controllers defined for each view (page) Container Page Copy and paste the code below in a new file and give a …
Hello World with KendoUI & AngularJS – Code Example
This article presents code samples and related concepts for what would it take for someone to get started with KendoUI and AngularJS. The code below is demonstrated on this page, http://hello-angularjs.appspot.com/kendoui-helloworld. Following will be discussed in this article: Key CSS/JS libraries from KendoUI and AngularJS AngularJS Code Representing Inclusion of Kendo.Directives Module Take away code to get started quickly Key CSS/JS KendoUI & AngularJS Libraries Following are important CSS/JS libraries that need to be included: kendo.common.min.css: This is KendoUI common CSS file that gets used across different themes. kendo.default.min.css (Web Themes): This represents default web theme for KendoUI. One could use some of the following available themes. All that …
Angular-UI Bootstrap Hello World Code Example
While working on several AngularJS tiny projects that are made live on my another website, I used Bootstrap to create good-looking UIs while eventing aspect was taken care by AngularJS. Then, I came across several pages on the web which talked about using great UI-widget based framework such as ExtJS, KendoUI for laying out quick & great looking UIs and use AngularJS as an eventing framework. This is where I also got introduced to Angular-UI project (http://angular-ui.github.io/). This is when I came to know AngularJS Bootstrap components which is written by Angular-UI team. The same could be found on following page: http://angular-ui.github.io/bootstrap/. As a demo, take a look at the …
AngularJS Hello World Unit Testing Code Example
The article intends to provide take away code to get started with unit testing while working with AngularJS. The underlying Javascript unit testing framework used for testing the AngularJS code sample is Jasmine. Controllers.js ControllersSpecs.js You may want to pay attention to some of the following facts in relation with unit testing vis-a-vis unit testing controller methods: Use AngularJS dependency injection feature to pass on dependencies to Angular components such as controller, filters, directives etc. Following code does the magic of injecting $rootScope and $controller which is also represented in the code samples later in this article. For rookies, following should be sufficient for cut-copy-paste to get started with unit …
Quick Reference to Jasmine – Javascript Unit Testing Framework
The article represents the fundamentals concepts and code samples around Jasmine, a popular Javascript unit testing framework.TO get started, download the framework from https://github.com/pivotal/jasmine/releases. For detailed examples, look at http://jasmine.github.io/edge/introduction.html. It All Starts with “describe” and “it” Function Blocks In Jasmine terminologies, a set of tests is collectively called as a “suite”. The test suite is defined using “describe” function block. Each test is called as a “spec” and defined using “it” function block. A test suite can have multiple test specs and also, test suites. This implies that a “describe” function block can have multiple “it” function blocks and also, “describe” function blocks contained within. One of the key …
AngularJS – Single Page App with RESTful APIs & Spring MVC
The article presents recipe to create single page application with AngularJS & Spring MVC where different pages are required to do transactions with server using RESTful API. The demonstration is created on this page, http://hello-angularjs.appspot.com/angularjs-single-page-app-restful-apis. Code samples and related concepts are presented for following requirements of single page app: Initially one page is loaded with side navigation. Clicking on side navigation loads new view (data) from server by consuming RESTful API using ngResource, $resource service with “query” action method Clicking on individual items link loads the related data from server, again by consuming RESTful API using ngResource, $resource service with “get” action method Submitting a set of data consumes a …
I found it very helpful. However the differences are not too understandable for me