AngularJS + NodeJS + Yoeman + Bower + Grunt

Here comes to new experience with frontend development! AngularJS provide very detail tutorial in setup but I still having error in running npm install. The first step is always difficult as we are fresh and know nothing of it.

But no worry, let's get it clear what is AngularJS before we start to use it!

What is AngularJS?

1. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.

Then get a basic idea from http://www.w3schools.com/angular where they show you AJS directive is are HTML attribute with an ng prefix and some example of AJS expression and AJS controller. Trust me that http://www.w3schools.com/ really provide good tutorial for beginner. After understand the basic syntax, we won't feel like looking at alien code anymore. :D

What is NodeJS and npm?

1. Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
2. npm is a package manager for JavaScript, and is the default for Node.js. As of Node.js version 0.6.3, npm is bundled and installed automatically with the environment. npm runs through the command line and manages dependencies for an application.

Step by step setup AngularJS workplace:

1. Get your workplace ready with git, and node installed.
1. Install GIT to your workplace if you haven't install.
2. Open Git Shell and check availability of node, npm via the following command:
• node --version
• npm --version
2. Click HERE to redirect you to to node installer website, download and run the application.
3. Now you're able to start with the AngularJS tutorial from https://docs.angularjs.org/tutorial.

Who is Yeoman?

He is your computer man who live in npm package repository, sound lovely yea. Yeoman actually is web's scaffolding tools for modern webapps. The lovely part is with one or two command, Yeoman can write entire boilerplate code for your entire web application.

How to install Yeoman?
npm install -g yo


Yeoman also work with other tools -> grunt, gulp, bower for improving your productivity.
Next, go thru this tutorial to learn how to instruct your yeoman to work for you. ^^ VOla!

p/s: There might be blocker while install you run grunt serve, here is some helpful guideline:

1. npm install -g generator-angular 
2. yo angular 
3. bower install angular-ui 
4. npm install grunt-contrib-compass 
5. reinstall ruby gem installer (http://rubyinstaller.org/downloads/) with checked all checkbox 
6. on ruby console - gem install sass 
7. on ruby console - gem install compass 
8. grunt test 
9. grunt serve 
10. grunt 

Other Good Reference Website:
https://docs.angularjs.org/tutorial
http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
http://www.ng-newsletter.com/posts/directives.html

Yii2: How to Handle Fatal Error.

Fatal error happen when your program process over the php memory limit, or longer process time. It will cause your program to abort or stop the existing process. Without proper handle this issue, the page might look unprofessional.

Here is the tutorial:

Step 1. Prepare file (lib/error.handler.php) with the following code:

function fatalErrorHandler()
{
  // Where yii_log function located
  require_once( __DIR__.DIRECTORY_SEPARATOR.'backend.lib.php'); 
  
  //to get last error message
  $error = error_get_last(); 

  // To track fatal run-time errors
  If ($error['type'] == E_ERROR){

    // to log error note and send email alert.
    yii_log($error, 'error'); 

    // temporary key for jquery to validate 
    echo '<div style="display:none" id="fatal-error">true</div>'; 
     }
   }

  register_shutdown_function('fatalErrorHandler');

Step 2. Include the following code in (config/web.php and config/console.php)

include_once(dirname(__FILE__).DIRECTORY_SEPARATOR.'../lib/error.handler.php');

Step 3. Prepare file (lib/backend.lib.php) with the following code:

function yii_log($message, $level, $exit = FALSE) {
  $message = is_array($message) ? $message['message'] : $message;
  $message = date('Y-m-d H:i:s', time()). ' ' . substr((string)microtime(), 1, 8) . ' - ' . $message;
  switch (strtolower($level)) {
    case 'error':
      Yii::error($message);
      break;
    case 'warning':
      Yii::warning($message);
      break;      
    case 'info':
      Yii::info($message);
      break;
    case 'trace':
    default:
      Yii::trace($message);
      break;
  }
  // Yii::log($message, $level);
  Yii::getLogger()->flush();

  // also alert via email
  send_email_alert($message);
  if($exit) {
    exit();
  }
}

function send_email_alert($message) {
  $from = get_no_reply_email();
  $sendTo = get_alert_email();
  $app_name = Yii::$app->name;

  $headers="From: {$from}\r\nReply-To: {$from}";
  mail($sendTo, $app_name . ' Alert', $message, $headers);

}

Step 4. Prepare Ajax file (check_error.js) checking

$(document).ready(function() {
if ($("#fatal-error").length) {
    //$("upload-csv-form").before('

File: '+decodeURIComponent(getCookie('csvfile')).match(/"(.+)"/)[1]+' import was failed!
');
    var filename = decodeURIComponent(getCookie('csvfile')).match(/"(.+)"/)[1];
    var postData = { csvfile: filename};
    if (typeof yii.getCsrfToken != 'undefined' && yii.getCsrfToken() != '' )
    {
      postData[yii.getCsrfParam()] = yii.getCsrfToken();
    }
    $.ajax({
        url: '/member/updatestatus',
        data: postData,
        type: 'POST',
        dataType: 'jason',
        success: function(){
        }
     });
    $("pre").replaceWith('
Importing of '+filename+' did not complete successfully because of a server side error (no memory, performance issues or connection issues).
');
  }
});

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }

Step 5. Register js file in view file

$this->registerJsFile($this->getAssetManager()->getPublishedUrl('@app/themes/dashboard').'/js/check_error.js', ['position' => $this::POS_END]);