In Enterprise Application course, we are to set up an web application to help business process in enterprise. Our team decide to develop a Human Resource Management Web Application which modules include recruitment, benefits and payroll. We are also required to post tutorial on how we build this application, and so here it is:
Introduction to AngularJS AngularJS is a JavaScript Framework that lets you extend HTML vocabulary for your application. It is a fully client-side framework that implements the Single-Page Application principles. AngularJS’s templating is based on bidirectional UI Data-Binding. Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. The HTML template is compiled in the browser. The compilation step creates pure HTML, which the browser re-renders into the live view. The step is repeated for subsequent page views. In traditional server-side HTML programming, concepts such as controller and model interact within a server process to produce new HTML views. In the AngularJS framework, the controller and model states are maintained within the client browser. Therefore, new pages are capable of being generated without any interaction with a server.
Tutorial of AngularJS Static (Without Database) Here we will give some tutorial on how to develop static AngularJS without connection to database. In this section, we will only discuss about the recruitment module.
Project Structure:
– Project_Title
– app (Folder)
– admin (Folder)
– adminService.js
– recruitment_detail.html
– recruitment_detail.js
– attendance (Folder)
– css (Folder)
– employee (Folder)
– home (Folder)
– home.html
– home.js
– img (Folder)
– login (Folder)
– login.html
– login.js
– loginService.js
– recruitment (Folder)
– recruitment.html
– recruitment.js
– recruitmentService.js
– app.js
– index.html
Index.html
In index.html, we put the template of the whole web. This include: css, js, header, footer, and all component that won’t change as you navigate around the web.
<a href = “#!/”></a> –> will search for ‘/’ routeProvider condition in the controller.
<div ng-view></div> –> a tag that simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration. remember to declare all of the css and JavaScript that you use in the web here (this include the js file that you create (controllers and services).
app.js
declare all of the app level module that depends on views and components. For example:
ngRoute, myApp.recruitment, myApp.home (own created module).
app.js is a controller, here we give a routing function to redirect to home.html when the web is first run.
home.html
this is the first page that will be shown when you run the web. Click on the recruitment to redirect to the recruitment page.
recruitment.html
ng-submit –> to define what function to call when the submit button in a form is clicked.
ng-class –> is a directive dynamically binds one or more CSS classes to an HTML element.
ng-model –> is a directive you can bind the value of an input field to a variable created in AngularJS.
ng-show –> is a directive that shows the specified HTML element if the condition specified is true, otherwise the HTML element is hidden.
ng-disabled –> is a directive that sets a form field (input, select, textarea, or button) into disabled when the condition specified return true.
validation in recruitment.html image
recruitment.js
the routeProvider here will let server know where to redirect when ‘/recruitment’ is called and what controller will be used in that page.
Then, create the controller for the recruitment in this case RecruitmentCtrl, define the $scope ( an object for binding between the recruitment.html and RecruitmentCtrl) and the services that will be referred in the controller in this case recruitService.
$scope.recruit is to declare the function recruit() that can be called in the recruitment.html. When this function is called it will call to the function addRecruit() in the recruitService and pass all the input in the recruit.html for as the parameter.
recruitmentService.js
Here we create the service for the recruitment, we named it recruitService. As before don’t forget to declare all the module to be used in this service ($location, adminRecruitService). Next, we declare the function addRecruit(data) which again pass the data to the admin by calling to the addRecruit(data) in the adminRecruitService.
$location.path(‘/’) –> is used to redirect user to the home page when the submit button in recruitment is clicked.
adminService.js
In this js file, all of the services related to the admin functionality is declared.
The adminRecruitService is declared here. var recruits is to initialize variable and give some static data to the recruits. getRecruits() function is to return all of the data in the recruits array and addRecruit(data) is a function to push additional data into the recruits array.
Only admin that will be able to see the list of all people that apply to the company so next we create the login function and the recruitment list in the admin page.
login.html
Similar to the recruitment.html we create a form in this file, however we add an ng-if which is a directive that remove the HTML element when the condition is false, meaning this error message will only be shown if there error message return true.
login.js
the route to ‘/login’ and LoginCtrl is set in this js file. Create a login() function which will be called when the login button is clicked then again call the login(username, password) function in AuthenticationService to verify the user login.
loginService.js
Here we declare the AuthenticationService and the function login(username, password) in it. The function will check the user input and redirect to admin page or employee page based on the role. However, if the input does not match any of the data then it will return error and will be shown by the ng-if in the login.html.
recruitment_detail.html
We create a table to show all of the applicants. Let’s add some search and sorting function for this table.
ng-model=”search” –> to bind the input in this field with variable in AngularJS for searching function.
ng-click=”sortColumn(‘name’)” –> when the cell is click will call to the function sort by name.
ng-repeat=”recruit in recruits | filter:search
orderBy:column:reverseSort” –> to loop across all recruits array, in each looping store the data of index loop to recruit. Filter the table based on the input in the search field if it is filled and lastly, Order the table based on user choice.
recruitment_detail.js
set the routing and create the controller like before.
call the getRecruits() in adminRecruitService to get the recruits array and initialize the value to $scope.recruits which will be looped in the
recruitment_detail.html
set the sortColumn(colname) function for sorting the table.
Next let’s learn how to connect this recruitment to database. Enterprise Application Final Project: AngularJs + NodeJs
*********************************************************
Chelsy 1701319994 Evelyn Kharisma 1701320825 Fansi Lantana 1701341741 Janis Giovani Tan 1701320560