Code Clues: July 2014

Wednesday 23 July 2014

Angular JS - Expression and directives

Expressions are used in Angular JS for outputting html. Expression are written inside double curly braces. " {{ expression }}". Directives are used to extend HTML with new attributes, the directives are prefixed by "ng-".

Example 1 - Using expressions:

<div ng-app="" ng-init="quantity=3;cost=10;">

   <p>Total: {{quantity*cost}}</p>   

 <p>5 + 5 is {{ 5+5 }}</p> 

 <p>'K' + 'ing' is {{'K'+'ing'}}</p>

  </div>

AngularJS views blend information from the model into a HTML layout. You utilize AngularJS directives to define AnguluarJS how to blend the information into the HTML format. This content will cover the most regularly utilized AngularJS directives.

Interpolation Directive

The interpolation directive standout among the most basic directives in AngujarJS. The interpolation directive embeds the output of an expression into the HTML layout. You check where to embed the expression making use of the {{ }} symbols.


<div ng-controller="HelloController" >

      <span>{{helloData.msgfun()}}</span>

</div>

helloData.msgfun() function on the model object.

There is one alternative for the interpolation called ng-bind. It uses 'ng-bind' attribute to the html were the data to be inserted. For example, considering the above case:

<div ng-controller="HelloController" >
<span ng-bind="helloData.msgfun()"></span>
</div>

Some may feels like using innerHTML in JavaScript.

There are lots more directives available in Angular JS to get familiar with in my upcoming posts.

Hope you are ok with the example. Your feedback is always accepted. Many thanks.

Getting started with Angular JS

Angular JS follows MVC pattern, it has got attention among developers due to its amazing templating system, and development practices used. MVC means model, view, controller. Views are specified using HTML and Angular JS own templating language.This framework is capable of accepting user actions, events and to find out which template to refresh. Javascript functions and objects constitute models and controllers of this framework.

Angular JS has got one important feature called, "dependency injection (DI)". This inbuilt feature enables us to develop web apps from smaller, thoroughly tested services. Well lets get started with a simple hello world program just like we begin all programming languages. Sample code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="helloWorldApp">
 <div ng-controller="HelloController" >
     <h2>Hello {{myData.message}} !</h2>
 </div>
<script>
angular.module("helloWorldApp", [])
    .controller("HelloController", function($scope) {
        $scope.myData = {};
        $scope.myData.message = "World, AngularJS";
    } );
</script>
</body>
</html>

I guess you have find the code simple, let have a break down of above code snippet.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

Above is the line of code to include Angular JS library, you can eiter use CDN or download it in your local system.

If we want a HTML page to a Angular JS application we need to include "ng-app", so it can be recognized as AJS application.
ng-app="helloWorldApp"

There is also a attribute called "ng-init" for initializing model befor html gets rendered, in the above method we have used controllers a better way to do so.

ng-controller="HelloController", used for assinging controller to be used for this app.

{{ myData.message }} the double curly brackets expression is used for outputting model values.

angular.module("helloWorldApp", []): this is the way of defining module in Angular js.

Hope you find this article useful, if any queries please ask. In the next article we will be discussing about various expressions and directives in Angular JS.

Tuesday 22 July 2014

Angular JS - Introduction

AngularJS is a client-side MVC framework written in JavaScript developed by Google. Angular JS is most suited in developing single page web applications. It is a general purpose framework that makes easier to develop RIA web applications.

You can get Angular JS from, http://angularjs.org/

Lets have a look at sample program in Angular JS,

<!DOCTYPE html>

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-init="title = 'World'">>

 <h2>Hello, {{ title }}!</h2>

</body>

</html>

Hope you had good introduction to AJS, you can find more detailed explanation about the topic from next article "Getting started with Angular JS". If any queries please comment.

Create CSV file and download using Codeigniter

The 'dbutil' class of codeigniter is used for creating csv file, so you need to load this class first,

$this->load->dbutil();

In this example we going to create a csv file from database table. Please check out the code snippet below.

public function createCsvDownload()
 {
  $this->load->dbutil();
  $query = $this->db->query("SELECT * FROM table_name"); 
  $delimiter = ",";
  $newline = "\r\n";
  $data= $this->dbutil->csv_from_result($query, $delimiter, $newline);
  
  header('Content-Description: File Transfer');
  header('Content-Type: text/csv');
  header('Content-Disposition: attachment; filename=csv_file.csv');
  header('Expires: 0');
  header('Cache-Control: must-revalidate');
  header('Pragma: public');
  header('Content-Transfer-encoding: binary');
  
  echo $data;
  
  flush();
  exit;  
 }

Pages