Topics Search

AngularJS

Home » AngularJS (220)
  • Page 1 of 11
  • »
 

AngularJS Tutorial: Introduction to AngularJS Scopes

AngularJS Tutorial: Introduction to AngularJS Scopes Icon
By adding the ng-app directive to some HTML tag we specify that an AngularJS will be created and in the process of application creation Angular creates the so-called root scope. Some other directives such as ng-controller create a child scope. To visualize scopes one can use a Google Chrome extension called Batarang. The picture below shows the root scope for the AngularJS application and the child scope created by HelloController, which contains a single variable myModel.
 
Advertisement:
 

AngularJS Controller As Syntax

AngularJS Controller As Syntax Icon
In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem: the so-called Controller As syntax introduced by AngularJS 1.2 and .component() method introduced by AngularJS 1.5. The latter option is a recommended way to go if you are thinking about upgrading your application to newer Angular versions. In this post we’ll talk about AngularJS Controller As syntax.
 

Angular 2+ Classes with NgClass and NgStyle

Angular 2+ Classes with NgClass and NgStyle Icon
In this blog post, I will be we'll be learning about NgClass and NgStyle in Angular v2.x. Throughout this blog post, Angular means Angular version greater than 2.x unless stated otherwise. Creating dynamic styles in web applications can be a real pain. Luckily with Angular, we have multiple ways to create dynamic stylings to our application.
 

Angular ngFor, <template> and the compiler

Angular ngFor, <template> and the compiler Icon
Angular ngFor is a built-in Directive that allows us to iterate over a collection. This collection is typically an array, however can be “array-like”. To demonstrate this, we’ll be using Rx.Observable.of() to initialise our collection with an Observable instead of a static array. We’ll also be exploring some other under-the-hood properties of ngFor, as well as looking at how Angular expands our ngFor to a <template> element and composes our view.
 

Build a Music Player with Angular & Electron II : Making the UI

Build a Music Player with Angular & Electron II : Making the UI Icon
Based on the Angular Style Guide, we will structure our app in a manner that every presentation component is going to be in a folder. This folder will also contain the component's HTML and CSS files. Starting from the app directory, our app structure should look like the following:
 

A deep dive on Angular decorators

A deep dive on Angular decorators Icon
When I was first introduced to TypeScript and decorators, I wondered why we needed them at all, but once you dig a little deeper you can understand the benefits to creating decorators (not only for use in Angular). Angular 1.x didn’t use decorators, opting for a different registration method - such as defining a component for example with the .component() method. So why has Angular 2+ chose to use them? Let’s explore.
 

How to Use a JavaScript DataTable in an Angular Application

How to Use a JavaScript DataTable in an Angular Application Icon
There are several data table widgets for Angular, but none of them matched our project’s needs. I’m sure that’s simply a matter of time. Angular2 is young, and the third-party libraries are even younger. They simply didn’t have enough time to accumulate features and maturity. So why don’t we use one of the seasoned JavaScript data tables?
 

AngularJS, Angular-UI Router Hello World Starter App

AngularJS, Angular-UI Router Hello World Starter App Icon
This article represents code samples to get started with an AngularJS app with Angular UI-Router and Bootstrap. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
 

Should you learn Angular 1.x or 2?

Should you learn Angular 1.x or 2? Icon
A question that I’m frequently asked, “should I learn Angular 1 or 2?”. I hope this post offers some insight, help and guidance into answering that question for you. No one can answer it directly, because it’s specific to yourself, so here are some thoughts.
 

Ng-change example in AngularJS

Ng-change example in AngularJS Icon
ng-change event directive is fired when there is change in the input value or in other words whenever your HTML element changes ng-change is triggered. Lets see this event directive in action with some simple examples.
 

Get Angular 1 Features in Angular 2

Get Angular 1 Features in Angular 2 Icon
Quickly learn how to implement common Angular 1 app features in Angular 2! So how can we decrease the learning curve when transitioning from Angular 1 to Angular 2?
 

Ng-keydown, ng-keyup, ng-keypress example in angularjs

Ng-keydown, ng-keyup, ng-keypress example in angularjs Icon
keypress(): Event fired when a key is pressed on the keyboard From the above definiton both keydown and keypress events look alike, but actually they are not. Keypress event wont work for SHIFT, CTRL and ALT keys. But keydown event will work for all keys. Lets see all these events with example to better understand
 

ng-focus example

ng-focus example Icon
ng-focus directive executes when an element gets focus. This can be used in many different ways and below I have represented few of the examples.
 

ng-copy, ng-cut, ng-paste example

ng-copy, ng-cut, ng-paste example Icon
ng-copy, ng-cut, ng-paste are some basic AngularJS events used to perform copy (Ctrl + C), paste (Ctrl + V) and cut (Ctrl + X) action that we perform using keyboards. Lets see them with some example.
 

Dynamic page titles in Angular 2 with router events

Dynamic page titles in Angular 2 with router events Icon
Updating page titles in Angular 1.x was a little problematic and typically was done via a global $rootScope property that listened for route change events to fetch the current route and map across a static page title. In Angular 2, the solution is far easier as it provides a single API, however we can actually tie this API into route change events to dynamically update the page titles.
 

Updating Angular 2 Forms with patchValue or setValue

Updating Angular 2 Forms with patchValue or setValue Icon
Setting model values in Angular 2 can be done in a few different ways, however with reactive forms things are extremely easy to do with the new form APIs. In this post we’ll dig a little deeper as to the differences between patchValue and setValue in Angular 2 forms.
 

Reactive FormGroup validation with AbstractControl in Angular 2

Reactive FormGroup validation with AbstractControl in Angular 2 Icon
Validation in Angular 2, various approaches, various APIs to use. We’re going to use AbstractControl to learn how to validate a particular FormGroup. I covered FormGroup, FormControl and FormBuilder in my previous reactives form fundamentals article - which I’d recommend checking out before this one if you’re new to Angular 2 forms.
 

The Ultimate Angular CLI Reference Guide

The Ultimate Angular CLI Reference Guide Icon
In this article we have a look at what Angular CLI is, what it can do for you, and how it performs some of its magic behind the scenes. Even if you already use Angular CLI, this article can serve as a reference to better understand its inner workings. Technically you are not required to use Angular CLI to develop an Angular 2 application, but its many features can highly improve the quality of your code and save you a lot of time along the way.
 

A Guide to Building Quality Angular 1.5 Components

A Guide to Building Quality Angular 1.5 Components Icon
In this article, we’re going to dig into the design of components and how to put them to use inside of your applications. If you haven’t already started to use components in Angular 1, you can read about their syntax and design in one of our recent tutorials. My goal is to outline some best practices that will improve the quality of your application.
 

AngularJS setup in Eclipse

AngularJS setup in Eclipse Icon
So we know how to setup AngularJS environment in your PC. But we always can't write code in notepad. How about trying this in Eclipse IDE. Ok, let see how to setup AngularJS in Eclipse IDE.
Home » AngularJS (220)
  • Page 1 of 11
  • »