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

ng-controller directive

The ng-controller directive is defined in the view, while parsing the page AngularJS creates an instance of the controller object it refers to, the constructor of the controller object is automatically invoked and initialization of the $scope object happens in the controllers constructor.

Once the controller in initialized, the reference to the properties and methods deified in the controllers $scope are available in the view.

Controllers play an important role in binding the model and view in MVC pattern.

The below example demonstrated the use of controllers to bind between the model and the view.

Tuesday, February 24, 2015

$scope object

In the previous posts we saw on how to use the ng-bind directives to bind objects/properties to the view, in this post we shall see on how to use the $scope object to bind data the controller and the view.
The $scope is a JavaScript object which binds the controller and the view in an AngularJS MVC application. Both the controller and the view can access the $scope object, 2 way binding between the model and view is enabled using the $scope object.

In complex applications where we have the view and controller in different files we explicitly use the $scope object in the view to refer to the properties and methods defined in the model object.

The below example demonstrated the use of $scope object to bind between the model and the view.

Tuesday, February 17, 2015

ng-bind-html

The ng-bind-html directive is used in places where we need to parse HTML content and render the output instead of just displaying the HTML tags in the view, by default any value bound to this directive will be passed through $sanitize to validate and clean so that no unsafe inputs are rendered to the view, this validation process might filter out some of the HTML tags from the source which are deemed to be un-safe. The $sce can be used to skip the validation process and render the content as it is in the view. $sce.trustAsHtml instructs Angular that the content is valid and can skip the validation done by $sanitize, this makes sure that the full HTML is parsed and rendered as output in the View.

The following example uses $sce.trustAsHtml to display HTML content to the view using ng-bind-html directive.

ng-model vs ng-bind

Both ng-model and ng-bind directives provide binding features, the difference is that ng-model provides 2 way data binding between the model and the view, while ng-bind provides only one way binding between model and view.

While using ng-model the model is initially bound to the view when the page loads, any further changes made to the view will get automatically updated in the model object.

While using ng-bind the model is initially bound to the view when the page loads, any further changes made to the view will not get updated in the model object.

The below example demonstrates the difference between using ng-model and ng-bind to bind the model to the view.