Author: Ali Shirzad

Angular JS & Single Page Application Part 1

In this tutorial we going to start an Angular JS Application from scratch. This tutorial is aimed for beginners so we going to start from the very beginning. If you don’t know what is Angular JS please read my previous tutorial here to learn the basic concept of Angular JS and who should learn it. We start with the first setup for our project. To do this open a terminal and create a new directory and call it Contacts Project. >> cd Documents >> mkdir Contacts Project Now I’m going to assume that you already have installed Node.js and Bower. These are standard tools in web development now days so I assume you are familiar with these. If not please visit the following website and install both. https://nodejs.org www.bower.io Node allows us to run standard JavaScript on server-side and the node itself is partially written in JavaScript, which makes it really easy to integrate with angular JS. Installing Node.js will install the npm package manager that is used for backend and server-side packages and libraries. Bower is a package manager for front-end libraries and utility applications like Angular or Bootstrap that we will use for our application today. So now cd to contacts folder and lets install necessary packages and libraries for our project. First we are going to install Express JS. Express is a great server-side framework that...

Read More

Introduction to Angular JS & Single Page Application for beginners

This tutorial is the first in a series of tutorial about Angular JS as a powerful JavaScript Framework. Let’s talk about what Angular JS is. Angular JS is a JavaScript framework for creating single page applications. When you hear about it, the concept seems too complex, however if you already familiar with Modal View Controller (MVC) application frameworks it is very easy to learn Angular JS. Let’s see what are of the main concepts behind Angular JS is. First of all Angular JS is a framework, that is to create an application you follow a set of standard methods and utilize the code and libraries already provided by the framework and fast track your development by writing less codes. Angular JS offers templating, two-way bindings, filters and more. If you’re familiar with jQuery you will find Angular JS very easy and useful as they are very compatible to work together, in fact a lite version of jQuery is used within Angular. Angular JS is designed to allow programmers to create single page application which means regardless of the size of your application, browser will load a single page and additional content is loaded using Ajax or partial templates as needed which means faster loading. Angular JS has many features and advantages. Some of these features includes: Templating engine: The templating engine lets you write any html code as a...

Read More

Angular js app with PostgreSQL or MySQL using Sequelize js

Connecting your Angular JS app with PostgreSQL or MySQL Following previous tutorial on developing a simple AngularJS “ToDo” app now we want to connect our app to a database such as PostgreSQL or MySQL. Prerequisites If you don’t have any Angular JS app ready, simply follow this post to set up the basic structure of an Angular JS app. Before starting this tutorial please make sure you have your favorite database like PostgreSQL or MySQL setup and running on your PC or on a remote server to connect to. For this tutorial I am assuming you are familiar with node js and express js applications, if now read my previous posts to get started. Step 1: Installing Sequelize js Sequlize js is a ORM (Object-Relational-Mapper). The library is written entirely in JavaScript and can be easily used in the Node.JS environment. If you wondering why we are using Sequelize js, it is because it is one the best ORMs out there and if you’re developing very complex Node js app it will make your life much easier. 🙂 To install Sequelize js open any console application and navigate to your AngularJS application folder and type the following: For PostgreSQL database install: $ npm install sequelize $ npm install pg If you want to use MySQL install following: $ npm install sequelize $ npm install mysql Step 2: Creating Sequelize config file...

Read More

Codelobster PHP Edition (Free PHP IDE)

Free PHP, HTML, CSS, JavaScript editor (IDE) – Codelobster PHP Edition For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products for this purpose, but we would like to select free of charge very functional and at the same time of simple in the use editor – Codelobster PHP Edition . Let us consider some important possibilities and advantages of this program: All code highlights depending on a type, the also mixed code is thus supported, so the area of HTML will be highlighted as HTML, PHP as PHP,...

Read More

How to develop a simple AngularJS app using NodeJS

How to develop a simple ToDo app using AngularJS and Node.js Following previous tutorial on developing a responsive website using Node.js and Express Framework, we are going to integrate a simple AngularJS “ToDo” app with our existing project. Prerequisites Before continuing with this, make sure you have followed the previous tutorial and have set up your Node.js Project. Or simply download the source from nodeEclipseTutorial and open the project with your favourite Editor. First we need to include the AngularJS in Heading section. From project folder open  views -> header.ejs  file and replace the content with the following: <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <title><%= title %></title> <link rel='stylesheet' href='/css/stylesheet.css' /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <script src="https://code.jquery.com/jquery.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script> <script type="text/javascript" src="/js/todo.js"></script> <style type="text/css"> .done-true { text-decoration: line-through; color: grey; }</style> </head> Adding HTML elemements Next we need to add the required HTML elements including the AngularJS directive to the index.ejs file. From views folder open index.ejs file and replace everything with the following: <!DOCTYPE html> <html ng-app> <% include header %> <body> <% include navbar %> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>Todo</h1> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul...

Read More

File Transfer App

FileTransfer by TechPrd

Access your mobile files over WiFi