Web Application using rest in AngularJS – Part-1

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 :

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

header.html

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

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):

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

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 :

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

Now, in your main.js

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

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.

Written by 

Principal Architect at Knoldus Inc

1 thought on “Web Application using rest in AngularJS – Part-1

Leave a Reply

%d bloggers like this: