css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged angular

A 'Hello, World!' in AngularJS

AngularJS Workshop

This started out as a lesson plan for my 3rd Year Undergraduate students, so I've cut out a bit of the 'introductory' stuff on the assumption that if you're here...

Why Developers Should Be Excited About Famo.us

I've been going to meetups and talking with Developers about frameworks they use and often when I remark that we chose Famo.us/Angular to develop our web app at Mediahound, Inc. I often get a...

Using Animated GIFs to Debug Complex DOM Changes

With web sites/apps becoming more and more dynamic on the front-end, it can be difficult to see exactly what modifications JavaScript is making to elements in the DOM.

To help, I've taken the...

AngularJS How to create a custom form input and custom validations with a Directive.

AngularJS

How to create a custom form input and custom validations with a Directive.


Some times ago someone asked me to implement a date selector with 3 select inputs instead of a date input.

I...

Angular vs Backbone

Angular vs Backbone

Community Health

Why Does Community Matter?

Community is one of the most important factors to consider when choosing a framework. A large community means more questions...

Over the transcluded hump... now time for services

I can't include the project but I finally got over rebuilding the web application to be modular and uses isolated scopes on all items. Thank you Angular.js

AngularJS page transitions and loading techniques

A typical application of smooth transitions is navigation between pages of your webapp.

In this article we will implement a typical master/detail movie search application that applies transitions...

Angular HelpMe Component

Angular HelpMe Component


In this post I am going to discuss about requirements and my design decisions for creating a reusable angular component, angular-help-me.

You can find the implementation...

Objectangular

Abstract

Here I show how to use AngularJS the non angular way.

Prologue

For a while I've been building an angular SPA based on 1.3.X. Most of the time I've spent on the project is actually...

Angular JS Learning Index

All content is based on my knowledge and content found while googling data.

Points Need to cover while learning Angular JS

What is Angular JS and why we use it ?

How angular JS works [Digest...

Getting Started with AngularJS

Angular Who?

Good question, the plan is to figure out what Angular is and how it works through a series of pens that follow my learning; before each one I gave myself a little challenge which you...

More AngularJS Pens

Preface...

This is an ongoing series on Angular.js where you can learn by following a series of code samples and my own learning curve, before each one I gave myself a little challenge which you...

Let's try Angular Material

Angular Material

Preface:

As part of my series on learning Angular, I am checking out Angular Material, a cool library for implementing Googles Material Design with Angular, come along and check it...

The Iron Yard - Weeks 6 - 8 Review

Breathe. The breakneck weeks are coming to an end and the relative calm is near. For me at least. The past few weeks have seen a lot of new content, some exciting projects, and a great field trip...

Extending an Angular 1.5.x DDO (Directive Definition Object)

Many 3rd party libraries exist for providing various functionality for Angular, but sometimes these libraries do not fit specific use cases that arise -- one such instance is using Angular...

Developing PWA Simultaneously with iOS/Android App

Goal

I want to develop an e-learning platform and make it available as

Progressive Web App (PWA) for its discoverability and that its available on the web, I also foresee that it might become an...

Use Karma (Angular JS test driven architecture)

Hello This is Karma

Steps to utilize Karma:

First install Karma at universal location cmd C:\Users\userID\Documents\GitHub>

cmd > npm install karma --save-dev

cmd > npm install...

angular

this is angular demo code

Angular in

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-root',

templateUrl:...

Angular json

create src/assets/db/clients.json

//add html button

Fetch people

{{ clients.name }}

//add to add.component.ts added OnInit to Component import import { ClientService } from...

Angular Material

//install material, animation, hammer, cdk

//create my.module.ts

* import { NgModule } from '@angular/core';

* import { CommonModule } from '@angular/common';

* import {...

color change

import { Component, OnInit } from '@angular/core';

import { trigger, state, style, animate, transition} from '@angular/animations';

@Component({ selector:...

Maintain (per environment) config.json and load before your Angular components and services load

For modern Angular projects (version 2+), you need to maintain a config.json file per every environment: dev, staging or production.

If you normally import or require this file in your...

Spread and Rest ... but don't get too comfortable.

Just when I was getting comfortable with JS and TS, I run across something I have never seen before..

  let someChild = {children:[{id:1},{id:2}]} let someObject =...

Angular Universal when you’ve huge amout of data

Since you’re here, I’m sure you’re using angular universal for SEO support, but are you using it in a website where you have a huge amount of data to render on the page ? If your answer is Yes, You...