Web Application using rest in AngularJS - Part-1

Table of contents

Reading Time: 3 minutes

You know what is AngularJS famous for ?

So before beginning to develop an example web app using angular, let us start knowing about some angular features.

Angular gives you the feature of two way data binding :With reducing the code change in model, it shows the change in model over DOM element in fraction of seconds.

AngularJS is a MVVM (Model-View-ViewModel) : ViewModel here is the $scope of angular, with an API to detect and broadcast changes.

Testing with Angular : Angular is designed with testability in mind. It even comes with its unit test runner setup https://github.com/angular/angular-seed

and many more …

Here, I will divide the web application under 3 groups(explaining first 2 in this blog):

1. Developing a static web application using angular Directives.
2. Adding actions using Angular Routing.
3. Handling RESTful backend with angular $resource – $http service.

Let us start with building some static web pages using Angular Directives.

You will require the following libraries of Bootstrap and Angular :

index.html :

<head>
<link rel="stylesheet" href="../css/bootstrap.min.css>;
<script src="../jquery/1.11.3/jquery.min.js">;
<script src="../bootstrap/3.3.5/js/bootstrap.min.js"></script>;
<script src="../angular/angular.min.js" type="text/javascript"></script>;
<script src="../angular/angular-route.min.js" type="text/javascript"></script>
</head>
<body>
</body>

Create a Navbar for your web application (You can add your own multi view tab designs as per your requirement).

header.html

<nav class="navbar navbar-inverse>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>

Don’t forget to add a view to show your contents – ng-view.

You can add ng-view anywhere you wish your data to be reflected. It acts as a view space for your reflected data.

A form for your Sign Up page :

signUp.html

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Name:</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email" placeholder="Enter email"></div>
</div>
<div class="form-group">
......
</form>

Similarly, design a Sign In page too using basic Html – SignIn.html

Now let’s start connecting your view files together using few angular Directives :

We start with ng-app (Directive to define your application as an angular application):

<body ng-app="firstApp"> //bind your angular application with a name - firstApp

Next: In your custom main.js file, add the following –

var app = angular.module('firstApp', []); //Declare an angular module for your app

Now, its time to include your files.
ng-include : It Fetches, compiles and includes an external HTML fragment.

<body ng-app="firstApp">
<div ng-include="'header.html'"></div>
</body>

Did you noticed something weird above ? The ng-include directive is adding the file name within both the double quote – ” ” , and a single quote – ‘ ‘ .

ng-include is expecting a variable with the name of the file to include.
To pass the name directly as a string, we use single quotes (‘…’)

Now, let’s add our Sign Up page :
Angular Routing will not only give you the form but reflects it without refreshing your page.

Start with Angular Routing :
In your header.html :

<li><a href="#signUp">Sign Up</a></li>

You will notice ‘#signUp’ above. Yes, Angular redirection URL includes # (Hash) to be appended before the new redirection link.

Now, in your main.js –

var app = angular.module('demo', ['ngRoute']);

Add, ngRoute in your array of dependencies for providing routing. Next, create a config function –

app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'main.html'
}).
when('/signUp', {
templateUrl: 'signUp.html'
}).
when('/login', {
template: '<div class="alert alert-success fade in" style="margin: 86px 281px 7px; width: 50%"><strong>Congrats!</strong> You successfully logged In'
}).
otherwise({
redirectTo: '/'
});
});

here ,
app – is your angular module variable that you created above.
.config – is an angular function run when page loads. It configures routes.
$routeProvider – is the angular service. Controller calls angular injector to provide him with the service and Angular DI ( Dependency injector) returns back the routing service in the form of parameter to the controller.
when – block matches with the URL after ‘/’. Redirects to angular template associated with the respective matching condition.

Few angular routing properties :

template : where you can directly write a template
templateURL : where you give the URL
controller : where you can define the controller name , to which it would hit and get the corresponding action.

This way you are redirected with your SignUp form using angular Redirection.

For the code, you can refer here.

Handling of angular controllers and doing form validations, will be continued in the next part of this Blog.