Saturday, August 9, 2014

Starting my Angular Project

Last several weeks I have been starting my AngularJS adventures. With the download of the latest version and Eclipse to develop Restfull Services I thought I would build a simple contracts administration. I have put my database in MySql just for convenience. I must say the easiest way to start is just to copy the Angular scripts to a subfolder Scripts in my HTML root directory, and then add the scripts reference to my index.html page.


I use the angular-route.min.js since I want to make a Singe web page application using the ng-view directive. Something that will add to the complexity immediately.

The script tags I put just beforethe end body tag, since i want to load the HTML first. Just to see if the Angular framework works I have put the following code:


<html ng-app>
  <head>
   </head>
  <body>
    <div>
    <input type="text" ng-model="data.message" />
    <h1>{{ data.message }}</h1>
    </div>
    <script src="Scripts/angular.min.js"></script>    
  </body>
</html>



Notice the ng-app and the ng-model="data.message". Both directives will be used to indicate to the Angular java-script that the source should be treated by the angular framework.
If your browser shows : data.message in the screen something is not right. It should present you with an input box and retype everything you type into the box like so: 



if it shows this:



.....somethings wrong. Either you did not add the ng-app tag, or it did not reference the javascripts files in the right way.

If it show the right screen that's it. you're off to a start in the wonderful Angular.Js world.

No comments: