Building a Simple Web Application Using AngularJS

angularjs

Different types of web developers have taken to using AngularJS, an excellent framework that meets their needs. As a web developer, whether you are a beginner and you are trying to come up with your own simple applications or you are a professional that wants to use the best framework, AngularJS is the solution. While you begin using Angular js., you can at the same time learn more about apps development and how to develop better apps than you have done in the past. If you are looking for the best practices in the creation of applications, you will be better off building them using AngularJS. This is a framework that never disappoints in its features and ability to create amazing applications.

AngularJS has the sufficient features that you will need in the creation of a simple application. Together with, firebase, you can come up with a simple and useful app. The resulting application will be ready to use and the owner will be able to sign in or to sign up in order to create a post on it.

Introduction to AngularJS and Firebase

Introduction to Angular.js and Firebase

AngularJS is currently the most preferred JavaScript MVC framework by many web developers. It is the best to use if you want to create different kinds of applications because of its ability to extend HTML capabilities. With AngularJS, you will not need many codes in order to come up with a good application. This is because it has amazing features like dependency injection and binding.

Firebase on the other hand is a great support for AngularJS if you do not want to worry about backend support after you have created your application. With firebase, your application will be able to back up data in real time, but you have to make some API calls.

AngularJS in itself has a lot to offer but with firebase, you will get a better application.

Getting started

You will need angular-seed project that will get you started with creating simple web apps using AngularJS. You have to download it before you proceed. Once it is downloaded, you will need to go through its directory in order to install the dependencies that will be required. The illustration is as shown:
[javascript]
$ cd angular-seed
$ npm install ## Install the dependencies
[/javascript]
The next step will be to start the node server as illustrated:
[javascript]
$ npm start ## Start the server
[/javascript]

Once it is up and running, point your browser on http://localhost:8000/app/index.html,whioch will show you a default application running.

Go to the directory of the app that is inside the angular-seed, which is where the application code will be.

App.js, which is the core of the application, will be inside the app folder. All the app-level modules and routes inside app.js should be declared.

Naturally, you will find two views of angular-seed, which are view 1 and view 2. They are always there by default. These views should be deleted from the app folder.

Now start creating an app from scratch: you will open app.js and delete the code that you will find there. Define your application routes in app.js. For this, you will need ngRoute, an AngularJS module. It is not there by default, therefore you have to inject it to your application in order to use it. Add it to your application using angular module like below:
[javascript]
angular.module('myApp', [
'ngRoute'
])
[/javascript]

ngRoute module will bring along a very important component, $routeProvider, which is perfect in configuring routes. This is the code you should use in order to inject $routeProvider into the configuration method of angular-module so as to define routes:
[javascript]
'use strict';
angular.module('myApp', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
// Routes will be here
}]);
[/javascript]

After this, you can now open index.html. Clear out everything from the body of index.html apart from script references and the div. Below is an illustration for this:

Every time a route will change, the content of the div above changes as well.

Creation of a sign in view

Create a new folder inside the app directory, andyou can call it home. Inside that folder, create two more folders, home.js and home.html. Open home.html and include the code below in it:
[html]
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS & Firebase Web App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
<a href="#"> Sign Up</>
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body></html>
[/html]

Inside home.js, a route will be created in order to access home view. A controller will also be set up for the $scope that has been created for home view. A controller will always control a particular view. It will be like below:
[javascript]
use strict';
angular.module('myApp.home', ['ngRoute'])
// Declared route
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
// Home controller
.controller('HomeCtrl', [function() {
}]);
[/javascript]

The application is now ready. Open app.js, then include myApp.home home module in the application. Declare a default route for your application to your home view using this method $routeProvider.otherwise. An illustration is as below:
[javascript]
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.home' // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
// Set defualt view of our app to home
$routeProvider.otherwise({
redirectTo: '/home'
});
}]);
[/javascript]

If you want to display your home page, include home.js inside the app’s main HTML template file. To do this, open the index.html and include the following code:
[javascript]
<script src="home/home.js"></script>
[/javascript]

You are now done and the app is ready for use! To start using your app, restart your server and direct your browser to http://localhost:8000/app/index.html for the sign in page, which will give you access to your application.

angularjs and firebase app

To use firebase for the reasons explained above, you will need an account with Firebase. You have to include the url of the application created on the screen that will show up after the account has been created, then click on ‘manage the app’.

Being able to develop your own application is awesome! Angular.js has everything you need for such a development. The app will be up and running in just a few minutes!

LEAVE A REPLY

Please enter your comment!
Please enter your name here