The Talent500 Blog
Becoming a MEAN Stack Developer: Angular Basics 1

Becoming a MEAN Stack Developer: Angular Basics

Introduction

In this series on the MEAN stack, we have previously discussed what MEAN is and its individual components. It is time to begin our in-depth exploration of AngularJS and its fundamentals.

AngularJS is a framework written in JavaScript that helps developers create interactive single-page programmes. Because it’s a framework, it relies on pre-existing HTML code templates to carry out certain tasks. Angular JS’s data-binding and dependency features reduce the need to write tedious code. Since all of these capabilities already exist inside a browser, this technology is well-suited for use as a server.

Static papers and dynamic apps are two very different things. As a rule, a library and framework that facilitates the development of web apps are used by dynamic applications. The framework will accept the data and automatically call the functions included in the library to carry out the required operations. The new HTML structures produced by AngularJS, however, make this incompatibility unnecessary. It uses directives to generate fresh syntax.

Architecture: MVC Architecture

Commonly referred to as “MVC,” Model View Controller is a paradigm used to structure software for creating websites and web-based applications. The three components of a Model View Controller pattern are as follows:

Model: It is the pattern’s smallest granularity and is in charge of data storage.

View:  It is in charge of showing the information, in whole or in part, to the user.

Controller: The controller is the piece of code that manages how the model and view communicate with one another.

Popularity of MVC may be attributed to its ability to separate concerns by decoupling application logic from the UI layer. All requests to the application are received by the controller, which then collaborates with the model to generate the necessary data for the view. The view then makes use of the controller-prepared data to produce the final, visually appealing answer. The following is a graphical representation of the MVC abstraction.

Becoming a MEAN Stack Developer: Angular Basics 2

AngularJS Concepts

In the previous blog, you would have learnt already how to get started with Angular and installing it. Let’s continue from where we left.

To get Angular up and running, just run “ng new,” and it will install all the required npm packages and other dependencies. Some time may be needed for this.

Becoming a MEAN Stack Developer: Angular Basics 3

You can host or start your application by running “ng serve” in the application directory.

Becoming a MEAN Stack Developer: Angular Basics 4

Angular components

It is said that Angular Components are the heart of Angular Application. Applications written in Angular are composed of components. In other words, they show information visually, respond to input, and act accordingly.

Component are directory structure look like this: 

Becoming a MEAN Stack Developer: Angular Basics 5

FILES DETAILS
app.component.ts The component class code, written in TypeScript.
app.component.html The component template, written in HTML.
app.component.css The component’s private CSS styles.

Now, let’s add our first element. To add our own html to our project we will make changes to app.component.html. When you create your first project there would already be html code in there, referring to the angular home page. You can delete it and write your own piece of HTML tag. To begin with we will just at h1 tag to our app.component.html.
“<h1>This is our first Angular App</h1>”

The Frontend right now looks like these, which we will keep on enhancing as we go through the basics. 

Becoming a MEAN Stack Developer: Angular Basics 6

We will add some basic css in app.component.css to stylize our frontend. 

Creating our first Component

Use ng generate to create a new component named mycomponent

Becoming a MEAN Stack Developer: Angular Basics 7

Becoming a MEAN Stack Developer: Angular Basics 8

To edit our component we will be editing our mycomponent.component.html.

<h2> Hey this is my first component</h2>

<p>mycomponent works!</p>

To add this view on the top of our existing component we will need to add it to the app.component.html.  Remember to use <app-yourcoomponent-name>. Here in our case its, mycomponent. Hence our code snippet looks like this. 

Becoming a MEAN Stack Developer: Angular Basics 9

Becoming a MEAN Stack Developer: Angular Basics 10

AngularJS Expressions

Like JavaScript expressions, AngularJS ones may include things like literals, operators, and variables.The ng-bind=”expression” syntax allows AngularJS expressions to be written inside a directive.You may enclose an AngularJS expression in double brackets like this: expression {{expression}}.

Example {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}

If the ng-app directive is not present, HTML will render the expression without computing.

Becoming a MEAN Stack Developer: Angular Basics 11

Becoming a MEAN Stack Developer: Angular Basics 12

AngularJS Numbers

Numbers in AngularJS can be used as ng-init and used as expressions or used with ng-bind along with the directive.

Example:
Scenario 1: 

<div ng-app=”” ng-init=”apple=1;orange=5″>

<p>Total fruits: {{ apple * orange }}</p>

</div>

Scenario 2: 

<div ng-app=”” ng-init=”apple=1;orange=5″>

<p>Total fruits: <span ng-bind=”apple * orange“></span></p>

</div>

AngularJS Strings, Array and Objects

Strings,Objects and Arrays  in AngularJS are similar to JavaScript:

Example String: 

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe'”>

<p>The name is {{ firstName + ” ” + lastName }}</p>

</div>

Example Array

<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>

<p>The third result is {{ points[2] }}</p>

Example Object

</div>

<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”>

<p>The name is {{ person.lastName }}</p>

</div>

AngularJS Modules

An application is defined by an AngularJS module. The module is a container for the many components of an application. The module serves as a home for the application controllers. Controllers are always associated with a module.

