What is angular js framework?

AngularJS is a very popular javascript framework by google. It is used to build dynamic web and mobile applications. Very efficient and powerful way to create web applications.

You might have seen google analytics website which they build using angularjs.

Let's practically learn about angularjs 1 framework so that you will better understand what it is in order to learn angularjs you must know about html and css. I would assume that you know about html and little bit of css.

How to install angularjs?

In order to install angularjs to your web application you need cdn path for angularjs version 1. Once you have the link add script tag in your html header section as shown below.

In this tutorial we will use bootstrap and angularjs, copy paste following code to your index.html file:

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>AngularJS 1</title>

    <!-- cdn for ootstrap Links for css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- cdn for angularjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
</head>
<body>
    <div class="container">
        <h1>Using {{'Bootstrap' + ' and ' + 'AngularJS'}}</h1>
    </div> 
</body>
</html>

What is ng-app attribute?

ng-app attribute is considered as a root element of angularjs application.

The ng-app attribute represents an AngularJS directive, called ngApp. This attribute basically defines the scope of angularjs application. It tells developer that part of html or entire page should be considered as angularjs application.

It is not necessary to put ng-app attribute in html tag as it just defines the scope for their children elements. In above code check for line:

<html lang="en" ng-app>

Next, we placed url for angular js cdn and cdn for bootstrap as seen below:

<!-- cdn for ootstrap Links for css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<!-- cdn for angularjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>

This cdn basically grabs the angularjs javascript or bootstrap css code from remote server.

CDN's are used to load files quicker because cdn servers are located globally. For example, if you have your webserver located in india and some one from usa will access your web page.

The request takes a while as your files are not served from usa. However if you use cdn your cdn providers might have servers located in usa which make it easy to load.

Finally, we will look at the code in body tag show below:

<h1>Using {{'Bootstrap' + ' and ' + 'AngularJS'}}</h1>

This line represents two main features of angularjs application:

  • A binding, denoted by double-curlies: {{ }}
  • A simple expression used in this binding: 'Bootstrap' + ' and ' + 'AngularJS'

Strings within double-curlies will be parsed as text in angular js and using + symbol you can join multiple strings together and they will be displayed as a single string.

Later in other tutorials regarding angularjs you will see that we will add variables in double-curlies dynamically.

News and Updates

Subscribe to our newsletter and receive the latest news from TheThemeio.


Related Tags


Related Articles