- SPLessons

AngularJS Tutorial for Beginners –...

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Tutorial for Beginners – Lesson

AngularJS Tutorial for Beginners – Lesson  

Welcome to AngularJS , We wanted to start a serious of articles which  describes on AngularJS  that will help to learn for beginners of AngularJS. So, let’s go with  the first article on AngularJs i.e., AngularJS Tutorial for Beginners – Lesson1

Before you study AngularJS, You should have basic understanding of

  1. HTML
  2. CSS
  3. JavaScript

to easily understand the AngularJS framework.

Description :

 AngularJS :

AngularJS is the (relatively) new kid on the coding block . AngularJS is a JavaScript framework that makes it easier to develop our Web applications. AngularJS  is Developed in 2009 by Miško Hevery and Adam Abrons — both Google employees at that time . It is entirely JavaScript and client –side. AngularJs can run on anywhere like as a JavaScript. It’s is a light weight framework and it is opensource under the MIT license.

AngularJs is perfect for Single Page Applications. Today , We have many JavaScript frameworks are available like Backbone.js ,ActiveJS, Eyeband and Knockout etc. But AngularJS is more famous because it is a lightweight and easy to learn.  Now , more and more developers are using it and thus the community has grown significantly. The reason is very Simple.

AngularJS extends HTML attributes with the prefix ng-  are called  Directives and binds the data to HTML with AngilarJS expressions and  better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. It can be added to an HTML page with <script> tag.

AngularJS is based on the MVC pattern.MVC stands for Model -View -Controller . So, AngularJS separates our web application page into three parts are Model-View – Controller. The Views are specified using HTML + AngularJS’s own template language. The models and controllers are specified via JavaScript objects and JavaScript functions.

Here is a simple “Welcome to AngularJS” example made with AngularJS which shows the model, view and controller parts of an AngularJS application:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<title>Welcome to AngularJS</title>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>

<div ng-controller="WelcomeController" >
 <h2> {{title}} </h2>
</div>

<script>
angular.module("myApp", [])
 .controller("WelcomeController", function($scope) {
 $scope.title = " Welcome to AngularJS ";
});
</script>

</body>
</html>

ng-app:

First thing that we notice is an attribute ng-app within <html> tag. This ng-app nattribute tells the Angular to be active in this portion of the page. So in our case entire document. Suppose  if assign ng-app attribute to particular <div> tag. So, only the portion of <div> tag is activated by AngualrJS.

Inorder to write  Welcome to AngularJS application in AngularJS . So, it is needed to include AngularJS JavaScript in our document.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

In the above example “view” part :

<div ng-controller="WelcomeController" >
 <h2> {{title}} </h2>
</div>

ng-contoller attribute tells that the perticular view is defined under WelcomeController.

{{title}} 

Note how we wrap our model value in double curly braces. This tell Angular to bind the value of model title in place of {{title}}

In the above example “controller” part:

<script>
angular.module("myApp", [])
 .controller("WelcomeController", function($scope) {
 $scope.title = " Welcome to AngularJS ";
});
</script>

This code registers a controller function named “WelcomeController” in the angular module named “myApp”. The $scope parameter passed to the controller function is the “model” object.So, model is an Property of an $scope object to access and bind the values of view part under WelcomeController. Finally, We set the value to model title property of $scope object in WelcomeController.