Creating a Module

A module is created by using the AngularJS function angular.module The “myComponentApp” option denotes an HTML element in which the programme will be executed. You may now add controllers, directives, filters, and other features to your AngularJS application.

<div ng-app=”myComponentApp”></div>

<script>

var app = angular.module(“myComponentApp”, []);

</script>

Adding a Controller

AngularJS controllers control the data flow in the Angular Applications. These are basically javascript objects. To add a controller inside the module, we use ng-controller declaration. 

<div ng-app=”myComponentApp” ng-controller=”myController”>

{{ firstName + ” ” + lastName }}

</div>

<script>

var app = angular.module(“myComponentApp”, []);

app.controller(“myController”, function($scope) {

  $scope.firstName = “John”;

  $scope.lastName = “Doe”;

});

</script>

AngularJS Directives

AngularJS allows you to expand HTML by adding new properties known as Directives. AngularJS includes a collection of directives that provide functionality to your apps. AngularJS also allows you to create your own directives.

Directives

Directive elements in AngularJS are extended HTML attributes that begin with the prefix ng-. When an AngularJS application is started, it is via the ng-app directive. When a page is loaded, the ng-app directive will immediately start the application. An application’s data is set up using the ng-init directive. HTML controls (input, select, textarea) may have their values dynamically retrieved from application data using the ng-model directive.

Data Binding

The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ firstName }} is bound with ng-model=”firstName”.

In the next example two text fields are bound together with two ng-model directives:

<div ng-app=”” ng-init=”quantity=1;price=5″>

Quantity: <input type=”number” ng-model=”quantity”>

Costs:    <input type=”number” ng-model=”price”>

Total in dollar: {{ quantity * price }}

</div>

Creating a Directive

You are not limited to using just the pre-existing directives in AngularJS; you may also write your own. The.directive function is used to generate new directives.

To invoke the new directive, make an HTML element with the same tag name as the new directive. When naming a directive, you must use a camel case name, demoTestDirective, but when invoking it, you must use – separated name, demo-test-directive:

<body ng-app=”myApp”>

<demo-test-directive></demo-test-directive>

<script>

var app = angular.module(“myApp”, []);

app.directive(“demoTestDirective”, function() {

  return {

    template : “<h1>Made by a directive!</h1>”

  };

});

</script>

</body>

AngularJS Events

Simply use one of the following AngularJS directives to attach event listeners to HTML elements:

ng-blur

ng-change

ng-click

ng-copy

ng-cut

ng-dblclick

ng-focus

ng-keydown

ng-keypress

ng-keyup

ng-mousedown

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-mouseup

ng-paste

AngularJS’s event directives let us trigger code execution in response to certain user interactions.

Both the HTML event and the AngularJS event will be fired.

You can look into these Events in Angularjs Official Documentation. 

AngularJS Forms

Forms in AngularJS provides data-binding and validation of input controls.

Input Controls

Input controls are the HTML input elements:

  • input elements
  • select elements
  • button elements
  • textarea elements

Data-Binding

Input controls provide data-binding by using the ng-model directive.

<input type=”text” ng-model=”firstname”>

The application does now have a property named firstname.

The ng-model directive binds the input controller to the rest of your application.

Input Types

In terms of forms, angularJS is similar to HTML input types. 

Checkbox

The value true or false is assigned to a checkbox. You should utilize the value of a checkbox that has the ng-model directive applied to it in your application.

 <form>

  Check to show a header:

  <input type=”checkbox” ng-model=”myVar”>

</form>

<h1 ng-show=”myVar”>My Header</h1>

Radio Buttons

Utilizing the ng-model directive, you may bind radio button functionality to your application.

Different values may be assigned to radio buttons that share the same ng-model, but only the value of the button that is chosen will be utilized.

<form>

  Pick a topic:

  <input type=”radio” ng-model=”myVar” value=”dogs”>Dogs

  <input type=”radio” ng-model=”myVar” value=”tuts”>Tutorials

  <input type=”radio” ng-model=”myVar” value=”cars”>Cars

</form>

Selectbox

Through the use of the ng-model directive, you may bind select boxes to your application.

The value of the option that is currently chosen in the choose box will be assigned to the property that is declared in the ng-model attribute.

<form>

  Select a topic:

  <select ng-model=”myVar”>

    <option value=””>

    <option value=”dogs”>Dogs

    <option value=”tuts”>Tutorials

    <option value=”cars”>Cars

  </select>

</form>

Conclusion:

Through reading this blog, you will get familiar with the fundamentals of AngularJS. Even though there is still a great deal of material to go through in more detail, the purpose of this blog is to familiarize you with angular in the quickest and easiest manner possible. In the subsequent post after this one, we are going to begin with the AngularJS project of our MEAN project.

In the meanwhile, I recommend that you go over the material around AngularJS and that you post any questions you have in the comment box.

 

 

0
Shubham Singh

Shubham Singh

He is a SDE-2 DevOps Engineer, with demonstrated history in working with scaling startup. A problem solver by mettle, who loves watching anime when he is not working. He is a learner and educator by heart.

Add comment