You know what is AngularJS famous for ?
So before beginning to develop an example web app for you 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.
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 backened -> with angular $resouce – $http service
Let us start with building some static web pages using Angular Directives.
You will require the following libraries of Bootstrap and Angular :
<link rel="stylesheet" href="../css/bootstrap.min.css">
Create a Navbar for your web application (You can add your own multi view tab designs as per your requirement).
<nav class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Brand</a>
<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>
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 :
<form class="form-horizontal" role="form">
<label class="control-label col-sm-2" for="email">Name:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
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.
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 –
template: '<div class="alert alert-success fade in" style="margin: 86px 281px 7px; width: 50%"><strong>Congrats!</strong> You successfully logged In</div>'
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.