Tag Archives: angularjs
AngularJS – 10 Best Practices to Create Custom Directives
This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is listed the best practices for creating custom directives: Naming Convention: Prefer using two or three letter prefix (except ng) while naming directives to avoid collision with future HTML releases. Using “ng” as prefix might collide with AngularJS OOTB directives in future. Directive Definition Object (DDO): Prefer returning DDO rather than a function. TemplateUrl Usage: Prefer storing HTML template code in a seperate file and assign the path to templateUrl variable. Attribute …
AngularJS – Non-nested Directive-to-Directive Communication – Code Example
This article presents concepts and code example around non-nested directives-to-directives communication in AngularJS. The demo for the code example presented later in this article can be accessed on this page, Demo – Non-nested Directives-to-Directives Communication. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: What is Directive-to-Directive Communication? Service Helps Directives Communicate Code Example – Non-nested Directives Communication What is Directive-to-Directive Communication? When the change in one or more attributes of one directive need to trigger one or more events in other directives resulting in updating of their …
AngularJS QuizApp Framework on Github
This article describes the QuizApp web application written with AngularJS & Bootstrap that I open-sourced it today on GitHub. Here is the link for the QuizApp Project Homepage for you to get started. I have made use of this app in my other website, Free Online Tests and trust me, creating quizzes is so very smooth experience. The primary reason why I decided to make it open-source is the fact that there are several requests that I received in the past for posting the source code. However, as I created the app for my personal usage, I went ahead and modified it suitably for easy re-use. Please feel free to suggest …
AngularJS – Why & How to Create Custom Module
This article represents key concepts and code samples on why and how to create a custom module with AngularJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Why create a custom module? How to create a custom module? Why Create A Custom Module? A module in AngularJS wires together some of the following components: Controllers Directives Filters Service In simple words, a module could also be thought of as container of above components. As per the design, if there is a need to bundle together …
AngularJS – How to Create a Custom Filter – Code Example
This article represents high level concepts and code sample/example for how to create a custom filter. The demo for the code example given below could be found on this following page: How to Create A Custom Filter. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Key aspects of creating a custom filter Code Samples – Custom Filter Key Aspects of Creating Custom Filter Following are some of the key aspects that one needs to pay attention to, while creating a custom filter: To create a new filter, …
AngularJS Directives Hello World – Code Example
This article represents high level concepts and code examples on how to create a custom directive. For detailed documentation, one could access AngularJS page on custom directive. You could check out live demo of the code example in this article on http://hello-angularjs.appspot.com/angularjs-directives-hello-world Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Key aspects of Directive Code Examples – Directives Hello World Key Aspects of Directive The directive discussed in the blog is following: <hello name=”Calvin Hobbes”></hello> Following are some of the key aspects: Define directive. In this …
Ionic Framework – Different Ways to Create List
This article represents code samples and tips to create list items in hybrid apps created using Ionic framework. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key techniques described later in this article: List items created using AngularJS custom directive, Ion-List (Recommended way) List items created using ul element List items created using div The code sample below demonstrate how URLs with its name and hyperlink is stored as array in AngularJS scope and later accessed in the view with ng-repeat directive. .controller(‘HelloCtrl’, [‘$scope’, function($scope){ $scope.urls = [{‘name’:’Gmail’,’url’:’http://www.gmail.com’}, {‘name’:’Yahoo Mail’, ‘url’:’http://mail.yahoo.com’}, {‘name’:’Hotmail’, ‘url’:’http://www.hotmail.com’}]; }]) …
Sublime – AngularJS – Useful Auto-complete Snippets
This article presents code samples and instructions to configure your Sublime editor to include ng (angular) scripts in auto-complete fashion. I found it important to get quickly started with my new angular apps. Based on following, you could define custom autocomplete snippets for all angular scripts. Following are the steps to create snippet file for each angularjs script: In Sublime Text Editor, go to Tools > New Snippet. A new untitled file consisting of following code would open: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!– Optional: Set a tabTrigger to define how to trigger the snippet –> <!– <tabTrigger>hello</tabTrigger> –> <!– Optional: Set a scope to limit …
AngularJS – How to Code Quickly with Sublime Text Editor
After working on AngularJS for sometime now, I was looking for an editor which helps to code efficiently and effectively with AngularJS. This is when I discovered Sublime Text Editor. This article presents tips on what needs to be done to write AngularJS code with Sublime Text Editor. I have to confess that it has been a fulfilling experience to code in AngularJS with Sublime once installation and configuration is done. I was able to complete my AngularJS hello world program within few minutes. Trust me, it is worth your time. Let me know what you think about it. Do the following and enjoy the Angular ride much more than ever: …
Cordova Hello World with AngularJS & Bootstrap
The article presents a quick code sample to get started with Cordova or PhoneGap and AngularJS and Bootstrap CSS framework.Interesting thing to note is that the development can be be same as if you are developing an AngularJS & Bootstrap Web app. This is inline with PhoneGap or Cordova being used to create a Hybrid mobile app. Following are simple steps to get started: Create a HelloWorld app with Cordova or Phonegap. Take a look at our previous article on how to get started with Cordova Hello World app. Once setup, what you have got is www/index.html where you could put your Bootstrap CSS path and AngularJS path. As like …
AngularJS – How to Pass Parameters to Controllers on Initialization
The article presents quick concepts and code samples on how one could pass the parameters to the controller during bootstrapping process. Feel free to comment/suggest. Usecase: Edit Page to Populate Data Retrieved from Server I came across a use case where I had to edit an existing object. Thus, I was required to populate the input fields with the existing value. When I tried to do in the usual manner which is like retrieving the object from the server and updating each of the input fields with the right value, it didn’t work out. The input fields were not getting the value retrieved from the server. This is primarily because …
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? …
I found it very helpful. However the differences are not too understandable for me