Running AngularJS UI

Now, everything is ready, let’s try to run the application and see what is happening… Right-click the project, select “Run As” => “Run on server”

 

With URL : http://localhost:8080/SpringMVCExample/ , You can see …

 

For this web UI, it is using AngularJS, Angular Material, bootstrap and ng-Table to buildup, please reference to the below JS and CSS details:

 

CSS

Angular Material <link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”>
Bootstrap <link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
ng-Table <link rel=”stylesheet” href=”https://rawgit.com/esvit/ng-table/master/dist/ng-table.css”>

 

JS

AngularJS <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script>

<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script>

<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script>

Angular Material  <script src=”http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script>
ng-Table <script src=”https://rawgit.com/esvit/ng-table/master/dist/ng-table.js”></script>

 

The menu on the left will auto hide if the window’s width is less than 960px, you can click  to show the menu.

 

Let’s click the “CUSTOMER LIST” button on the left menu, it will show you the list of customers.

 

Click on “update” button, it will show you the Customer – Update Form.

 

You can try clicking on different buttons on the menu, and see what is happening. Let’s play with it.

 

Cong!!! All done…

Please rate this