{"id":41,"date":"2016-02-24T12:12:19","date_gmt":"2016-02-24T06:42:19","guid":{"rendered":"http:\/\/new.codingislove.com\/?p=41"},"modified":"2018-03-28T17:46:19","modified_gmt":"2018-03-28T12:16:19","slug":"angularjs-for-complete-beginners","status":"publish","type":"post","link":"https:\/\/codingislove.com\/angularjs-for-complete-beginners\/","title":{"rendered":"AngularJS for complete beginners"},"content":{"rendered":"

AngularJS! One of the most popular javascript frameworks available today. Angular is widely used, be it an Intermediate web developer or enterprises like IBM, Paypal, Google etc everyone is using it. In fact AngularJS is maintained and supported by Google. <\/p>\n

Due to its huge popularity, everyone wants to learn AngularJS but it has a steep learning curve because of its concepts like dependency injection, modules, controllers, services, models, 2-way data bindings etc which sound very hard and new for beginners.<\/p>\n

It is so confusing because of too many technical words used in AngularJS documentation and also in many tutorials which are found online. So I’m writing this post for all beginners who wants a simple tutorial with simple words which can help them get started with the mighty AngularJS.<\/p>\n

\"angularjs<\/p>\n

Prerequisites<\/h4>\n

Basic HTML & Javascript knowledge would be enough to understand this tutorial.<\/p>\n

I love to learn by doing so I’ll be sharing examples along with code through out this tutorial.<\/p>\n

Lets go!<\/h4>\n

Wait! but many beginners don’t know what exactly AngularJS does and where is it used in real life? –\u00a0 AngularJS helps in building web apps faster (web apps are nothing but web pages with added functionality and user interaction). By the end of this tutorial you will understand how it makes building apps faster and practical situations where AngularJS is used.<\/p>\n

Getting started with AngularJS<\/h2>\n

Let me explain few concepts of Angular in simple words and then we’ll dive into actually using Angular.<\/p>\n

Modules<\/h4>\n

A Module is just a container of some Javascript code. Modules are used mainly to organize your Javascript code. Every angular app should have at least one module<\/strong>.<\/p>\n

Example : If you are building a webapp like facebook then you can organize your Javascript by having code for profile in ‘Profile’ module,\u00a0 code for newsfeed in ‘NewsFeed’ module etc.<\/p>\n

Controller<\/h3>\n

A controller is just a sub container with additional functionalities.<\/p>\n

Example (building a webapp like facebook) : Javascript code for liking, commenting, sharing posts on newsfeed would be placed in ‘PostController’ and code for displaying ads would be placed in ‘AdsController’<\/p>\n

$scope <\/strong>is an important object in a controller. $scope<\/strong> is the object which contains all the data of a controller. Each controller has its own scope, data in scope is available only to that particular controller. So ‘PostController’ cannot access scope of ‘AdsController’<\/p>\n

Dependencies<\/h3>\n

dependencies are objects which are required by a controller, we specify all the dependencies required when creating a controller.<\/p>\n

Example : to use $scope in a controller, we specify it as dependency and then use it in controller. This concept would be clear once we start creating a controller in next few steps.<\/p>\n

Directives<\/h3>\n

A directive is like an add-on for HTML elements. directives provide additional functionality to your HTML elements. There are many Angular directives and each directive has a different use.\u00a0 We’ll be talking about few directives later in this tutorial.<\/p>\n

\"angularjs<\/p>\n

Putting the pieces together<\/h2>\n

Now that we know few basics of AngularJS lets dive into creating an angular app!<\/p>\n

I’m using codepen.io<\/a> to write HTML,CSS,JS and see the result live in browser. you can start writing code along with this tutorial as the steps are being explained. go to codepen.io, create a new pen and use this basic html below and then follow next steps.<\/p>\n

\r\n<html>\r\n<head>\r\n  <meta charset="UTF-8" \/>\r\n  <title>My first angular app<\/title>\r\n<\/head>\r\n<body>\r\n<div>Hello World!<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Steps involved in creating an Angular app :<\/h3>\n
1. Add AngularJS to your HTML page using script tag<\/strong><\/p>\n
<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.9\/angular.min.js"><\/script><\/pre>\n
2. Create a module<\/strong><\/p>\n
syntax for creating a module :<\/p>\n
angular.module(\u2018modulename\u2019,[]);<\/pre>\n
lets create a module and assign it to a variable<\/p>\n
var myApp = angular.module('myApp',[]);<\/pre>\n
3. Create a controller<\/strong> <\/p>\n
syntax for creating a controller :<\/p>\n
Module.controller(\u2018controllername\u2019,[dependencies,function(dependency variables){\n}]);<\/pre>\n
lets create a controller and also use $scope object to store some data lets say app name. we need $scope object so it should be specified as a dependency.<\/p>\n
\r\nmyApp.controller('MainController', ['$scope',function($scope){\r\n$scope.appname = "Awesome app";\r\n}]);\r\n<\/pre>\n
4. Start angular <\/strong><\/p>\n
we can start AngularJS by specifying the main module using ng-app directive in <html> tag of your HTML file.
\nsyntax for ng-app directive :<\/p>\n
<html ng-app=\"modulename\"><\/pre>\n
Name of module we created is ‘myApp’ so we specify myApp as main module :<\/p>\n
<html ng-app="myApp"><\/pre>\n
Also lets add controller to body element using ng-controller directive. ng-controller directive lets a html element access the data in that controller. we are adding contoller to body element so whole body has access to controller’s data.<\/p>\n
<body ng-controller="MainController"><\/pre>\n
These are the basic steps to create an angular app.<\/em> Now lets use some data to test if AngularJS is working.<\/p>\n
We have defined appname varibale in scope of main controller, To access scope data in html angularjs has a special markup! requried variable has to be wrapped with in ‘{{‘ and ‘}}’ To access appname variable we can use {{appname}}<\/p>\n
Add a <p> tag with welcome to {{appname}} as below and result should be welcome to Awesome app<\/p>\n
<p>welcome to {{appname}}<\/p><\/pre>\n
If something went wrong then cross check with code below : <\/p>\n
\nSee the Pen How to create basic angular app by Ranjith (@Ranjithkumar10) on CodePen.<\/p>\n
\n