Angular JS - 2018

Load framework.
Define AngularJS application using ng-app directive.
Define a model name using ng-model directive.
Bind the value of above model defined using ng-bind directive.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>

   <p>
    Enter your name: <input type="text" ng-model = "name" >
   </p>
   <p>
    Hello <span ng-bind = "name"></span>!!!!!!!!
   </p>
</body>
</html>

How AngularJS Integrates with HTML 
· The ng-app directive indicates the start of AngularJS application. 
· The ng-model directive creates a model variable named name, which can be used with the HTML page and within the div having ng-app directive. 
· The ng-bind then uses the name model to be displayed in the HTML tag whenever user enters input in the text box.
· Closing tag indicates the end of AngularJS application.
AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. Let us discuss the following directives:
· ng-app - This directive starts an AngularJS Application.
· ng-init - This directive initializes application data.
· ng-model - This directive defines the model that is variable to be used in AngularJS. 
· ng-repeat - This directive repeats HTML elements for each item in a collection.

Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in

{{ expression}}. Expressions behave similar to ngbind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>

   <p>
    Enter your name: <input type="text" ng-model = "name" >
   </p>
   <p>
    Hello <span ng-bind = "name"></span>!!!!!!!!
   </p>

   <div>10+20={{10+20}}</div>
</body>
</html>

This will give you output 10+20=30. Inside {{}}, is called the expression.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>

   <p>
    Enter your name: <input type="text" ng-model = "name" >
   </p>
   <p>
    Hello <span ng-bind = "name"></span>!!!!!!!!
   </p>

   <div>10+20={{10+20}}</div>
   <div>{{ {name: 'David', age: '30'}.name }}</div>
</body>
</html>

Here inside {{}} there is plain old javascript object. with name property and value David. Now we can retrive the value of the property name as above.

We can also use array as follows:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>

   <p>
    Enter your name: <input type="text" ng-model = "name" >
   </p>
   <p>
    Hello <span ng-bind = "name"></span>!!!!!!!!
   </p>

   <div>10+20={{10+20}}</div>
   <div>{{ {name: 'David', age: '30'}.name }}</div>
   <div> {{ ['david', 'ram', 'john'][2] }}</div>
</body>
</html>

-------------------
To display title using controller concept:

<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller = "HomeController">
<h1>{{title}}</h1>
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
      $scope.title = "Angular Project";
});
</script>
</body>
</html>

Name of controller is HomeController.
We can even get title without using expression. i.e. we can use bind as follows:

<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller = "HomeController">
<h1>{{title}}</h1>
<h1 ng-bind = "title"></h1>
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
      $scope.title = "Angular Project";
});
</script>
</body>
</html>

Now let's see two way binding. Here when we update the value in the text, the previous value will get updated.

<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller = "HomeController">
<h1>{{title}}</h1>
<h1 ng-bind = "title"></h1>
<input type="text" ng-model = "title">
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
      $scope.title = "Angular Project";
});
</script>
</body>
</html>

Now in array, we use ng-repeat for looping. here we also display all the values in uppercase.

<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller = "HomeController">
<h1>{{title}}</h1>
<h1 ng-bind = "title"></h1>
<input type="text" ng-model = "title">
<ul>
<li ng-repeat="c in colors">{{c|uppercase}}</li>
</ul>
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
      $scope.title = "Angular Project";
      $scope.colors=["Red","Green","Blue","Black","Orange"];
});
</script>
</body>
</html>

This is called filter.

Now this will display a box to add color on previous color list:

<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller = "HomeController">
<h1>{{title}}</h1>
<h1 ng-bind = "title"></h1>
<input type="text" ng-model = "title">
<ul>
<li ng-repeat="c in colors">{{c|uppercase}}</li>
</ul>
<input type="text" ng-model="color" placeholder="Add Color"/>
<button type="submit" ng-click="addColor()">Add</button>
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
      $scope.title = "Angular Project";
      $scope.colors=["Red","Green","Blue","Black","Orange"];
});
</script>
</body>
</html>

Now to complete this add following:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller = "HomeController">
<h1>{{title}}</h1>
<h1 ng-bind = "title"></h1>
<input type="text" ng-model = "title">
<ul>
<li ng-repeat="c in colors">{{c|uppercase}}</li>
</ul>
<input type="text" ng-model="colorNew" placeholder="Add Color"/>
<button type="submit" ng-click="addColor()">Add</button>
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
      $scope.title = "Angular Project";
      $scope.colors=["Red","Green","Blue","Black","Orange"];
      $scope.addColor=function(){
      $scope.colors.push($scope.colorNew);
      };
      

});
</script>
</body>
</html>

===================
Now student management system:

First check this:

<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</head>
<body ng-app="app">
<div class="container" ng-controller="HomeController">
<div class="pulll-right">
<p>
</p>
</div>
<table class="table table-bordered table-striped table-hover">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr ng-repeat="s in students">
<td>{{s.id}}</td>
<td>{{s.firstName + " " + s.lastName}}</td>
<td>{{s.email}}</td>
<td>{{s.status}}</td>
<td>
<a href="{{s.id}}" class="btn btn-success btn-sm">Edit</a>
<a href="{{s.id}}" class="btn btn-danger btn-sm">Delete</a>
</td>
</tr>
</table>
</div>

