{"id":39273,"date":"2016-01-11T09:39:17","date_gmt":"2016-01-11T09:39:17","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=39273"},"modified":"2016-01-11T12:43:11","modified_gmt":"2016-01-11T12:43:11","slug":"starting-with-angularjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/","title":{"rendered":"Starting with AngularJS"},"content":{"rendered":"

AngularJs provides lots of functionality that we can integrate with our code. It has template, model, controller, services, directive, etc. By using which we can increase our code’s scalability, productivity, efficiency.\u00a0Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write.<\/p>\n

Today, we’ll learn how to start with angularJS,\u00a0so to start, first of all we’ll install\/add it to our web page.<\/p>\n

Both the ways are there, using cdn\u00a0(content delivery network) and by downloading local copy. On should prefer cdn\u00a0over local copy because cdn\u00a0gives update version and for local copy, \u00a0developer has to manage it.<\/p>\n

\"01\"<\/p>\n

Basic binding in\u00a0angularJS<\/p>\n

There are some directive which we use to binding with any element of html as below screenshot.<\/p>\n

\"02\"<\/p>\n

 <\/p>\n

ng-app<\/strong>\u00a0–\u00a0It is used to auto initialize the application whenever the page is loaded.<\/p>\n

ng-model\u00a0<\/strong>– It is used to bind the html element’s value to the application data.<\/p>\n

If you write the above code then you’ll get a text box as below screenshot and and whatever you’ll write in text box will automatically take place below the text box.<\/p>\n

\"03\"<\/p>\n

 <\/p>\n

Creating your own application with angular:\u00a0<\/strong>To create an application, One has to create a module as below screenshot.<\/p>\n

\"04\"<\/p>\n

The next step is creating controllers, so to create controllers for this specific application\/module, we’ll create controller within this module’s object as below.<\/p>\n

\"05\"<\/p>\n

So by this controller demoController\u00a0could be used only within the application that is initialized by demoModule only else it will fire an error. Here “$scope”\u00a0<\/strong>is the variable that defines the scope of this controller, in other language it is same as javascript’s “this”<\/strong>.<\/p>\n

After creating module and controller, we’ll see how it will be used.<\/p>\n

Here “ng-app”\u00a0<\/strong>is used to initialize this particular html element by “demoModule”<\/strong>\u00a0module.<\/p>\n

There is a directive called\u00a0“ng-controller”<\/strong>, it is used to the call the controller of\u00a0module by which this html element is initialized as below html\u00a0element “div”\u00a0<\/strong>is initialized by demoModule\u00a0module, then only controllers that demoModule\u00a0contains, could be used.<\/p>\n

\"06\"<\/p>\n

If the whole code is combined and run, then it prints something like below screenshot.<\/p>\n

\"07\"<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

AngularJs provides lots of functionality that we can integrate with our code. It has template, model, controller, services, directive, etc. By using which we can increase our code’s scalability, productivity, efficiency.\u00a0Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. Today, we’ll learn how to start with angularJS,\u00a0so […]<\/a><\/p>\n","protected":false},"author":23,"featured_media":39292,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2582],"tags":[2581,2064],"class_list":["post-39273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs","tag-javascript"],"yoast_head":"\nStarting with AngularJS - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Starting with AngularJS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"AngularJs provides lots of functionality that we can integrate with our code. It has template, model, controller, services, directive, etc. By using which we can increase our code’s scalability, productivity, efficiency.\u00a0Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. Today, we’ll learn how to start with angularJS,\u00a0so [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-11T09:39:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-11T12:43:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Avneesh Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Avneesh Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\"},\"author\":{\"name\":\"Avneesh Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/044b2928fe042b5059bb617e34cd39f9\"},\"headline\":\"Starting with AngularJS\",\"datePublished\":\"2016-01-11T09:39:17+00:00\",\"dateModified\":\"2016-01-11T12:43:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\"},\"wordCount\":364,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png\",\"keywords\":[\"angularJS\",\"JavaScript\"],\"articleSection\":[\"angularjs\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\",\"name\":\"Starting with AngularJS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png\",\"datePublished\":\"2016-01-11T09:39:17+00:00\",\"dateModified\":\"2016-01-11T12:43:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Starting with AngularJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/044b2928fe042b5059bb617e34cd39f9\",\"name\":\"Avneesh Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5903755481804b5f657313a20e78c284e9af738c131f2df2c4bd1dc129753462?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5903755481804b5f657313a20e78c284e9af738c131f2df2c4bd1dc129753462?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Avneesh Kumar\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/avneesh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Starting with AngularJS - Webkul Blog","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:\/\/webkul.com\/blog\/starting-with-angularjs\/","og_locale":"en_US","og_type":"article","og_title":"Starting with AngularJS - Webkul Blog","og_description":"AngularJs provides lots of functionality that we can integrate with our code. It has template, model, controller, services, directive, etc. By using which we can increase our code’s scalability, productivity, efficiency.\u00a0Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. Today, we’ll learn how to start with angularJS,\u00a0so [...]","og_url":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-01-11T09:39:17+00:00","article_modified_time":"2016-01-11T12:43:11+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png","type":"image\/png"}],"author":"Avneesh Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Avneesh Kumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/"},"author":{"name":"Avneesh Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/044b2928fe042b5059bb617e34cd39f9"},"headline":"Starting with AngularJS","datePublished":"2016-01-11T09:39:17+00:00","dateModified":"2016-01-11T12:43:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/"},"wordCount":364,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png","keywords":["angularJS","JavaScript"],"articleSection":["angularjs"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/starting-with-angularjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/","url":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/","name":"Starting with AngularJS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png","datePublished":"2016-01-11T09:39:17+00:00","dateModified":"2016-01-11T12:43:11+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/starting-with-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/01\/Angular-Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/starting-with-angularjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Starting with AngularJS"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/044b2928fe042b5059bb617e34cd39f9","name":"Avneesh Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5903755481804b5f657313a20e78c284e9af738c131f2df2c4bd1dc129753462?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5903755481804b5f657313a20e78c284e9af738c131f2df2c4bd1dc129753462?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Avneesh Kumar"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/avneesh\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/39273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=39273"}],"version-history":[{"count":3,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/39273\/revisions"}],"predecessor-version":[{"id":39293,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/39273\/revisions\/39293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/39292"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=39273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=39273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=39273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}