AngularJS Bower Integration Hello World

AngularJS Bower Integration Hello World

In this demo I will show you how to integrate AngularJS and Bower and finally we will create sample Hello World page. Please follow steps below:

Below are needed:

  • Install Node.js using this tutorial: NPM is default packaing manager for Node.js.
  • Install git for window using this tutorial which will be use to install Bower from git.
  • Once installation path setup properly then create static project name: AngularJSBower with below folder and files:

AngularJS Bower Integration Hello World

  • Now open command prompt and cd to project WebContent folder as below:

AngularJS Bower Integration Hello World

  • Because we already install Node.js and Git for window. Let’s check if both are available in path or not using below command:

AngularJS Bower Integration Hello World

  • Install bower globally using below command:

AngularJS Bower Integration Hello World

  • Install AngularJS package using bower using below command:

AngularJS Bower Integration Hello World

  • Refresh your project you will see below folder got created:

AngularJS Bower Integration Hello World

  • Add <script> to HelloWorld.htm page as below:
<!DOCTYPE html>
<html data-ng-app="myapp">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Tutorial</title>
<script src="../bower_components/angular/angular.js"></script>
<script src="../app/controllers/helloWorldController.js"></script>
</head>
<body data-ng-controller="HelloWorldController">
	<div>
		<p>{{variable}}</p>
	</div> 
</body>
</html>
  • helloWorldController.js:
var app = angular.module('myapp', []);
 
    app.controller('HelloWorldController', function($scope){
        $scope.variable = "AngularJS Hello World!!!";
    });
  • Now run the code you will below output:

AngularJS Bower Integration Hello World

  • For more information on AngularJS please visit angularjs website here
  • For bower visit their web site here

Leave a Reply

Your email address will not be published. Required fields are marked *