<script>
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){

    $scope.students=[{id:1,firstName:"Bishal",lastName:"Lama", email:"bishalama@gmail.com", status:"true"},
    {id:2,firstName:"Nischal",lastName:"Thapa", email:"nishcalt@gmail.com", status:"true"}];
});
</script>

</body>
</html>

--------------------------------

app.html

<meta charset="utf-8"/>
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>

</head>

<body ng-app="app">
<div class="container">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        Angular Project
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#/">Home</a></li>
        <li><a href="#contact">Contact</a></li>
     
      </ul>
  </div>
  </div>
</nav>


<div ng-view></div>
</div>

<script>
var app=angular.module("app",['ngRoute']);

 



</script>
<script src="js/routes/router.js"></script>
<script src="js/services/MathService.js"></script>
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/ContactController.js"></script>
<script src="js/controllers/StudentController.js"></script>

</body>
</html>

HomeController.js
app.controller("HomeController",function($scope,MathService){

    $scope.students=[{id:1,firstName:"Bishal",lastName:"Lama", email:"bishalama@gmail.com", status:"true"},
    {id:2,firstName:"Nischal",lastName:"Thapa", email:"nishcalt@gmail.com", status:"true"}];

    $scope.sumTotal=MathService.add(5,30);
    $scope.multiplyTotal=MathService.multiply(5,30);
});

StudentController.js
app.controller("StudentController",function($scope,$routeParams){

alert($routeParams.id);
});

ContactController.js
app.controller("ContactController",function($scope){

});

router.js
app.config(function($routeProvider){
     $routeProvider.when("/",{
       templateUrl: 'views/partials/home.html',
       controller:'HomeController'
     }).when("/contact",{
      templateUrl: 'views/partials/contact.html',
      controller: 'ContactController'
     }).when("/student/edit/:id",{
      templateUrl: "views/partials/studentedit.html",
      controller:'StudentController'
     }).otherwise("/");
});

MathService.js
app.service("MathService",function(){

this.add=function(x,y){
return x+y;
}

this.multiply=function(x,y){
return x*y;
}

});

StudentService.js

app.factory("StudentService",function($http){

var obj={};
obj.studentList=[];

obj.getAll=function(){
return obj.studentList;
}

obj.getById=function(id){
angular.each(obj.studentList,function(item){
if(item.id==id){
return item;
}
});
return null;
}

obj.insert=function(student){
obj.studentList.push(student);
}

return obj;

});

Contact.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Contact Us</h1>
<form>
<div class="form-grouup">
<label>First Name</label>
<input type="text" ng-model="firstName" class="form-control"></input>
</div>
</form>
</body>
</html>



home.html
<div class="container" ng-controller="HomeController">
<div class="pull-right">
<p>

</p>
</div>
<h1>Sum Total: {{sumTotal}}</h1>
<h1>Multiply Total: {{multiplyTotal}}</h1>
<table class="table table-bordered table-striped table-hover">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th>Actionsssss</th>
</tr>
<tr ng-repeat="s in students">
<td>{{s.id}}</td>
<td>{{s.firstName + " " + s.lastName}}</td>
<td>{{s.email}}</td>
<td>{{s.status}}</td>
<td>
<a href="#/student/edit/{{s.id}}" class="btn btn-success btn-sm">Edit</a>
<a href="#/student/delete/{{s.id}}" class="btn btn-danger btn-sm">Delete</a>
</td>
</tr>
</table>
</div>

studentedit.html

<h1>Student Edit Form</h1>


Now, lets change the service in HomeController from MathService to StudentService:























Comments

Post a Comment

Popular posts from this blog

Jersey JAX RS Jar

Go to: https://jersey.github.io/download.html Jersey JAX-RS 2.1 RI bundle  bundle contains the JAX-RS 2.1 API jar, all the core Jersey module jars as well as all the required 3rd-party dependencies.
Read more

Tomcat Installation Steps for Windows & add tomcat to eclipse

Tomcat is an open source java application server provided by Apache, it is the most popular application server for java environment. 1. Prerequisite Tomcat doesn’t work without java, so before installing tomcat on the machine, you should install a compatible java runtime version and setup  JAVA_HOME   environment variable. Both java and tomcat versions should be compatible so i recommend to always install the same version for java and tomcat, in this tutorial we use java 8 and tomcat 8. 2. Installation Download the windows service installer from  here :  https://tomcat.apache.org/download-80.cgi Install the downloaded file, pass all the setup until reaching  Configuration Options . here you can set the service name, the shutdown port and the running port of tomcat, by default tomcat runs on port 8080,  so i recommend to keep the default configuration as it is, you can always change these configuration after the in...
Read more

REST API

REST - REpresentational State Transfer is a web based architecture and uses HTTP protocol for data communication. The following HTTP methods are commonly used in REST architecture: GET, PUT, DELETE, POST 1) Create "Dyanamic Web Project" - Add web.xml while creating Java Dynamic Web Project. 2) Import Jersey Jar file inside lib folder in WEB-INF. (Get Jersey Jar File from https://jersey.github.io/download.html)
Read more