Tag Archives: javascript

AngularJS vs Angular

Introduction

Probably, for most of front-end developers, Angular is a well known framework made for building web applications. If we want to use Angular in our project, we have to choose one of its versions – AngularJS or other. 
AngularJS – or as some may prefer: Angular 1 – was created in 2009. It brings us two?way data binding and lets us see data changes in JavaScript automatically shown on the UI. Furthermore, AngularJS has directives that let us create more separated and reusable code than ever before. Generally it allows us, programmers, to write applications in MVC or MVVM architecture (sometimes called MVW architecture (Model-View-Whatever) in simpler way. It made a step forward in testing front-end applications, because of its dependency injection mechanism which helps mock dependencies.

The beginning

I must say that I was really fascinated in Angular. Over time it has gained support from many developers. They’ve created a lot of useful packages that made coding even faster. More and more things were added to the core, so the Angular team decided to create a completely new framework. At first, the new framework was named Angular 2. It sometimes may cause understatements, because after time, beta version was renamed to Angular. Now, when people want to find some pieces of AngularJS code, they may find stuff connected with Angular 2 or higher. Higher, because Angular 4 was announced on December 2016. Creators purposely skipped number 3 to avoid a confusion due to the misalignment of the router package’s version, which was already distributed. Angular in 4th version is backward compatible with Angular 2.

Controllers vs components

So what’s the difference between AngularJS and Angular? First of all, Angular is based on TypeScript while AngularJS is based on JavaScript. TypeScript is a superset of ES6 and it’s backward compatible with ES5. Angular has also benefits of ES6 like: lambda operators, iterators or reflection’s mechanism. 
AngularJS uses terms of scope and controller. To scope a variable you can add many variables that will be visible in View as well as in Controller. AngularJS has also a concept of rootScope. Variables in rootScope are available on all throughout application. Angular does not have a concept of scope or controllers. Instead of them it uses a hierarchy of components as its main architectural concept. Component is a directive with a template. That is a similar approach as in ReactJS – another library used for building user interfaces.

Differences in template engine

AngularJS has many directives and every developer can also specify custom new directive. Angular also has standard directives, but they are used in a bit different way. For example: ng-model in AngularJS means that you want to create two-way binding. If you want to create one-way binding, you should use ng-bind. Angular occurs only ngModel, but if you would write it only in: “[ ]”, you’ll get one-way binding. If you want to create two-way binding you must write it in: “[( )]”. We have to write it this way because of the fact that “[ ]” is used to property binding and “( )” is used to event binding. In Angular, some directives have changed their names like ng-repeat to ngFor. When I’ve started working on projects with Angular 2 in beta version, I’ve been making common mistakes at the beginning liken trying to use ng-repeat or ngModel only in square brackets when I wanted two-way binding.

What else have changed?

Of course if Angular is newer version you can suspect that has some advantages over the old version. That’s right, Angular has many advantages. The first is modularity. Much core functionality was moved to different modules. That caused lighter and faster core, dynamic loading, asynchronous template compilation and added support for reactive programming. After beta version creators added really great thing: angular cli. With that package you can easily create scaffolding of your Angular project which will be all configured.

So AngularJS or Angular?

Wondering about version that will be the best for you? The newer version of Angular is a popular solution. Moreover, mostly it will be a better choice. Anyway, before you choose one of them to your new project, try to answer some questions: 
What libraries would you like to use? 
Are they compatible with Angular? 
What web browsers we want to support? (this one is really important)
If you choose only new browsers, then Angular is the best. It’s because it is a forward-looking library, but don’t forget about other browsers. For example: IE8 for which you should definitely use AngularJS from version 1.3 that supports IE8 and higher.

Summary

Angular is a great framework. It has many improvements in terms of AngularJS. It will become more and more popular and I think that it is well suited to small as also to bigger applications, so it is really worth learning and using.

'Coz sharing is caring

URL redirection

URL HTTP Redirection

URL http redirection is an automatic URL change operation from one URL to another URL.

URL redirection

URL page redirection is an automatic URL change operation from one URL to another URL.

This redirection is done for the following reasons:

  1. Redirect from old obsolete URL to a new updated URL.
  2. Redirect from old obsolete domain to a new domain.
  3. Redirect from non www domain name to a www domain name.
  4. Redirect from short URL name to a long URL name – URL shortening service.
  5. URL shortening service will allow the user to insert a short URL and be redirected the the long URL that has the real page contents.

The user may reach the old URL from an old external links or a bookmark by the site’s webmaster who adds a script.

Server side redirect

Server side redirection is done in the server, by configuring the Apache / IIS server software or by using PHP / ASP / ASP.NET script.
This is the preferred way to redirect URLs, since you can return HTTP 301 Moved Permanently status code.
Search engines use the 301 status to transfer the page rank from the old URL to the new URL.

Client side redirect

Client side redirection is done in the web browser of the user, by using HTML meta refresh tag or by Javascript code.
Client redirect is less preferred, since it does not return HTTP 301 status code.

Where to put redirect code

Domain
name
Hosting
server
Redirect code
placement
not changed not changed old page on same server
not changed changed old page on new server
changed not changed old page on same server
changed changed old page on old server

* Only with .htaccess redirect: add redirect code to httpd.conf
file or to .htaccess file.

HTTP status codes

Status code Status code name Description
200 OK successful HTTP request
300 Multiple Choices
301 Moved Permanently permanent URL redirection
302 Found temporary URL redirection
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
404 Not Found URL not found

HTTP 301 redirect

HTTP 301 Moved Permanently status code means a permanent URL redirection.

The 301 redirect is the preferred way to redirect URLs, since it informs search engines that the URL has moved for good, and search engines should put the new URL page in the search results instead of the old URL page and transfer the new URL page, the page rank of the old URL page.
The 301 redirect can be done across domains or on the same domain.
Google recommends to use 301 redirect.

Redirect options

Redirect script Redirect side Old page file type Redirect URL or domain Old URL server type 301 redirect support
PHP Server-side .php URL Apache / Linux yes
ASP Server-side .asp URL IIS / Windows yes
ASP.NET Server-side .aspx URL IIS / Windows yes
.htaccess Server-side all URL / Domain Apache / Linux yes
IIS Server-side all URL / Domain IIS / Windows yes
HTML canonical link tag Client-side .html URL all no
HTML meta refresh Client-side .html URL all no
HTML frame Client-side .html URL all no
Javascript Client-side .html URL all no
jQuery Client-side .html URL all no

redirect script – the scripting language that is used for the redirection.

redirect side – where the redirection takes place – server-side or client-side.

old page file type – the type of the old URL page that can can contain the scripting language of the redirect code.

redirect URL or domain – does support URL redirection of a single web page or domain redirection of a whole website.

typical old URL server type – the typical software and operating system of the server.

301 redirect support – indicates whether permanent 301 redirect status response can be returned.

PHP redirect

Replace old-page.php code with redirection code to new-page.php.

old_page.php:

<?php 
// PHP permanent URL redirection 
header("Location: http://www.mydomain.com/new-page.php", true, 301);
exit();
?>

The old page must have .php file extension.

The new page can be with any extension.

Apache .htaccess redirect

.htaccess file is a local configuration file of the Apache server.

If you have permission the change the httpd.conf file, it is better to add the Redirect directive in the httpd.conf instead of the .htaccess file.

Single URL redirect

Permanent redirect from old-page.html to new-page.html.

.htaccess:

Redirect 301 /old-page.html http://www.mydomain.com/new-page.html

Entire domain redirect

Permanent redirect from all domain pages to newdomain.com.

 .htaccess file should be at the old website’s root directory.

.htaccess:

Redirect 301 / http://www.newdomain.com/

ASP redirect

old-page.asp:

<%@ Language="VBScript" %>
<%
' ASP permanent URL redirection
Response.Status="301 Moved Permanently"
Response.AddHeader "Location", "http://www.mydomain.com/new-page.html"
Response.End
%>

ASP.NET redirect

old-page.aspx:

<script language="C#" runat="server">
// ASP.net permanent URL redirection
private void Page_Load(object sender, EventArgs e)
{
    Response.Status = "301 Moved Permanently";
    Response.AddHeader("Location","http://www.mydomain.com/new-page.html");
    Response.End();
}
</script>

HTML meta refresh redirect

HTML meta refresh tag redirection does not return 301 permanent redirect status code, but considered by Google as a 301 redirect.
Replace old page with redirection code with the URL of the page you want to redirect to.

old-page.html:

<!-- HTML meta refresh URL redirection -->
<html>
  <head>
    <meta http-equiv="refresh" content="0; url=http://www.mydomain.com/new-page.html">
  </head>
  <body>
    <p>The page has moved to: 
    <a href="http://www.mydomain.com/new-page.html"> this page</a>
    </p>
  </body>
</html>

Javascript redirect

Javascript redirect does not return 301 permanent redirect status code.

Replace old page with redirection code with the URL of the page you want to redirect to.

old-page.html:

<html>
  <body>
    <script type="text/javascript">
    // Javascript URL redirection
    window.location.replace("http://www.mydomain.com/new-page.html");
    </script>
  </body>
</html>

jQuery redirect

jQuery redirect is actually another type of Javascript redirect. jQuery redirect does not return 301 permanent redirect status code.

Replace old page with redirection code with the URL of the page you want to redirect to.

old-page.html:

<!DOCTYPE html>
<html>
  <body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    // jQuery URL redirection
    $(document).ready( function() {
      url = "http://www.mydomain.com/new-page.html";
      $( location ).attr("href", url);
    });
    </script>
  </body>
</html>

HTML canonical link tag redirect

The canonical link does not redirect to the preffred URL, but it can be an alternative to URL redirection for websites that most of the traffic arrives from search engines.
HTML canonical link tag can be used when there are several pages with similar content and you want to tell the search engines which page you preffer to use in the search results.
Canonical link tag can link to the same domain and also cross-domain.
Add the canonical link tag to the old page to link to the new page.
Add the canonical link tag to the pages that you preffer not to get search engines traffic to link to the preffered page.

The canonical link tag should be added in the <head> section.

old-page.html:

<link rel="canonical" href="http://www.mydomain.com/new-page.html">

HTML frame redirect

In frame redirection the new-page.html file is viewed by an html frame.

This is not a real URL redirection.

Frame redirection is not search engines friendly and is not recommended.

old-page.html:

<!-- HTML frame redirection -->
<html>
  <head>
    <title>Title of new page</title>
  </head>
  <frameset cols="100%">
    <frame src="http://www.mydomain.com/new-page.html">
    <noframes>
      <a href="http://www.mydomain.com/new-page.html">Link to new page</a>
    </noframes>
  </frameset>
</html>
'Coz sharing is caring