Introduction to AngularJS

Back to home
Logicmojo - Updated Aug 28, 2021



What is Angular?

Angular is a Typescript-based open-source framework for building client-side web applications. Since Typescript is a superset of JavaScript, let us first understand JavaScript briefly. JavaScript runs on the client-side of the web, which can be used to design or program how the web pages behave on the occurrence of an event. Typically, JavaScript is used for interface interactions, slideshows, and other interactive components. JavaScript evolved quickly and has also been used for server-side programming (like in Node.js), game development, etc.

JavaScript deals with dynamic content, which is an important aspect of web development. Dynamic content refers to constantly changing content and it adapts to specific users. For example, JavaScript can be used to determine whether or not to render the mobile version of the website by checking the device, which is accessing the website.

History

AngularJs was originally developed in 2008-2009 by Misko hevery and Adam abrons and is now maintained by Google.

Differences between Angular and AngularJS

 • The architecture of an Angular application is different from AngularJS. The main building blocks for Angular are modules,  components, templates, metadata, data binding, directives, services, and dependency injection. We will be looking at it in  a while.
 • Angular does not have a concept of “scope” or controllers instead, it uses a hierarchy of components as its main     architectural concept.
 • Angular has a simpler expression syntax, focusing on “[ ]” for property binding, and “( )” for event binding
 • Mobile development – Desktop development is much easier when mobile performance issues are handled first. Thus,   Angular first handles mobile development.
 • Modularity – Angular follows modularity. Similar functionalities are kept together in same modules. This gives Angular a lighter & faster core.

Why use it?

Easy to work with: All you need to know to work with AngularJs is the basics of HTML, CSS, and Javascript, not necessary to be an expert in these technologies.
Time-saving: AngularJs allows us to work with components and hence we can use them again which saves time and unnecessary code.
Ready to use a template: AngularJs is mainly plain HTML, and it mainly makes use of the plain HTML template and passes it to the DOM and then the AngularJS compiler. It traverses the templates and then they are ready to use.



Hello World using AngularJS.

Just to give you a little excitement about AngularJS, I'm going to give you a small conventional AngularJS Hello World program

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app ="">
         <p>Enter your Name: <input type ="text" ng-model ="name"></p>
         <p>Hello <span ng-bind ="name"></span>!</p>
      </div>
      
      <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>


Prerequisites: You should have a basic understanding of JavaScript and any text editor. As we are going to develop web-based applications using AngularJS, it will be good if you have an understanding of other web technologies such as HTML, CSS, AJAX, etc.