{"id":9903,"date":"2021-10-17T19:04:43","date_gmt":"2021-10-17T19:04:43","guid":{"rendered":"https:\/\/exceptionly.com\/?p=9903"},"modified":"2022-06-29T16:39:40","modified_gmt":"2022-06-29T16:39:40","slug":"how-to-start-coding-angularjs-in-60-minutes","status":"publish","type":"post","link":"https:\/\/exceptionly.com\/ar\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/","title":{"rendered":"How to start coding AngularJS in 60 minutes"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS, and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.\u00a0<\/p>

How AngularJS became so popular?\u00a0<\/h2>

AngularJS provides modularity for single web applications. This was an immense privilege over the rest of the JS frameworks.\u00a0 With multiple modules, it also has a secure way to bind the data to the HTML elements. In addition, bi-directional data binding provides to reflect the changes in real-time.<\/p>

How to start coding in AngularJS?<\/h2>

Set up your local machine for development<\/h3>

Make sure you have a recent version of node.js<\/a> installed. Once installation is done, you can continue to develop;<\/p>

Angular applications use npm packages<\/a> for many features and functions. Please check the npm client<\/a> guide to learn how to use the npm package manager command-line interface, installed with Node.js by default.<\/p>

How to Install the Angular CLI?<\/h3>

Angular CLI allows you to create projects and generate the application code with an initial setup that comes with deployment, testing, and some other features.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tnpm install -g @angular\/cli<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f12e932 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f12e932\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-48d26fe\" data-id=\"48d26fe\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2990ad2 elementor-widget elementor-widget-text-editor\" data-id=\"2990ad2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>How to create a project with AngularJS?<\/h3><p>Run the below CLI command to generate a new application; now, accept the default values.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1bd4528 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1bd4528\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-379d997\" data-id=\"379d997\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8511be3 elementor-widget elementor-widget-code-highlight\" data-id=\"8511be3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>ng new my-first-angular-app<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-df55dce elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"df55dce\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6731f53\" data-id=\"6731f53\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2a9b2d2 elementor-widget elementor-widget-text-editor\" data-id=\"2a9b2d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>How to run an AngularJS application?<\/h3><p>The Angular CLI comes with a server by default which gives you the ability to build and run your application locally.<\/p><p>Run the below command in your application root folder to start the application.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ef051de elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ef051de\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1bf6a78\" data-id=\"1bf6a78\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2951bf5 elementor-widget elementor-widget-code-highlight\" data-id=\"2951bf5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>cd my-first-angular-app \nng serve --open  (or -o)<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a861d5f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a861d5f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dbe9399\" data-id=\"dbe9399\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e87d0b3 elementor-widget elementor-widget-text-editor\" data-id=\"e87d0b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Congratulations! You can check the default user interface you just generated from <a href=\"http:\/\/localhost:4200\">http:\/\/localhost:4200<\/a> in the browser.<\/p><p>The default UI provides you with some base documents along with learning tutorials.\u00a0<\/p><h3>AngularJS Data Binding Example<\/h3><p>In the below example, you will see how to bind a pre-defined dataset in the template.\u00a0<\/p><p>Let\u2019s create static data with the file name job.ts, which contains a list of open jobs from <a href=\"https:\/\/exceptionly.com\/\">exceptionly.com<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2e4e3d0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2e4e3d0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4c786e1\" data-id=\"4c786e1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18b21af elementor-widget elementor-widget-code-highlight\" data-id=\"18b21af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>export class Job {\n\n static jobs: Job[] = [\n   new Job('Node.js + React.js Full Stack Software Engineer (Remote, Global)', 'https:\/\/talent.exceptionly.com\/jobs\/Careers\/618225000003951125\/Node-js-React-js-Full-Stack-Software-Engineer-Remote-Global-?source=Website'),\n   new Job('Android Architect (Remote, Global)',   'https:\/\/talent.exceptionly.com\/jobs\/Careers\/618225000003951125\/Node-js-React-js-Full-Stack-Software-Engineer-Remote-Global-?source=Website'),\n   new Job('Kubernetes and Terraform Experienced Senior DevOps Engineer (Global, Remote)',     'https:\/\/talent.exceptionly.com\/jobs\/Careers\/618225000003872417\/Kubernetes-and-Terraform-Experienced-Senior-DevOps-Engineer-Global-Remote-?source=Website')\n ];\n\n constructor(\n   public title?: string,\n   public link?: string) {}\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f2ea202 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f2ea202\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7e0aaaf\" data-id=\"7e0aaaf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fff2890 elementor-widget elementor-widget-text-editor\" data-id=\"fff2890\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Update app.component.ts to get the list of jobs on initialization.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2ddb7b6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2ddb7b6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-87c8aea\" data-id=\"87c8aea\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6508319 elementor-widget elementor-widget-code-highlight\" data-id=\"6508319\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import {Component, OnInit} from '@angular\/core';\nimport { Job } from '.\/job';\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n title = 'my-first-angular-app';\n jobs: Job[] = [];\n\n ngOnInit() {\n   this.fetchJobs();\n }\n\n fetchJobs() {\n   this.jobs = Job.jobs;\n }\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-03ea721 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"03ea721\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8f8f611\" data-id=\"8f8f611\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-985b482 elementor-widget elementor-widget-text-editor\" data-id=\"985b482\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And finally loop the jobs in app.component.html<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f3189fc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f3189fc\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-35b58eb\" data-id=\"35b58eb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-358c19e elementor-widget elementor-widget-code-highlight\" data-id=\"358c19e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><div *ngFor=\"let job of jobs\">\n <a href=\"{{ job.link }}\">{{ job.title }}<\/a>\n<\/div>\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8add024 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8add024\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ad5d115\" data-id=\"ad5d115\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d1e5da4 elementor-widget elementor-widget-text-editor\" data-id=\"d1e5da4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Output<\/p><p><a href=\"https:\/\/talent.exceptionly.com\/jobs\/Careers\/618225000003951125\/Node-js-React-js-Full-Stack-Software-Engineer-Remote-Global-?source=Website\">Node.js + React.js Full Stack Software Engineer (Remote, Global)<\/a><\/p><p><a href=\"https:\/\/talent.exceptionly.com\/jobs\/Careers\/618225000003951125\/Node-js-React-js-Full-Stack-Software-Engineer-Remote-Global-?source=Website\">Android Architect (Remote, Global)<\/a><\/p><p><a href=\"https:\/\/talent.exceptionly.com\/jobs\/Careers\/618225000003872417\/Kubernetes-and-Terraform-Experienced-Senior-DevOps-Engineer-Global-Remote-?source=Website\">Kubernetes and Terraform Experienced Senior DevOps Engineer (Global, Remote)<\/a><\/p><h2>Conclusion<\/h2><p>Today around ~7000 companies still have AngularJS in their tech stacks, including Google, Amazon, and Udemy. So it is sad to hear that Google will stop supporting AngularJS by the 31st of December, 2021.\u00a0<\/p><p>It feels like the right time to try something new. Feel free to challenge other libraries &amp; frameworks I posted about previously.<\/p><ul><li><a href=\"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/\">Start Coding VueJS in 60 minutes<\/a><\/li><li><a href=\"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/\">Start Coding React in 60 minutes<\/a><\/li><li><a href=\"https:\/\/exceptionly.com\/2021\/08\/23\/how-to-start-coding-javascript-in-60-minutes\/\">Start Coding JavaScript in 60 minutes<\/a><\/li><li><a href=\"https:\/\/exceptionly.com\/2021\/07\/07\/how-to-start-coding-java-in-60-minutes\/\">Start Coding Java in 60 minutes<\/a><\/li><li><a href=\"https:\/\/exceptionly.com\/2021\/07\/21\/how-to-start-coding-python-in-60-minutes\/\">Start Coding Python in 60 minutes<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS, and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.&nbsp; How did AngularJS become [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":9995,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[115,132,213,220,113,133],"class_list":["post-9903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-angular","tag-angularjs","tag-frontend","tag-fullstack","tag-javascript","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.5 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to start coding AngularJS in 60 minutes - Exceptionly<\/title>\n<meta name=\"description\" content=\"AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/exceptionly.com\/ar\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to start coding AngularJS in 60 minutes\" \/>\n<meta property=\"og:description\" content=\"AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/exceptionly.com\/ar\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/\" \/>\n<meta property=\"og:site_name\" content=\"Exceptionly\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/exceptionly\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-17T19:04:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-29T16:39:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/10\/how-to-start-coding-angular-in-60-minutes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1930\" \/>\n\t<meta property=\"og:image:height\" content=\"766\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fatma Elverir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@exceptionly\" \/>\n<meta name=\"twitter:site\" content=\"@exceptionly\" \/>\n<meta name=\"twitter:label1\" content=\"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatma Elverir\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u062f\u0642\u0627\u0626\u0642\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/\"},\"author\":{\"name\":\"Fatma Elverir\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/person\\\/a2600170dfb4513350affede916c0ccf\"},\"headline\":\"How to start coding AngularJS in 60 minutes\",\"datePublished\":\"2021-10-17T19:04:43+00:00\",\"dateModified\":\"2022-06-29T16:39:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/\"},\"wordCount\":472,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/how-to-start-coding-angular-in-60-minutes.jpg\",\"keywords\":[\"Angular\",\"AngularJS\",\"Frontend\",\"Fullstack\",\"JavaScript\",\"Web Development\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/\",\"name\":\"How to start coding AngularJS in 60 minutes - Exceptionly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/how-to-start-coding-angular-in-60-minutes.jpg\",\"datePublished\":\"2021-10-17T19:04:43+00:00\",\"dateModified\":\"2022-06-29T16:39:40+00:00\",\"description\":\"AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/how-to-start-coding-angular-in-60-minutes.jpg\",\"contentUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/how-to-start-coding-angular-in-60-minutes.jpg\",\"width\":1930,\"height\":766,\"caption\":\"How to start coding Angular in 60 minutes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/10\\\/17\\\/how-to-start-coding-angularjs-in-60-minutes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/exceptionly.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to start coding AngularJS in 60 minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#website\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/\",\"name\":\"Exceptionly\",\"description\":\"Remote software talent acquisition at scale\",\"publisher\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/exceptionly.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\",\"name\":\"Exceptionly\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/exceptionly-search-logo.png\",\"contentUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/exceptionly-search-logo.png\",\"width\":400,\"height\":400,\"caption\":\"Exceptionly\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/exceptionly\\\/\",\"https:\\\/\\\/x.com\\\/exceptionly\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/exceptionly\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCet5wATTyif6knI0h4vUkNA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/person\\\/a2600170dfb4513350affede916c0ccf\",\"name\":\"Fatma Elverir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"caption\":\"Fatma Elverir\"},\"sameAs\":[\"https:\\\/\\\/exceptionly.com\"],\"url\":\"https:\\\/\\\/exceptionly.com\\\/ar\\\/author\\\/fatmaelverir\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to start coding AngularJS in 60 minutes - Exceptionly","description":"AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.","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:\/\/exceptionly.com\/ar\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/","og_locale":"ar_AR","og_type":"article","og_title":"How to start coding AngularJS in 60 minutes","og_description":"AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to","og_url":"https:\/\/exceptionly.com\/ar\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/","og_site_name":"Exceptionly","article_publisher":"https:\/\/www.facebook.com\/exceptionly\/","article_published_time":"2021-10-17T19:04:43+00:00","article_modified_time":"2022-06-29T16:39:40+00:00","og_image":[{"width":1930,"height":766,"url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/10\/how-to-start-coding-angular-in-60-minutes.jpg","type":"image\/jpeg"}],"author":"Fatma Elverir","twitter_card":"summary_large_image","twitter_creator":"@exceptionly","twitter_site":"@exceptionly","twitter_misc":{"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629":"Fatma Elverir","\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"3 \u062f\u0642\u0627\u0626\u0642"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#article","isPartOf":{"@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/"},"author":{"name":"Fatma Elverir","@id":"https:\/\/exceptionly.com\/#\/schema\/person\/a2600170dfb4513350affede916c0ccf"},"headline":"How to start coding AngularJS in 60 minutes","datePublished":"2021-10-17T19:04:43+00:00","dateModified":"2022-06-29T16:39:40+00:00","mainEntityOfPage":{"@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/"},"wordCount":472,"commentCount":3,"publisher":{"@id":"https:\/\/exceptionly.com\/#organization"},"image":{"@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/10\/how-to-start-coding-angular-in-60-minutes.jpg","keywords":["Angular","AngularJS","Frontend","Fullstack","JavaScript","Web Development"],"articleSection":["Tutorials"],"inLanguage":"ar","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/","url":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/","name":"How to start coding AngularJS in 60 minutes - Exceptionly","isPartOf":{"@id":"https:\/\/exceptionly.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#primaryimage"},"image":{"@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/10\/how-to-start-coding-angular-in-60-minutes.jpg","datePublished":"2021-10-17T19:04:43+00:00","dateModified":"2022-06-29T16:39:40+00:00","description":"AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.","breadcrumb":{"@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#primaryimage","url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/10\/how-to-start-coding-angular-in-60-minutes.jpg","contentUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/10\/how-to-start-coding-angular-in-60-minutes.jpg","width":1930,"height":766,"caption":"How to start coding Angular in 60 minutes"},{"@type":"BreadcrumbList","@id":"https:\/\/exceptionly.com\/2021\/10\/17\/how-to-start-coding-angularjs-in-60-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/exceptionly.com\/"},{"@type":"ListItem","position":2,"name":"How to start coding AngularJS in 60 minutes"}]},{"@type":"WebSite","@id":"https:\/\/exceptionly.com\/#website","url":"https:\/\/exceptionly.com\/","name":"Exceptionly","description":"Remote software talent acquisition at scale","publisher":{"@id":"https:\/\/exceptionly.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/exceptionly.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/exceptionly.com\/#organization","name":"Exceptionly","url":"https:\/\/exceptionly.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/exceptionly.com\/#\/schema\/logo\/image\/","url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/05\/exceptionly-search-logo.png","contentUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/05\/exceptionly-search-logo.png","width":400,"height":400,"caption":"Exceptionly"},"image":{"@id":"https:\/\/exceptionly.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/exceptionly\/","https:\/\/x.com\/exceptionly","https:\/\/www.linkedin.com\/company\/exceptionly\/","https:\/\/www.youtube.com\/channel\/UCet5wATTyif6knI0h4vUkNA"]},{"@type":"Person","@id":"https:\/\/exceptionly.com\/#\/schema\/person\/a2600170dfb4513350affede916c0ccf","name":"Fatma Elverir","image":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","caption":"Fatma Elverir"},"sameAs":["https:\/\/exceptionly.com"],"url":"https:\/\/exceptionly.com\/ar\/author\/fatmaelverir\/"}]}},"_links":{"self":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts\/9903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/comments?post=9903"}],"version-history":[{"count":0,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts\/9903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/media\/9995"}],"wp:attachment":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/media?parent=9903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/categories?post=9903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/tags?post=9903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}