Angularjs

AngularJS : Get Started

GETTING STARTED WITH ANGULAR JS

 


Angular JS is a JavaScript framework developed and maintained by Google. Used for building MVC (Model View Controller) based applications. Angular JS adds the extended functionality to the HTML tags with its rich set of directives. Before proceeding further let’s have the basic understanding of HTML, CSS and JavaScript concepts.

  • HTML (Hyper Text Markup Language)
  • CSS(Cascading Style Sheet)
  • JavaScript(Scripting Language)
HTML

To develop any web page we need this basic markup language. It basically provides structure to the web page. Let’s create our first yet simple web page using index.html

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Aswini D">
<meta name="keywords" content="HTML">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>My first simple webpage</title>
</head>
<body class="firstWebPage" style="margin:10%">
<p id="displayText">Hello World !!!! </p>
</body>
</html>

Try It!

Here everything will be embedded within HTML element (<html></html>). Metadata, title and any links to the external JS scripts and CSS links will be given under head section.Everything else will go under body element(<body></body>) .

  • Metadata like an author of the web page, description of the page, refresh time, keywords etc.,.  will be defined with <meta/> tag and this data will not be displayed on the web page but used by the browser(Ex: “refresh time”) and search engine(Ex: “keywords”). This will be always embedded in head element(<head></head>)
  • Title gave in <title></title> element will be displayed in your browser’s tab
  • Here content defined under <body> is displayed on the web page as Hello world!!!!
CSS

To customize our web page elements with styles like background color, foreground color, font size, borders, margins etc., we will use CSS(Cascading stylesheet).

All the required styles for an element will be defined in a separate file named with the .css extension. We can either place all the styles in a separate file and include it in our Html file using <link></link> element or we can define them inline using “style” attribute on the element.

Let’s add some styles to our “Hello world!!!!” web page using style.css and include it in Html Code

style.css

.firstWebPage{
background-color:#ffbbdd;
width:100%;
height:70%;
text-align:center;
}

#displayText{
color:#ffffff;
font-style:italic;
font-size:20px;
}

Try It!

JavaScript

Till now we have defined a simple web page structure and added styles to it, now we should make it user interactable, this can be done by JavaScript which adds behavior to the web page.Whatever action users perform on a web page is processed by JavaScript.Incorporating Javascript into web page improves users experience of a web page by converting static pages into dynamic pages.

This processing logic(behaviors) can be included in our Html with <script></script> element.Further, it can be included inline or could be an external source.We always prefer to keep this code in external code hence that can be reused by several files thus promoting code reusability.

Let’s add a simple close button on our web page and display “GoodBye!!!” message on click of it

main.js

function close(){ 
//Close function triggered on click of close button and displays GoodBye!!! to the user
document.write("GoodBye!!!");
}

 Modify index.html file to include the close button and external main.js file

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Aswini D">
<meta name="keywords" content="HTML">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>My first simple webpage</title>
<link href="style.css" rel="stylesheet"/>
<script src="main.js"/>
</head>
<body class="firstWebPage" style="margin:10%">
<p id="displayText">Hello World !!!! </p><br>
<button onclick="close()">Close</button>
</body>
</html>

Try It!

 

Leave a Reply

Your email address will not be published. Required fields are marked *