Angular Js 1-x From scratch part 1

Angular Js 1-x From scratch part 1

AngularJS is a structural framework for dynamic web apps. It lets you extend HTML’s syntax to express your application’s components in a clear and concise manner.

AngularJS teaches the browser new syntax through constructs called directives. With the AngularJS framework you can build a versatile application using custom declarative elements with basic application features done for you out of the box.

What You Should Already Know

This tutorial focuses on AngularJS concepts and therefore requires basic understanding of the following technologies;

HTML
CSS
JavaScript

AngularJS is a JavaScript Framework

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

In AngularJS, the MVC pattern is implemented in JavaScript and HTML. The view is defined in HTML while the model and controller are implemented in JavaScript.

now we are going to implement our first angular application

<!DOCTYPE html>
<html>
<head>
  <title>Angular Js Tutorial TrynDEv>/title>
</head>
 <body ng-app="myApp">
  <div ng-controller="myCtrl">
   </div>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libsangularjs/1.6.9/angular.min.js"</script>
 <script type="text/javascript" src="app.js">
 </script>
</html>

now in my app.js im going to write my first angular application below snippet

var myapp = angular.module('myApp',[]);
myapp.controller('MyCtrl', function($scope){
$scope.name = 'Tryanddev';
});

according to the code we have to create the angular module and controller. inside the the controller we can do our all angular stuffs. and we need to change html also according to the app module and controller.This done by adding the ng-app attribute to the root HTML element of the AngularJS app. ng-controller tells AngularJS what controller to use with this view.

<!DOCTYPE html>
<html>
<head>
 <title>Angular Js Tutorial TrynDEv</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libsangularjs/1.6.9/angular.min.js"</script>
<script type="text/javascript" src="app.js"></scrip>
</html>

Scope

This is the context that holds the data models and functions. Usually, the controller sets these models and functions into the scope, therefore it acts as the glue that binds the controller and the view.
example shows that i changed the html code as below

<!DOCTYPE html>
<html>
<head>
    <title>Angular Js Tutorial TrynDEv</title>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <div>{{name}}</div>
  </div>
</body>
    <script src="https://ajax.googleapis.com/ajax/libsangularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
 
</html>

you can see the preview in browser that name value shows inside the div.

ng-app − This directive starts an AngularJS Application.
ng-init − This directive initializes application data.
ng-model − This directive binds the values of AngularJS application data to HTML input controls.
ng-repeat − This directive repeats html elements for each item in a collection.

AngularJS – Expressions

<p>Expense on Books : {{cost * quantity}} Rs</p>
 
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
 
<p>Marks(Math): {{marks[3]}}</p>

AngularJS – Filters

Filters are used to change modify the data and can be clubbed in expression or directives using pipe character.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
  <li ng-repeat = "subject in student.subjects | filter: subjectName">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

0 0 votes

Article Rating

by kushan

0 Comments

Inline Feedbacks

View all comments