{"id":23160,"date":"2020-11-24T23:39:16","date_gmt":"2020-11-24T15:39:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23160"},"modified":"2020-11-24T18:27:17","modified_gmt":"2020-11-24T10:27:17","slug":"angularjs-frameworks","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/","title":{"rendered":"5 Angular Frameworks to Get Apps Up and Running Quickly"},"content":{"rendered":"<p>Now that you are well-versed in the basics, it is time to get started on <strong>building your own web application with Angular<\/strong>. Angular made building a web application more productive using what\u2019s called <strong>directives<\/strong>, which works hand-in-hand with your HTML markups.<\/p>\n<p>If building a web application from the ground seems overwhelming to you, not to worry. Some very generous developers have <strong>adapted a few frontend frameworks to support Angular<\/strong>. Like a typical framework, they come with pre-built web components. These make using the framework the perfect tool for anyone who needs to get a web application up and running quick.<\/p>\n<p>Here are 5 frameworks you can use to kick-start a web-based application with Angular.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/angularjs-tutorials-screencast\/\" class=\"ref-block__link\" title=\"Read More: 10 Best Tutorials to Learn Angular\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Best Tutorials to Learn Angular<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/angularjs-tutorials-screencast.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23139 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/angularjs-tutorials-screencast.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Best Tutorials to Learn Angular<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAngular is an awesome JavaScript framework that can be used to create powerful and dynamic web apps. It...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Angular Bootstrap<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit\" alt=\"Bootstrap shield logo in blue color\" width=\"800\" height=\"480\"><\/figure>\n<p><strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ng-bootstrap.github.io\/\">Angular Bootstrap<\/a><\/strong>, as the name implies, is built on top one of the most popular front-end frameworks, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>. This framework contains a set of Bootstrap components such as Carousel, Alert, and Collapse along with some additions, like Rating and TimePicker.<\/p>\n<p>All these components have been ported to use Angular directives and custom <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webcomponents.org\/\">HTML elements<\/a>. For example, rather than using a <code>&lt;div&gt;<\/code> to wrap the Carousel, you can use a more \u201cmeaningful\u201d custom element, <code>&lt;ngb-carousel&gt;<\/code> and <code>&lt;slide&gt;<\/code>:<\/p>\n<pre>\r\n&lt;ngb-carousel *ngIf=\"images\"&gt;\n\r\n    &lt;ng-template ngbSlide&gt;\n\r\n      &lt;div class=\"picsum-img-wrapper\"&gt;\n\r\n    \r\n    &lt;img [src]=\"images[0]\" alt=\"Random first slide\"&gt;\n\r\n      &lt;\/div&gt;\n\r\n      &lt;div class=\"carousel-caption\"&gt;\n\r\n    \r\n    &lt;h3&gt;First slide label&lt;\/h3&gt;\n\r\n    \r\n    &lt;p&gt;Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;\/p&gt;\n\r\n      &lt;\/div&gt;\n\r\n    &lt;\/ng-template&gt;\n&lt;\/ngb-carousel&gt;\r\n<\/pre>\n<p>If you are a big fan of Bootstrap while also enjoy the power and the performance that Angular offered, this could be a perfect choice of framework.<\/p>\n<h2>2. Angular Foundation<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-foundation.jpg?newedit\" alt=\"angular foundatiom\" width=\"800\" height=\"538\"><\/figure>\n<p>Another popular framework that has also been ported to use Angular is Foundation, and it is simply named \u201cAngular Foundation\u201d.<\/p>\n<p>Similarly, this framework has modified Foundation components to adopt Angular\u2019s directive and custom HTML elements so you can now build your web application using more semantically named HTML elements like <code>&lt;tabset&gt;<\/code> and <code>&lt;tab&gt;<\/code>, <code>&lt;accordion&gt;<\/code>, and <code>&lt;pagination&gt;<\/code>, rather than the ambiguous <code>&lt;div&gt;<\/code>. Here is one example of how we add an Alert component with the <code>&lt;alert&gt;<\/code> element:<\/p>\n<pre>\r\n&lt;alert type=\"primary\"&gt;\n\r\n    &lt;strong&gt;This is a primary callout.&lt;\/strong&gt; This alert needs your attention, but it's not super important.\n&lt;\/alert&gt;\r\n<\/pre>\n<p>If you like Foundation better than Bootstrap, then this is the framework to go with. You can get started with Angular Foundation <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/ngx-foundation\">in this page<\/a>, or stay up-to-date with the project development <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/nthompson777\/ngx-foundation\">through the Github repo<\/a>.<\/p>\n<h2>3. Ionic Framework<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/Ionic-Framework.jpg\" alt=\"ionic\" width=\"800\" height=\"415\"><\/figure>\n<p><strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ionicframework.com\/docs\/components\">Ionic<\/a><\/strong> comes with a handful of solid building-blocks that makes developing mobile applications easy and fast. Each component in the Ionic framework is optimized for mobile experience, which is basically dependent on touch and gestures. These UI components are also made up of custom HTML elements. In deploying a tabbed navigation, for example, you would use the <code>&lt;ion-tabs&gt;<\/code>:<\/p>\n<pre>\r\n&lt;ion-tabs&gt;\n\r\n    &lt;ion-tab-bar slot=\"bottom\"&gt;\n\r\n    &lt;ion-tab-button tab=\"schedule\"&gt;\n\r\n    &lt;ion-icon name=\"calendar\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;Schedule&lt;\/ion-label&gt;\n\r\n    &lt;ion-badge&gt;6&lt;\/ion-badge&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    \n\r\n    &lt;ion-tab-button tab=\"speakers\"&gt;\n\r\n    &lt;ion-icon name=\"person-circle\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;Speakers&lt;\/ion-label&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    \n\r\n    &lt;ion-tab-button tab=\"map\"&gt;\n\r\n    &lt;ion-icon name=\"map\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;Map&lt;\/ion-label&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    \n\r\n    &lt;ion-tab-button tab=\"about\"&gt;\n\r\n    &lt;ion-icon name=\"information-circle\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;About&lt;\/ion-label&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    &lt;\/ion-tab-bar&gt;\n&lt;\/ion-tabs&gt;\r\n<\/pre>\n<p>To make it even easier and faster to build your application, you can use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/creator.ionic.io\/\">Ionic Creator<\/a> which lets you build your app by drag-n-drop. So if performance and speed is important to you, Ionic is the best framework to go with.<\/p>\n<h2>4. NativeScript + Angular<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/native-script.jpg?newedit\" alt=\"mobile angular ui\" width=\"800\" height=\"480\"><\/figure>\n<p>NativeScript is a framework to create web and mobile application with JavaScript, and although it does not require Angular, you can integrate it with Angular so you can fully reuse your Angular skills and code to build beautiful application.<\/p>\n<p>It comes with a full set of custom components to create a usable application such as the <a href=\"https:\/\/docs.nativescript.org\/angular\/ui\/ng-components\/button.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Buttons<\/a>, <a href=\"https:\/\/docs.nativescript.org\/angular\/ui\/ng-components\/date-picker.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Date Pickers<\/a>, and <a href=\"https:\/\/docs.nativescript.org\/angular\/ui\/ng-components\/slider.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Slider<\/a>.<\/p>\n<pre>\r\n&lt;Slider value=\"10\" minValue=\"0\" maxValue=\"100\" backgroundColor=\"green\" color=\"red\"&gt;&lt;\/Slider&gt;\r\n<\/pre>\n<p>You can get started with the framework NativeScript + Anguular <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.nativescript.org\/angular\/start\/introduction\">here<\/a><\/p>\n<h2>5. Nebular<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/nebula.jpg?newedit\" alt=\"ui grid\" width=\"800\" height=\"480\"><\/figure>\n<p><strong><a href=\"https:\/\/akveo.github.io\/nebular\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nebular<\/a><\/strong> is a set of UI components based on the <a href=\"https:\/\/eva.design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ava design system<\/a>. It consists of more than 35 of reusable UI components such as the Card, Accordion, and Tabs. It also includes 400 icons, themes including the \u201cdark mode\u201d which can be easily customised to meet your design needs.<\/p>\n<p>Each of the component is prefixed with the <code>nb-<\/code>. For example, you can add <code>&lt;nb-card&gt;<\/code> to create the Card component.<\/p>\n<pre>&lt;nb-card&gt;\n&lt;nb-card-body&gt;Card&lt;\/nb-card-body&gt;\n&lt;\/nb-card&gt;\r\n<\/pre>\n<p>On top of these components, Nebular also comes with a couple of authentication and security modules that you can easily install with NPM. This allows you to create, not only the UIs, but a working web application with a beautiful consisten UI quickly all in this single framework.<\/p>\n<p> Bootstrap\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit\" alt=\"Bootstrap shield logo in blue color\" width=\"800\" height=\"480\"><\/figure>\n<\/p><p><strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ng-bootstrap.github.io\/\">Angular Bootstrap<\/a><\/strong>, as the name implies, is built on top one of the most popular front-end frameworks, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>. This framework contains a set of Bootstrap components such as Carousel, Alert, and Collapse along with some additions, like Rating and TimePicker.<\/p>\n<p>All these components have been ported to use Angular directives and custom <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webcomponents.org\/\">HTML elements<\/a>. For example, rather than using a <code>&lt;div&gt;<\/code> to wrap the Carousel, you can use a more \u201cmeaningful\u201d custom element, <code>&lt;ngb-carousel&gt;<\/code> and <code>&lt;slide&gt;<\/code>:<\/p>\n<pre>\r\n&lt;ngb-carousel *ngIf=\"images\"&gt;\n\r\n    &lt;ng-template ngbSlide&gt;\n\r\n      &lt;div class=\"picsum-img-wrapper\"&gt;\n\r\n    \r\n    &lt;img [src]=\"images[0]\" alt=\"Random first slide\"&gt;\n\r\n      &lt;\/div&gt;\n\r\n      &lt;div class=\"carousel-caption\"&gt;\n\r\n    \r\n    &lt;h3&gt;First slide label&lt;\/h3&gt;\n\r\n    \r\n    &lt;p&gt;Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;\/p&gt;\n\r\n      &lt;\/div&gt;\n\r\n    &lt;\/ng-template&gt;\n&lt;\/ngb-carousel&gt;\r\n<\/pre>\n<p>If you are a big fan of Bootstrap while also enjoy the power and the performance that Angular offered, this could be a perfect choice of framework.<\/p>\n<h2>2. Angular Foundation<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-foundation.jpg?newedit\" alt=\"angular foundatiom\" width=\"800\" height=\"538\"><\/figure>\n<p>Another popular framework that has also been ported to use Angular is Foundation, and it is simply named \u201cAngular Foundation\u201d.<\/p>\n<p>Similarly, this framework has modified Foundation components to adopt Angular\u2019s directive and custom HTML elements so you can now build your web application using more semantically named HTML elements like <code>&lt;tabset&gt;<\/code> and <code>&lt;tab&gt;<\/code>, <code>&lt;accordion&gt;<\/code>, and <code>&lt;pagination&gt;<\/code>, rather than the ambiguous <code>&lt;div&gt;<\/code>. Here is one example of how we add an Alert component with the <code>&lt;alert&gt;<\/code> element:<\/p>\n<pre>\r\n&lt;alert type=\"primary\"&gt;\n\r\n    &lt;strong&gt;This is a primary callout.&lt;\/strong&gt; This alert needs your attention, but it's not super important.\n&lt;\/alert&gt;\r\n<\/pre>\n<p>If you like Foundation better than Bootstrap, then this is the framework to go with. You can get started with Angular Foundation <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/ngx-foundation\">in this page<\/a>, or stay up-to-date with the project development <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/nthompson777\/ngx-foundation\">through the Github repo<\/a>.<\/p>\n<h2>3. Ionic Framework<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/Ionic-Framework.jpg\" alt=\"ionic\" width=\"800\" height=\"415\"><\/figure>\n<p><strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ionicframework.com\/docs\/components\">Ionic<\/a><\/strong> comes with a handful of solid building-blocks that makes developing mobile applications easy and fast. Each component in the Ionic framework is optimized for mobile experience, which is basically dependent on touch and gestures. These UI components are also made up of custom HTML elements. In deploying a tabbed navigation, for example, you would use the <code>&lt;ion-tabs&gt;<\/code>:<\/p>\n<pre>\r\n&lt;ion-tabs&gt;\n\r\n    &lt;ion-tab-bar slot=\"bottom\"&gt;\n\r\n    &lt;ion-tab-button tab=\"schedule\"&gt;\n\r\n    &lt;ion-icon name=\"calendar\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;Schedule&lt;\/ion-label&gt;\n\r\n    &lt;ion-badge&gt;6&lt;\/ion-badge&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    \n\r\n    &lt;ion-tab-button tab=\"speakers\"&gt;\n\r\n    &lt;ion-icon name=\"person-circle\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;Speakers&lt;\/ion-label&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    \n\r\n    &lt;ion-tab-button tab=\"map\"&gt;\n\r\n    &lt;ion-icon name=\"map\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;Map&lt;\/ion-label&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    \n\r\n    &lt;ion-tab-button tab=\"about\"&gt;\n\r\n    &lt;ion-icon name=\"information-circle\"&gt;&lt;\/ion-icon&gt;\n\r\n    &lt;ion-label&gt;About&lt;\/ion-label&gt;\n\r\n    &lt;\/ion-tab-button&gt;\n\r\n    &lt;\/ion-tab-bar&gt;\n&lt;\/ion-tabs&gt;\r\n<\/pre>\n<p>To make it even easier and faster to build your application, you can use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/creator.ionic.io\/\">Ionic Creator<\/a> which lets you build your app by drag-n-drop. So if performance and speed is important to you, Ionic is the best framework to go with.<\/p>\n<h2>4. NativeScript + Angular<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/native-script.jpg?newedit\" alt=\"mobile angular ui\" width=\"800\" height=\"480\"><\/figure>\n<p>NativeScript is a framework to create web and mobile application with JavaScript, and although it does not require Angular, you can integrate it with Angular so you can fully reuse your Angular skills and code to build beautiful application.<\/p>\n<p>It comes with a full set of custom components to create a usable application such as the <a href=\"https:\/\/docs.nativescript.org\/angular\/ui\/ng-components\/button.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Buttons<\/a>, <a href=\"https:\/\/docs.nativescript.org\/angular\/ui\/ng-components\/date-picker.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Date Pickers<\/a>, and <a href=\"https:\/\/docs.nativescript.org\/angular\/ui\/ng-components\/slider.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Slider<\/a>.<\/p>\n<pre>\r\n&lt;Slider value=\"10\" minValue=\"0\" maxValue=\"100\" backgroundColor=\"green\" color=\"red\"&gt;&lt;\/Slider&gt;\r\n<\/pre>\n<p>You can get started with the framework NativeScript + Anguular <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.nativescript.org\/angular\/start\/introduction\">here<\/a><\/p>\n<h2>5. Nebular<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/nebula.jpg?newedit\" alt=\"ui grid\" width=\"800\" height=\"480\"><\/figure>\n<p><strong><a href=\"https:\/\/akveo.github.io\/nebular\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nebular<\/a><\/strong> is a set of UI components based on the <a href=\"https:\/\/eva.design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ava design system<\/a>. It consists of more than 35 of reusable UI components such as the Card, Accordion, and Tabs. It also includes 400 icons, themes including the \u201cdark mode\u201d which can be easily customised to meet your design needs.<\/p>\n<p>Each of the component is prefixed with the <code>nb-<\/code>. For example, you can add <code>&lt;nb-card&gt;<\/code> to create the Card component.<\/p>\n<pre>&lt;nb-card&gt;\n&lt;nb-card-body&gt;Card&lt;\/nb-card-body&gt;\n&lt;\/nb-card&gt;\r\n<\/pre>\n<p>On top of these components, Nebular also comes with a couple of authentication and security modules that you can easily install with NPM. This allows you to create, not only the UIs, but a working web application with a beautiful consisten UI quickly all in this single framework.<\/p>","protected":false},"excerpt":{"rendered":"<p>Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web application more productive using what\u2019s called directives, which works hand-in-hand with your HTML markups. If building a web application from the ground seems overwhelming to you, not to&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3313],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Angular Frameworks to Get Apps Up and Running Quickly - Hongkiat<\/title>\n<meta name=\"description\" content=\"Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web\" \/>\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.hongkiat.com\/blog\/angularjs-frameworks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Angular Frameworks to Get Apps Up and Running Quickly\" \/>\n<meta property=\"og:description\" content=\"Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-24T15:39:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"5 Angular Frameworks to Get Apps Up and Running Quickly\",\"datePublished\":\"2020-11-24T15:39:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/\"},\"wordCount\":1122,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-frameworks\\\/ng-bootstrap.jpg?newedit\",\"keywords\":[\"AngularJS\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/\",\"name\":\"5 Angular Frameworks to Get Apps Up and Running Quickly - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-frameworks\\\/ng-bootstrap.jpg?newedit\",\"datePublished\":\"2020-11-24T15:39:16+00:00\",\"description\":\"Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-frameworks\\\/ng-bootstrap.jpg?newedit\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-frameworks\\\/ng-bootstrap.jpg?newedit\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-frameworks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Angular Frameworks to Get Apps Up and Running Quickly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Angular Frameworks to Get Apps Up and Running Quickly - Hongkiat","description":"Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web","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.hongkiat.com\/blog\/angularjs-frameworks\/","og_locale":"en_US","og_type":"article","og_title":"5 Angular Frameworks to Get Apps Up and Running Quickly","og_description":"Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web","og_url":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-11-24T15:39:16+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"5 Angular Frameworks to Get Apps Up and Running Quickly","datePublished":"2020-11-24T15:39:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/"},"wordCount":1122,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit","keywords":["AngularJS"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/","url":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/","name":"5 Angular Frameworks to Get Apps Up and Running Quickly - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit","datePublished":"2020-11-24T15:39:16+00:00","description":"Now that you are well-versed in the basics, it is time to get started on building your own web application with Angular. Angular made building a web","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-frameworks\/ng-bootstrap.jpg?newedit"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-frameworks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Angular Frameworks to Get Apps Up and Running Quickly"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-61y","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23160"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23160\/revisions"}],"predecessor-version":[{"id":52672,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23160\/revisions\/52672"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23160"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}