- Create a HelloWorld app with Cordova or Phonegap. Take a look at our previous article on how to get started with Cordova Hello World app.
- Once setup, what you have got is www/index.html where you could put your Bootstrap CSS path and AngularJS path.
- As like a normal web page, create an Angular app with ng-app and ng-controller directive. Use Bootstrap “.col-xs-*” class to align UI field for smaller mobile devices.
- Build and run. That is it.
Cordova/PhoneGap & AngularJS HelloWorld – Code Example
Pay attention to the angular ng directives specifying ng-app, ng-controller and ng-model. Also, notice the angular template (data binding) to display the data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
</head>
<body>
<div ng-app="HelloApp" ng-controller="HelloCtrl">
<form role="form" method="post" action="#">
<div class="form-group form-group-lg">
<label class="col-xs-2 control-label">Name</label>
<div class="col-xs-12">
<input type="text" class="form-control input-lg" name="name" ng-model="name" />
</div>
</div>
<div class="col-xs-10">
<h3>Hello {{name}}!</h3>
</div>
</form>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script>
var helloApp = angular.module("HelloApp", []);
helloApp.controller("HelloCtrl", [ '$scope', function($scope) {
$scope.name = "Calvin Hobbes";
} ]);
</script>
</body>
</html>
…
[adsenseyu1]
Leave a Reply