Wednesday, March 4, 2015

ng-view directive

The ng-view is a placeholder directive defined on the main page, it indicates that this div/panel will be replaced with different views at run-time based on the routing defined on the page URL.

We shall see detailed implementation of the ng-view directive in the later posts when we look into Routing feature in AngularJS, for now below is the syntax for using ng-view directive.

ng-submit directive

Using the ng-submit directive we can make Ajax calls to the methods in the controller when the form is submitted. The conventional form tag and action method will post the page data and re-direct to a new page, the ng-form directive instead allows us to call a JavaScript method in the controller and pass objects to the controller method.

The following example shows a simple implementation of the form submit, in this example we just display a message from the submit function, in real time we can do complex implementations like making Ajax calls to the Server.

Tuesday, March 3, 2015

ng-mouseover directive

As the name suggests the ng-mouseover directive is used to handle mousehover events from controls in the view layer. The ng-mouseover directive can be associated with any type of controls like buttons, links, div panels etc.

The syntax for the ng-mouseover directive is as follows

ng-mouseover = “<Function to be called in the controller layer>”

The function is defined in the controller under $scope, when the user triggers the event the function associated with the ng-mouseover directive gets executed and performs appropriate updates in the model ($scope) and the view.

The following example shows how the ng-mouseover directive associated with the Hover Mouse button shows and hides the Name based on the users mouse movement.

ng-click directive

As the name suggests the ng-click directive is used to handle click events from controls in the view layer. The ng-click directive is commonly associated with button controls to trigger events from the view to the controller layer, but they can be associated with any type of controls like dropdowns, links etc.

The syntax for the ng-click directive is as follows

ng-click = “<Function to be called in the controller layer>”

The function is defined in the controller under $scope, when the user triggers the event the function associated with the ng-click directive gets executed and performs appropriate updates in the model ($scope) and the view.

The following example shows how the ng-click directive associated with the Clear button clears the properties FName and LName in the model and view.

Wednesday, February 25, 2015

Maintaining controllers in a separate .js file

For small applications / pages we can have the controller script embedded in the HTML page within the script tags, however if the application / page is large and complex then it is advisable to maintain the controller in separate .js files. Also by doing so we can maintain multiple controllers on a single page.

The following sample demonstrates a simple page, where the HTML View and the controllers are maintained in 2 different files