This post assumes you have already installed nodejs, npm on your machines. To start with let us use the terminal/sublime text editor to create our app which shows our name on the webpage.
Follow the steps to create your simple page.
1. Launch the terminal and create a directory named <ajs> anywhere in your drive. I chose "/Users/Yuvaraj" location to create the <ajs> directory.
/Users/Yuvaraj> mkdir ajs
2. Navigate to the ajs directory.
/Users/Yuvaraj> cd ajs
3. Now interactively create a package.json file in ajs directory by running the following command,
/Users/Yuvaraj/ajs>npm init
we should see the following questions on running this command.
This utility will walk you through creating a package.json file.
Follow the steps to create your simple page.
1. Launch the terminal and create a directory named <ajs> anywhere in your drive. I chose "/Users/Yuvaraj" location to create the <ajs> directory.
/Users/Yuvaraj> mkdir ajs
2. Navigate to the ajs directory.
/Users/Yuvaraj> cd ajs
3. Now interactively create a package.json file in ajs directory by running the following command,
/Users/Yuvaraj/ajs>npm init
we should see the following questions on running this command.
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (ajs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/Yuvaraj/ajs/package.json:
{
"name": "ajs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
4. After generating the package.json file. Let us install http-server, bower libraries using the npm and save these dependencies into the package.json by running the following command.
/Users/Yuvaraj/ajs>npm install --save http-server
/Users/Yuvaraj/ajs>npm install --save bower
Observe that http-server, bower are automatically saved into package.json file in the dependencies section and a folder node_modules is created with the libraries installed.
5. Now create an app directory where we put all the application code.
/Users/Yuvaraj/ajs>mkdir app
6. Initialise bower by running the following command. Make sure we see bower.json after running the command in app directory.
/Users/Yuvaraj/ajs/app>bower init
7. After initialising the bower, install the angular dependency and save to the bower.json.
/Users/Yuvaraj/ajs/app>bower install --save angular
We observe that a new folder bower_components gets created in app folder with angular dependency added.
8. Now edit the package.json file by adding a start script into the script section.
"scripts": {
"start": "http-server ./app -a localhost -p 2222",
"test": "echo \"Error: no test specified\" && exit 1"
},
With this step we are done with the setup. Once the setup is completed we can start creating the angular modules and bind them with the html.
9. Now create a app.js file in the app folder and put the following content in it.
angular.module('yuvi', [])
.controller('TestController', function TestController(){
this.name = "Yuvaraj";
});
10. Create a index.html in app folder and put the following html in it.
<html ng-app='yuvi'>
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<!-- this refers the angular.js file reference added from the bower dependencies installed -->
<script type="text/javascript" src="app.js"></script> <!-- this refers the app.js file that we have just created -->
</head>
<body ng-controller='TestController as testCtrl'>
<h1>{{testCtrl.name}}</h1>
</body>
</html>
11. Now we are done with writing our simple app which displays our name. Now let us start our application by running the start script configured in our package.json.
In the terminal run npm start command where the package.json file is available.
/Users/Yuvaraj/ajs>npm start
we must a message saying the server is started on a specific port with the url to the application.
http://localhost:2222.
Simply launch the url <http://localhost:2222> in the browser. We see "Yuvaraj" displayed as a header.
4. After generating the package.json file. Let us install http-server, bower libraries using the npm and save these dependencies into the package.json by running the following command.
/Users/Yuvaraj/ajs>npm install --save http-server
/Users/Yuvaraj/ajs>npm install --save bower
Observe that http-server, bower are automatically saved into package.json file in the dependencies section and a folder node_modules is created with the libraries installed.
5. Now create an app directory where we put all the application code.
/Users/Yuvaraj/ajs>mkdir app
6. Initialise bower by running the following command. Make sure we see bower.json after running the command in app directory.
/Users/Yuvaraj/ajs/app>bower init
7. After initialising the bower, install the angular dependency and save to the bower.json.
/Users/Yuvaraj/ajs/app>bower install --save angular
We observe that a new folder bower_components gets created in app folder with angular dependency added.
8. Now edit the package.json file by adding a start script into the script section.
"scripts": {
"start": "http-server ./app -a localhost -p 2222",
"test": "echo \"Error: no test specified\" && exit 1"
},
With this step we are done with the setup. Once the setup is completed we can start creating the angular modules and bind them with the html.
9. Now create a app.js file in the app folder and put the following content in it.
angular.module('yuvi', [])
.controller('TestController', function TestController(){
this.name = "Yuvaraj";
});
10. Create a index.html in app folder and put the following html in it.
<html ng-app='yuvi'>
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<!-- this refers the angular.js file reference added from the bower dependencies installed -->
<script type="text/javascript" src="app.js"></script> <!-- this refers the app.js file that we have just created -->
</head>
<body ng-controller='TestController as testCtrl'>
<h1>{{testCtrl.name}}</h1>
</body>
</html>
11. Now we are done with writing our simple app which displays our name. Now let us start our application by running the start script configured in our package.json.
In the terminal run npm start command where the package.json file is available.
/Users/Yuvaraj/ajs>npm start
we must a message saying the server is started on a specific port with the url to the application.
http://localhost:2222.
Simply launch the url <http://localhost:2222> in the browser. We see "Yuvaraj" displayed as a header.
