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:
- Now open command prompt and cd to project WebContent folder as below:
- Because we already install Node.js and Git for window. Let’s check if both are available in path or not using below command:
- Install bower globally using below command:
- Install AngularJS package using bower using below command:
- Refresh your project you will see below folder got created:
- 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:
- For more information on AngularJS please visit angularjs website here
- For bower visit their web site here