Best Angularjs 2 Tutorial Basic 2020
Angular JS is the structural JavaScript framework for developing rich Single Page Applications. It is an open-source front end framework based on browser and capable of MVC architecture to reduce the application development time. In this tutorial, I want to cover the basic concepts with some HTML and JavaScript file explanations.
Get Start with Angular.JS Basics
First, we need to create a new folder structure for learning basic angular.js code. The following code is used to create it.
-tutorial-angularjs
| - demo.js
| - basic.html
Creating an application in Angular.JS
Create basic.html file with some sample codes, that allow us to apply in an Angular.Js
basic.html
<!doctype html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<title>Basic AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body data-ng-controller="IndexController">
<h1>Hello, SLA</h1>
<p>{{ summary }}</p>
<!-- CDN INCLUDES -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- INCLUDES --><script src="demo.js"></script>
</body>
</html>
Create demo.js Code
demo.js
angular.module(‘demo’, []).controller(‘IndexController’, function($scope)
{
$scope.summary = “This is demo app created in Angular.JS Framework”;
});
In the above code,
angular.module(‘demo’, [])
Step 1: Create a new Angular.JS application named demo which is used by data-ng-app attribute in basic.html file. This is the fundamental method of creating modules for our use.
Step 2: Create a controller to start adding the logic named IndexController which is used by the data-ng-controller attribute of basic.html file. The code is as follows
.controller (‘IndexController’, function($scope) {
We can create limitless controllers in this module as per our needs. We can use dependency injection to inject Angular.JS $scope variable.
Step 3: Then we use Angular.JS $scope to pass a new variable summary from the JavaScript to our HTML.
$scope.summary = “This is demo app created in Angular.JS Framework”
AngularJS will update this value in place of the braces inserted in the HTML page.
What are the data-ng-* attributes?
data-ng-* contains AngularJS directives to extend the functionality of HTML, we can use only -ng-controller without the data- attribute. Both execute the same functionality.
Data Binding
As we know well, AngularJS has two way binding approach, so we first create a text input that can be updated by the user, and see the changes instantly update in the variable which is stored in JavaScript.
basic.html
<!doctype html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<title>Basic AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body data-ng-controller="IndexController">
<h1>Hello, SLA</h1>
<input id="name" type="text" data-ng-model="name" placeholder="Enter the values" />
{{ name }}
<!-- CDN INCLUDES -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- INCLUDES --><script src="demo.js"></script>
</body>
</html>
Now we do not require to edit the javascript for this execution. So refresh the browser and start type in the required fields
Whenthe prompt comes,we can see user.name variable displayed in the screen. This is done by data-ng-model = “user.name” attribute.
Repeat the elements
Now we will see the demo of another directive Angular ng-repeat. We can implement an array from JavaScript and develop HTML objects to represent it. Now we will modify our demo.js file in the controller section, and rewrite with the following code.
demo.js
$scope.users = [
{
name: "User1",
age: 20,
teams: [
“Designing”
"Coding",
"Testing",
]
},
{
name: "User2",
age: 22,
teams: [
"Testing"
]
},
{
name: "MacMillan",
age: 24,
teams: [
"Coding"
]
},
{
name: "Francis",
age: 23,
teams: [
"Coding",
"Testing"
]
}]
We have created here an array of objects, now we modify the basic.html file to display the modified data in a formatted way.
basic.html
<!-- BODY TAG -->
<ul>
<li data-ng-repeat="users of our company">
Name: {{ user.name }} - Age: {{ user.age }}
<ul>
<li data-ng-repeat="team in user.teams">{{ team }}</li>
</ul>
</li></ul>
<!-- SCRIPTS -->
Code Explanation
The element ngrepeat takes an array of data from the $scope and permits us to implement it. We access each object variable by using dot notations. It can be embedded ng-repeat within another ng-repeat also.
Finally,
Now we can use filters by editing the HTML file Add the code as follows in our HTML file to list out the users
basic.html
<input type = “text” data-ng-model = “search” placeholder = “Enter user name to search”/>
Now edit the ng-repeat code as follows:
<li data-ng-repeat = “users of our company | filter:search”>
Now search simply with the given names or team name. The result will be filtered as per your search
Final Note:
Now we have created the basic HTML file and demo javascript file to execute ng-controller and ng-repeat. Learn Angular.JS Training in Chennai at SLA to develop these kinds of programs with the in-built directives in a faster time. We train students with comprehensive hands-on exercises in our academy. Call us to know about the course benefits at 8608700340.
Comments
Post a Comment