Using AngularJs in Worklight/PhoneGap application

Angular.js is a JavaScript MVC framework, that makes development of HTML applications easy. I wanted to figure out how to use it for developing Worklight application so i followed these steps to build simple Hello AngularJs application
  • First create a WorkLight application using WorkLight wizard, make sure that it works
  • Next make changes in the index.html or entry page of your application to include angular.js from Google CDN and also add <p>Hello {{'World'.length}}</p>
  • to test if AngularJs template is working
    
    <!DOCTYPE HTML>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>HelloWorld</title>
     <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0, 
    minimum-scale=1.0, user-scalable=0">
     <link rel="shortcut icon" href="images/favicon.png">
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
     <link rel="stylesheet" href="css/HelloWorld.css">
     <script>window.$ = window.jQuery = WLJQ;</script>
    </head>
    <body id="content" style="display: none;" ng-app>
     <h1>Hello Angularjs</h1> 
     <p>Hello {{'World'.length}}</p>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js" />
     <script src="js/initOptions.js"></script>
     <script src="js/HelloWorld.js"></script>
     <script src="js/messages.js"></script>
    </body>
    </html
    
After deployment you will notice that it prints Hello + length of 'world' which is 5 characters like this

6 comments:

My Share Page said...

Is this complete?

Chris Felix said...

You may also want to look at https://npmjs.org/package/generator-chris for stubbing out AngularJS + jQuery Mobile + Worklight apps

angularjs training in hyderabad said...

While I was in online Angularjs training I was introduced to this website by our instructors. Great insight about the subject through presentations along with nice content on this site purely related to data science and cloud. Thanks a lot for the info...

caroline jesi said...

Pretty post, I hope your site useful for many users who want to learn basics of programming to enhance their skill for getting good career in IT, thanks for taking time to discuss about fundamental programming niche.
With Regards,
Angularjs training in chennai|Angularjs course in chennai

Priya said...


The oracle database is capable of storing the data in two forms such as logically in the form of table spaces and physically like data files.
Oracle Training in Chennai | oracle dba training in chennai

for IT the said...

I have read your blog its very attractive and impressive. I like it your blog.

Angularjs Online Training Angularjs Training Angularjs Training Angularjs Training in Chennai Angularjs Training in Chennai Angularjs Course Angularjs Course Angular 2 Training in Chennai