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.
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.
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 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.
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:
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.
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.
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 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.
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?
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 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 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.
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.
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.
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.
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.
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.
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.