{"id":3206,"date":"2016-06-20T19:18:46","date_gmt":"2016-06-20T13:48:46","guid":{"rendered":"http:\/\/www.konstantinfo.com\/blog\/?p=3206"},"modified":"2019-07-26T16:22:54","modified_gmt":"2019-07-26T10:52:54","slug":"html5-and-angular-2-what-you-should-be-looking-at","status":"publish","type":"post","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/","title":{"rendered":"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post)"},"content":{"rendered":"

HTML5 is the rage and roar for any website designer: who doesn\u2019t want responsive right? Previously though a lot of bootstrap users were shying away when using Angular 1.X and yours truly being one of them I thought it would be insightful if we could be on the same page regarding HTML5. Problematic stylesheets aside though: a lot of us still feel uneasy about going over to HTML5 for sticking through with our front end. Quid pro quo though: because Angular did not have mobile support until the release of Angular 2.0 which is also very recent.<\/p>\n

A few frameworks which you can always look at though<\/strong><\/h2>\n

Foundation\u00a0\u2013 <\/strong> we will be using Foundation for this tutorial because it\u2019s one of the simplest to use and has a very good documentation.
\nAdapt.js<\/strong><\/p>\n

The importance of Typescript<\/strong><\/h2>\n

Equally important is the number of applications that can run with JS, in fact you can\u2019t imagine web applications without JS. Angular\u2019s support with mobile was minimum but that\u2019s one thing where Angular 2.0 is going better so if you want to start the design phases of your next website. This would literally be the best time.<\/p>\n

Typescript is microsoft\u2019s superset for JS<\/a> so your mobile solutions can now go cross platform a lot easier. I am still unsure on how well that ports with ASP but we can look at those concerns later. The beta version gave a decent account of itself with bootstrapping techniques and it got rid of $scopes.<\/p>\n

So developers now have an edge in the following areas.<\/p>\n

\u25a0<\/strong> Directives
\n\u25a0<\/strong> Using Generics
\n\u25a0<\/strong> Validations and forms
\n\u25a0<\/strong> Dependencies
\n\u25a0<\/strong> Object meta data<\/p>\n

Updates <\/strong><\/h2>\n

\u201cIf your site is to be a one-off production then updates won\u2019t be an issue but if you plan to build the site then hand it off to others for updates, make sure that it\u2019s easy to do so. Include instructions for those who come after you. Make sure you place comments in the code along with written documentation so those who come after you can see what you\u2019ve done. This will make it easier for them to make updates\/changes as necessary.\u00a0<\/em>\u201c \u2013 Nathan Segal<\/strong><\/p>\n

If you started learning HTML5 through Bootstrap you are probably having your head stuffed with all the facts on all different components. Updates are tricky but are ultimately rewarding if you can keep up with them. As is the case though, your frontend requirements can become outdated if you have not upgraded them from time to time.<\/p>\n

One example of this is the event handling capability in Angular 2.0 which uses such events for all user generated in puts. It\u2019s a neater method and becomes much more convenient for any team member who is working on your code to be able to read your code.<\/p>\n

Validation<\/strong><\/h2>\n

This is what makes HTML5 so impressive to use, especially on the server side. But on the client side, you have a host of options through which you can go for validation.<\/p>\n

required'\r\nThe required attributes which can be specified on any input markup \r\nelement to annotate any field which is required.\r\nA simple declaration is shown below.\r\n<!DOCTYPE html>\r\n<html\r\n<head>\r\n<style>\r\ntextarea:required:invalid, input:required:invalid {\r\nbackground-color: lightyellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<header>\r\n<h1>Validation demo<\/h1>\r\n<p>Demo showing HTML5 validation<\/p>\r\n<\/header>\r\n<footer>\r\n<h1><\/h1>\r\n<p>HTML Goodies<\/p>\r\n<\/footer>\r\n<form id=\"myform\" action=\"#\">\r\n<input id=\"name\" required><br>\r\n<input id=\"phone\"><br>\r\n<input id=\"zip\" required><br>\r\n<input type=\"submit\">\r\n<\/form>\r\n<\/body>\r\n<\/html><\/pre>\n
HTML5 validation kicks in when the form is submitted (user clicks the Submit button). When this happens, the browsers starts going through its list of required inputs and prompts when the input is missing on the required inputs.<\/p>\n
The validation starts when the form is submitted (click on the user button). The browser goes through the list of required inputs and then rapidly prompts when the input is missing on text. You aren\u2019t using the back end and the compiler to execute the code but can do so right here. That is the essence of what makes HTML5 such a joy to use.<\/p>\n
End of beta?<\/strong><\/p>\n
Currently, we can look forward to Angular 2\u2019s JS<\/a> capabilities because for trainees and pros, there is a good amount to be excited about. Once the beta is tested you can look at what features available for full app and website development and there enough tutorial resources to go around on it as well. Keep the feedbacks rolling within the community and responsive can\u2019t make you go wrong.<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5 is the rage and roar for any website designer: who doesn\u2019t want responsive right? Previously though a lot of bootstrap users were shying away when using Angular 1.X and yours truly being one of them I thought it would be insightful if we could be on the same page regarding HTML5. Problematic stylesheets aside… Continue reading HTML5 and Angular 2: What You Should Be Looking At? (Guest Post)<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":3207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,41],"tags":[671,670,119,756],"class_list":["post-3206","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app-development","category-web-development","tag-angular-2","tag-angular-2-javascript-framework","tag-html5","tag-web-applications","entry"],"yoast_head":"\nHTML5 and Angular 2: What You Should Be Looking At? (Guest Post) - Konstantinfo<\/title>\n<meta name=\"description\" content=\"HTML5 and Angular 2 have acquired a significant place in the development industry. Let\u2019s find out the various capabilities of Angular and HTML5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post) - Konstantinfo\" \/>\n<meta property=\"og:description\" content=\"HTML5 and Angular 2 have acquired a significant place in the development industry. Let\u2019s find out the various capabilities of Angular and HTML5.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/\" \/>\n<meta property=\"og:site_name\" content=\"Konstantinfo\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-20T13:48:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-26T10:52:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1029\" \/>\n\t<meta property=\"og:image:height\" content=\"457\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrea Bell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@konstantinfo\" \/>\n<meta name=\"twitter:site\" content=\"@konstantinfo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrea Bell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/\",\"name\":\"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post) - Konstantinfo\",\"isPartOf\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg\",\"datePublished\":\"2016-06-20T13:48:46+00:00\",\"dateModified\":\"2019-07-26T10:52:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/8d4a430cc568b9869d865bcfd2ce6554\"},\"description\":\"HTML5 and Angular 2 have acquired a significant place in the development industry. Let\u2019s find out the various capabilities of Angular and HTML5.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#primaryimage\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg\",\"contentUrl\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg\",\"width\":1029,\"height\":457,\"caption\":\"HTML5 and Angular 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#website\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/\",\"name\":\"Konstantinfo\",\"description\":\"Welcome to Konstant Info\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/8d4a430cc568b9869d865bcfd2ce6554\",\"name\":\"Andrea Bell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/andrea-bell-150x150.jpg\",\"contentUrl\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/andrea-bell-150x150.jpg\",\"caption\":\"Andrea Bell\"},\"description\":\"Andrea Bell is\u00a0a Freelance writer and a content contributor at www.zeolearn.com, which provides angularJS and big data hadoop training. She writes mostly on technology related stuff. Live simply, give generously and a sports lover.\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/author\/andrea-bell\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post) - Konstantinfo","description":"HTML5 and Angular 2 have acquired a significant place in the development industry. Let\u2019s find out the various capabilities of Angular and HTML5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post) - Konstantinfo","og_description":"HTML5 and Angular 2 have acquired a significant place in the development industry. Let\u2019s find out the various capabilities of Angular and HTML5.","og_url":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/","og_site_name":"Konstantinfo","article_published_time":"2016-06-20T13:48:46+00:00","article_modified_time":"2019-07-26T10:52:54+00:00","og_image":[{"width":1029,"height":457,"url":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg","type":"image\/jpeg"}],"author":"Andrea Bell","twitter_card":"summary_large_image","twitter_creator":"@konstantinfo","twitter_site":"@konstantinfo","twitter_misc":{"Written by":"Andrea Bell","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/","name":"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post) - Konstantinfo","isPartOf":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#primaryimage"},"image":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#primaryimage"},"thumbnailUrl":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg","datePublished":"2016-06-20T13:48:46+00:00","dateModified":"2019-07-26T10:52:54+00:00","author":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/8d4a430cc568b9869d865bcfd2ce6554"},"description":"HTML5 and Angular 2 have acquired a significant place in the development industry. Let\u2019s find out the various capabilities of Angular and HTML5.","breadcrumb":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#primaryimage","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg","contentUrl":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/HTML5-and-Angular-2.jpg","width":1029,"height":457,"caption":"HTML5 and Angular 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/html5-and-angular-2-what-you-should-be-looking-at\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.konstantinfo.com\/konstant-blog\/"},{"@type":"ListItem","position":2,"name":"HTML5 and Angular 2: What You Should Be Looking At? (Guest Post)"}]},{"@type":"WebSite","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#website","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/","name":"Konstantinfo","description":"Welcome to Konstant Info","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.konstantinfo.com\/konstant-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/8d4a430cc568b9869d865bcfd2ce6554","name":"Andrea Bell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/andrea-bell-150x150.jpg","contentUrl":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2016\/06\/andrea-bell-150x150.jpg","caption":"Andrea Bell"},"description":"Andrea Bell is\u00a0a Freelance writer and a content contributor at www.zeolearn.com, which provides angularJS and big data hadoop training. She writes mostly on technology related stuff. Live simply, give generously and a sports lover.","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/author\/andrea-bell\/"}]}},"show_toc":false,"table_of_content":[],"faq":[],"related_blogs":[{"id":11095,"title":"How to Build a Real Estate Website – A Detailed Guide","slug":"build-real-estate-website","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/build-real-estate-website\/","modified":"2026-05-07 17:49:50","excerpt":"\u201cWebsites promote you 24\/7: No employee will do that.\u201d \u2013 Paul Cookson This powerful quote by the popular writer, Paul...","image":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2024\/10\/build-a-real-estate-website.webp"},{"id":12341,"title":"AI in Real Estate Industry – Benefits, Use Cases, Applications and Challenges","slug":"ai-in-real-estate","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/ai-in-real-estate\/","modified":"2026-05-07 17:49:19","excerpt":"The real-estate industry is predominantly run by human expertise and manual processes including buying, selling, and building lands and property....","image":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2025\/04\/ai-in-real-estate.webp"},{"id":12324,"title":"10 Top Education App Development Companies (2026)","slug":"education-app-development-companies","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/education-app-development-companies\/","modified":"2026-05-07 15:22:39","excerpt":"What started as an extension of traditional classrooms became a billion-dollar industry. The online education sector has flourished massively. It...","image":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2025\/04\/education-app-development-companies.webp"}],"_links":{"self":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts\/3206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/comments?post=3206"}],"version-history":[{"count":0,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts\/3206\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/media\/3207"}],"wp:attachment":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/media?parent=3206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/categories?post=3206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/tags?post=3206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}