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.
This tutorial focuses on AngularJS concepts and therefore requires basic understanding of the following technologies;
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>
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.
<p>Expense on Books : {{cost * quantity}} Rs</p> <p>Hello {{student.firstname + " " + student.lastname}}!</p> <p>Marks(Math): {{marks[3]}}</p>
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>