Sample Pet Clinic for referenceAn example of a Spring Pet clinic application that we have tried to revamp as an AngularJS app with an updated design can be found here . You can refer to this project on how we introduced AngularJS to the project.
At the very top in the hierarchy of scopes is the $rootScope, a scope that is accessible globally and can be used as the last resort to share properties and models across the whole application. The use of this should be minimized as it introduces a sort of "global" variable that can pose the same problems when it is over-used. More information about scopes can be gleaned from the AngularJS documentation found here .
Directives in AngularJSDirectives is one of the most important concept in AngularJS and it is indeed the foundation of what we constitute AngularJS in the markup. It is essentially all the additional customized markup in the form of element, attributes, classes or comments in our HTML markup that gives the markup new functionalities. Consider the following code snippet that demonstrates a customized directive called wdsCustom that will replace the markup element <wds-custom company="wds"> with markup that contains information about a model called "wds" that is declared in the controller scope that wraps the directive. You can have a look at the files app.js, index.html and directive template wds-custom-directive.html to see how this works in the below plunkr snippet. As this article does not attempt to teach you how to write a directive, you can refer to the official documentation here.
Also, when you are working in AngularJS, we prefer to encapsulate form submissions in a JSON object which is sent over to the backend RESTful service via a AngularJS HTTP Post method call (instead of using the HTML form submission). All validation can be performed on the front end using AngularJS's built-in input validation (or if you like to have your custom validation, it can also be easily written) before posting your data to the server. Of course, it is always prudent to validate the same data at the server side as well to ensure that clients that do not check their data do not compromise the integrity of the data on the server side.You can see an image capture of the folder structure in Eclipse below.
This way of grouping the resources uses the feature-grouping method. There are also ways to group your resources based on types, e.g. grouping all your controllers, services and views into its namesake folder. There are pros and cons for either option but we prefer to use the feature grouping way to contain our resources.
<form name="UserForm" data-ng-controller="ExampleUserController"> <table> <tr> <td>User Name :</td> <td><input data-ng-model="user.name" /></td> </tr> <tr> <td>Password :</td> <td><input type="password" data-ng-model="user.password" /></td> </tr> <tr> <td>Country :</td> <td> <select data-ng-model="user.country" data-ng-options="country as country.label for country in countries"> <option value="">Select<option /> </select> </td> </tr> </table> </form>
Considerations when moving from JSP to AngularJSIf you are considering migrating from JSP to AngularJS, there are a few factors to consider for a successful migration.
Synchronizing states between the backend and your AngularJS applicationSynchronizing states is something that needs to be managed when you are developing a client-server architecture. You will need to give some thought to how your application updates its state from the backend or refresh its view whenever some state changes.
AuthenticationHaving your client-side code exposed to the public makes it even more important to think through how you would like to authenticate your users and maintain session with your application. (Stateless or Stateful ?) .