{"id":9180,"date":"2020-01-23T05:58:38","date_gmt":"2020-01-23T05:58:38","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=9180"},"modified":"2020-01-27T07:39:09","modified_gmt":"2020-01-27T07:39:09","slug":"angularjs-tutorial-for-beginners","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/angularjs-tutorial-for-beginners\/","title":{"rendered":"AngularJS Tutorial for Beginners"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"93\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/Intro-to-AngularJS-300x93-1.jpg\" alt=\"\" class=\"wp-image-9515\"\/><\/figure><\/div>\n\n\n\n<p>AngularJS is a <strong>JavaScript Framework<\/strong>. It can be added an HTML Page with a &lt;Script&gt; tag. AngularJS extends HTML attributes with <strong>Directives<\/strong>, and binds data to HTML with <strong>Expressions<\/strong>. It is used in Single Page Application (SPA) projects.<\/p>\n\n\n\n<p>It was developed in 2009 by <strong>Misko Hevery<\/strong> and <strong>Adam Abrons<\/strong>. It is now maintained by Google.<\/p>\n\n\n\n<p>It can be added to a webpage with a script tag.<\/p>\n\n\n\n<p>&lt;script src=&#8221;<em>https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.8\/angular.min.js<\/em>&#8220;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p><strong>Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>AngularJS is a powerful JavaScript based development framework to create <strong>RICH Internet Application<\/strong>(RIA).<\/li><li>AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (<strong>Model View Controller<\/strong>) way.<\/li><li>Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.<\/li><li>AngularJS is open source, completely free, and used by thousands of developers around the world.<\/li><\/ul>\n\n\n\n<p><strong>Core Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Data-binding<\/strong> \u2212 It is the automatic synchronization of data between model and view components.<\/li><li><strong>Scope<\/strong> \u2212 These are objects that refer to the model. They act as a glue between controller and view.<\/li><li><strong>Controller<\/strong> \u2212 These are JavaScript functions that are bound to a particular scope.<\/li><li><strong>Services<\/strong> \u2212 AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.<\/li><li><strong>Directives<\/strong> \u2212 Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel&#8230;)<\/li><li><strong>Filters<\/strong> \u2212 These select a subset of items from an array and returns a new array.<\/li><li><strong>Routing<\/strong> &#8211; It is concept of switching views.]<\/li><li><strong>Model View Controller<\/strong> &#8211; <strong>MVC<\/strong> is a design pattern for dividing an application into different parts (called Model, View and Controller).<\/li><li><strong>Dependency Injection<\/strong> &#8211; &nbsp;AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand and test.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"432\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/Concept.jpg\" alt=\"\" class=\"wp-image-9516\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/Concept.jpg 747w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/Concept-300x173.jpg 300w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/figure>\n\n\n\n<p><strong>Advantages of AngularJS :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>AngularJS provides capability to create Single Page Application.<\/li><li>AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience.<\/li><li>AngularJS provides reusable components and developer write less code and get more functionality.<\/li><\/ul>\n\n\n\n<p><strong>AngularJS Components :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>ng-app<\/strong> &#8211;&nbsp;The <strong>ng-app<\/strong> directive defines an AngularJS application.<\/li><li><strong>ng-model<\/strong> &#8211;&nbsp;The <strong>ng-model<\/strong> directive binds the value of HTML input controls to application data.<\/li><li><strong>ng-bind<\/strong> &#8211;&nbsp;The <strong>ng-bind<\/strong> directive binds application data to the HTML tags.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Environment Setup<\/strong><\/h2>\n\n\n\n<p>we will discuss about how to set up AngularJS library to be used in web application development.We will also study the directory structure and its contents.<\/p>\n\n\n\n<p>When You open this link <a rel=\"noreferrer noopener\" href=\"https:\/\/angularjs.org\/\" target=\"_blank\">https:\/\/angularjs.org\/<\/a>, You will see there are two option to download AngularJS library :-<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"435\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/angularjs-environment.jpg\" alt=\"\" class=\"wp-image-9517\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/angularjs-environment.jpg 764w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/angularjs-environment-300x171.jpg 300w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/angular\/angular.js\" target=\"_blank\"><strong>View on GitHub<\/strong><\/a> :-&nbsp;Click on this button to go to GitHub and get all of the latest scripts.<\/li><li><strong>Download AngularJS 1<\/strong> :- When You click on download AngularJS 1, a popup screen would be seen &#8211;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"478\" height=\"337\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/download-angularjs.jpg\" alt=\"\" class=\"wp-image-9518\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/download-angularjs.jpg 478w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/download-angularjs-300x212.jpg 300w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/figure><\/div>\n\n\n\n<p>This screen gives various option of using AngularJS as follows : &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There are two different options <strong>legacy<\/strong> and <strong>stable<\/strong>. <strong>Legacy<\/strong> has version less than 1.2x and <strong>stable<\/strong>&nbsp;has 1.5x version.<\/li><li>We can also go with the <strong>minified<\/strong>, <strong>uncompressed<\/strong> or <strong>zipped<\/strong> version.<\/li><\/ul>\n\n\n\n<p>Now let us see a simple example of AngularJS library : &#8211;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/a875bf65fbffd79a211f08dc4906e88c.js\"><\/script>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">MVC Architecture<\/h2>\n\n\n\n<p>Model View Controller is a software design pattern for developing web applications. A Model View Controller is made up of the following three parts : &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Model<\/strong> :- It is the lowest level of the pattern responsible for maintaining data.<\/li><li><strong>View <\/strong>:-&nbsp;It is&nbsp;responsible for displaying all or portion of the data to the user.<\/li><li><strong>Controller&nbsp;<\/strong>:- It is a software code that control the interaction between the <strong>Model<\/strong> and <strong>View<\/strong>.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/model-view-controller-cotocus.jpg\" alt=\"\" class=\"wp-image-9519\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/model-view-controller-cotocus.jpg 640w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/01\/model-view-controller-cotocus-300x225.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Expressions<\/h2>\n\n\n\n<p>AngularJS expressions can be written inside double braces : {{ expressions }} . Expressions can also be written inside a directive : ng-bind=&#8221;expression&#8221;. AngularJS expressions are JavaScript expressions and outputs the data where they are used.<\/p>\n\n\n\n<p>If you want to understand these expressions, just see the below examples :<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/f09e79721ff7b8381b49b3affc6fd478.js\"><\/script>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/f9e96b195112f4cf8efb2154025dccdc.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS is a JavaScript Framework. It can be added an HTML Page with a &lt;Script&gt; tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. It is used in Single Page Application (SPA) projects. It was developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google&#8230;.<\/p>\n","protected":false},"author":8,"featured_media":9581,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5487],"tags":[5711,1243,5651,5714,5457,1122,4459,1692,213,5650],"class_list":["post-9180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-angularjs","tag-beginner","tag-controller","tag-filter","tag-framework","tag-guide","tag-html","tag-model","tag-tutorial","tag-view"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/9180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=9180"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/9180\/revisions"}],"predecessor-version":[{"id":9582,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/9180\/revisions\/9582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/9581"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=9180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=9180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=9180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}