Skip to main content

RequireJS: More with templating - Dynamic data

Find the previous episode here.

Checkout the part 3 branch
git checkout -b part4.0 origin/part4.0

Lets change the templating a bit different so that we could add data to the template. Now if we click on a link other than home everything will be gone.

So we will move the link list to the index before maincontent so that it will always remain there. Next we will replace the modules/home/Home.html with some dummy text.
The index.html wil looks like this
<div>
  <ul>
    <li><a href="#home">Home</a></li>
     <li><a href="#employee">Employees</a></li>
     <li><a href="#project">Projects</a></li>
  </ul>
</div>
<div id="maincontent">
   	
</div>

Next we will add some more dummy content to other template html file in projects and employees. And also change the controllers to load and how the content. And also we need to change the router.js like this
function routerFn(ctx) {
        if (ctx.hash === 'home') {
            require(['modules/home/HomeCtrl'], function(home) {
                home.start();
            });
        } else if (ctx.hash === 'employee') {
            require(['modules/employee/EmployeeCtrl'], function(home) {
                home.start();
            });
        } else if (ctx.hash === 'project') {
            require(['modules/projects/ProjectsCtrl'], function(home) {
                home.start();
            });
        } else {
            page('#home');
        }
    }
Now if we click the links it will load the appropriate controller and template. Now we need to create the model and populate it in the template. Instead of API we will be using json files.
First we will be populating the employees. For this we will create a dummy json in data folder.
In EmployeeModel.js we will change the code to some this like
define(['jquery'], function($) {
    "use strict";
    function getEmployees(callback) {
        $.getJSON("./data/employee.json", function(data) {
            callback(data);
        });
    }
    return {
        getEmployees: getEmployees
    }
});

In the above we will be loading Jquery as it's dependency module and define a function getEmployees as the function to load the list of employees. We will make the function available to by returning it . We will be using callback function model to pass the data to the controller.
In the controller EmployeeCtrl we will change like following
define(['jquery', 'underscore', './EmployeeModel', 'text!./templates/EmployeeList.html'],
    function($, _, model, tmpl) {
        function start() {
            model.getEmployees(function(data) {
                console.log(data);
                var utmpl = _.template(tmpl);
                $("#maincontent").html(utmpl({
                    list: data.Employees
                }));
            });
        }
        return {
            start: start
        };
    });
Lets check the controller . we will load the model using require and call the getEmployees function using the model refernce. On the callback function we will pass the data to the template . You could see we pass the Employees array into the template as list as the reference.
Next we will change the Employees.html to populate the data.

<div>
	<h1>Employees</h1>
	<p>
		Here is our Employee
	</p>
	<table>
		<tr>
			<th>First Name</th>
			<th>Lastname</th>
			<th>JobTitle</th>
			<th>Phone</th>
			<th>Email</th>
		</tr>
		<% _.each(list, function(item, index){ %>
		
		<tr>
			<td><%- item.firstName%></td>
			<td><%- item.lastName%></td>
			<td><%- item.jobTitleName%></td>
			<td><%- item.phoneNumber%></td>
			<td><%- item.emailAddress%></td>
		</tr>
		<%})%>
	</table>
</div>
Now refresh the page and see the magic, The list will be populated in the employees page.
The magic lies in the strong templating utility of underscore. The data will be populated using _.each functio which will loop the array and populate the data. You could see more options regarding underscore templating in here.

Comments

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.


"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…

Getting started with React native

It's been a long time since i have posted anything in this blog. I have been trying react-native for the last 3 months. And it's been a wonderful experience. From a Angular background it seemed difficult to adopt react initially. Once i got it, it seems very easy and interesting. About the performance of RN is just awesome.
I am using
Windows 10 AndroidInstallation
Installation is pretty simple. There are two ways to create an application, using expo-cli and react-native-cli. I prefer the second one. It seems like a little complex but when developing large application it's the best way to start.

Setup
As a prerequisite we need to install nodeJS, Python, JDK and need to setup Android. We need to install react-native-cli globally for creating and running the project
npm install -g react-native-cli
Running
Once you install the cli we can create the application.
react-native init firstProject After creating the application we can move into the application folder and run the a…