Author: Ali Shirzad

Getting Started With Angular 4 & Angular CLI

Today we are going to learn how to use Angular CLI to bootstrap a simple Angular JS application. Angular CLI can make it very easy to create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.   Let’s learn how to get started with Angular 4 & Angular CLI First make sure you have installed least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.   Then install Angular CLI globally using: npm install -g @angular/cli Generate your Project Generating an project is very easy...

Read More

kotlin node.js seed project

Kotlin Node.js Seed Project This project is an application skeleton for a typical Node.js app written entirely with Kotlin. Node.js app written with Kotlin https://github.com/techprd/kotlin_node_js_seed Full Tutorial coming soon What’s in this project? express.js to run server ejs templating engine for express.js Kotlin Dependencies gradle to compile/transcompile kotlin to js How to Use: Install Node dependencies $ npm install Compile Kotlin to JS using gradle $ ./gradlew build Run Server $ node ./server/app.js Kotlin official site...

Read More

Angular JS single page application part 3

Continuing from part 2 of making a contact list as a Angular JS application, we need to save information in a database, we can use a REST API to store all our contacts. The way angular interacts with REST API and database is though Angular Resource. So first we need to create the REST API on the backend to be consumed by our Angular Resource that uses this backend. We are going to use a MongoDB database to store our data. First we are going to install mongoose npm plugin to interact with our MongoDB database. npm install mongoose --save Also we need body-parser plugin for handling HTTP get or post requests. npm install body-parser --save REST API using Node and Express js We begin by adding a new file under root directory of our app; we are going to put our REST API in a different file. Create a new file and names it api.js. First add required dependencies to the file. var express = require('express'), mongoose = require('mongoose'), bodyParser = require('body-parser'), router = express.Router(); mongoose.connect('mongodb://localhost:27017/contacts'); As you can see we are again using express and express.Router feature. Next we create a database table schema named Contacts and check if the database table is empty then populate it with some data: // create a model for a contact var Contact = mongoose.model('Contact', {userId: String, firstName: String, lastName: String}); // populate schema if...

Read More

angular js single page application part 2

Continuing our project from part 1, before create more features for this Angular application we need to make some application configurations such as routings. Angular routing comes in a separate package, so lets install this first: Bower install angular-route With that install add the new script tag into your main.html file. <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" /> We need to update the app.js file to use the new angular route functionality. Make the following changes in the app.js file: angular.module('contactsApp',['ngRoute']) .config(function($routeProvider, $locationProvider){ $routeProvider .when('/contacts', { controller: 'ListController', templateUrl: 'views/list.html' }); $locationProvider.html5Mode(true); }); Looking at the code you can see that we use ‘ngRoute’ as one of the dependencies tell angular that we loaded Angular Route js file and use it. Then we have our configuration block as config function. This is where we setup different routes that the application going to accept and respond. The config function takes couple of parameters, here we use $routeProvider and $locationProvider for now. After that we are using the $routeProvider to setup that when the browser calls “/contacts” from URL the application will responds by sending the list.html file and control the content of the html file dynamically as it passed through the controller function that here we called “ListController”. Next update the main.html file to add a place to render the list.html file, in other words you can view the main.html file as the main...

Read More

File Transfer App

FileTransfer by TechPrd

Access your mobile files over WiFi