Welcome to FindNerd. Today we are going to take an example of angularJS scope variable with nodeJS. There are other blogs available related to angularJS as well as nodeJS. You can check these blogs to get a clear idea of these two javascript frameworks. Our application name is task manager and it will include following files and folders. Please have a look.
1) package.json : It sets the dependencies for the application and also includes application name, version and author name etc. We have set the express module as a dependency in this application.
2) index.html : This file is the main or first file which is responsible to start the server.
3) public : This folder includes sub-folders such as css, js, img as well as index.html file.
Step1: Very first step is to install the dependencies. Run following command.
// go to application directory
npm install
Step2: Now it is time to create the main file that is index.js. In this file we will create server and listen to port 3000. Kindly check code below.
var express = require('express'),
http = require('http');
var app = express()
.use(express.bodyParser())
.use(express.static('public'));
app.get('/*', function (req, res) {
res.json(404, {status: 'not found'});
});
http.createServer(app).listen(3000, function () {
console.log("Server ready at http://localhost:3000");
});
In above code we have loaded the modules such as express and http. We have also created get request for not found page. In the end we created server and listen to port 3000. If you run command node index.js then you will get the message in the console. Now you can use the application on browser using http://localhost:3000/.
Step3 : Create folder named public and create sub-folders such as css,js, img and index.html file. Now you need to download the bootstrap from bootstrap website. Now paste the bootstrap.min.css, boottrap-responsive-min.css files in css folder and create lib and controllers folder inside js folder. Now paste the angular.min.js file inside lib directory. Create findnerd.js file inside controllers directory. Kindly check the code for controller that is findnerd.js.
// findnerd.js
function FindnerdCtrl ($scope) {
$scope.tasks = {
"morning-task": {
"code": "morning-task",
"name": "Daily working"
},
"evening-task": {
"code": "evening-task",
"name": "Sectional working"
},
"night-task": {
"code": "night-task",
"name": "Child working"
}
};
$scope.currentTask = null;
$scope.setTask = function (code) {
$scope.currentTask = $scope.tasks[code];
};
}
It is angularJS controller named Findnerd. We created an object of tasks which includes task name as well as code. We have also created function setTask to active the task. We will show the tasks lists and on click we will activate that task.
Step4: Now create index.html file. Kindly check the code below.
<html ng-app>
<head>
<title>AngularJS Scope variable Demo on Findnerd</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/findnerd.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="container" ng-controller="FindnerdCtrl">
<h1>Task Manager</h1>
<ul>
<li ng-click="setTask(task.code)" ng-repeat="task in tasks">{{task.code}}
- {{task.name}}</li>
</ul>
<p ng-show="currentTask">Active Task: {{currentTask.name}}</p>
</div>
</body>
</html>
In above code we have included bootstrap css,js as well as controller file that is findnerd.js. We created div with class container and assign the controller to that div. Now we can access properties and function of that controller inside that div. That is called scope in angularJS. We have displayed the task list by using tasks object which we created inside Findnerd controller. We have also mentioned the active task in the bottom. Whenever you click on any task from the list then it will be activated and shown as activated in the bottom of the page. If we refresh the browser then activated task will be lost because we are not storing activated task right now. This small example is enough to explain the controllers, scope in angularJS as well as showing nodeJS and angularJS together. I hope this example will give you a clear idea of nodeJS as well as angularJS both. Keep reading our blogs. They will help you to learn new technical concepts.
You can also download the demo code from below link. Thank you for being with us!
0 Comment(s)