AngularJS

Drupal 7: CTools adding CSS to Modal window with example[ctools_add_css()]

In Drupal core the function drupal_add_css() help us to achieve adding CSS for a specific pages. The CTools modal popup will not support core drupal_add_css() functions. We have to use CTools functions for adding CSS files to modal window. The function ctools_add_css() will help to adding CSS files into modal popup windows. The function accepts filename, Module name and path for adding the CSS file.

A brief introduction on AngularJS

AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications. If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. You can also create your own directives, crafting reusable components that fill your needs and abstracting away all the DOM manipulation logic.

AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications. If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. You can also create your own directives, crafting reusable components that fill your needs and abstracting away all the DOM manipulation logic.

Angular directive to check the scroll position of an element with Example and Demo

Angular Directives are markers on a DOM element which attach a special behavior to it. Here in this example the directive "onScroll" listens to a scroll event. The scroll position from the element is found using scrollTop.

Adding a dynamic generated CSS(Cascading Style Sheet) to the AngularJS view with example.

A dynamic generated CSS (Cascading Style Sheet) at the controller can be bind to the HTML View using ng-bind-html attribute with in the style tag. This example uses angular-sanitize.js which removes the dangerous token from the dynamically generated style string. It uses the ng-keyup AngularJS HTML attribute to update the background colour value on KeyUp event. The values inside the text-box taken as the background colour value.

Using Expressions in AngularJS, Print controller values in the AngularJS view, Display controller scope values in view

We can bind data to the html with the help of AngularJS expression. AngularJS expression are written in {{ angular expression }}. These are same like Javascript expressions.

Remove HTML tags in AngularJS using user defined Filters with example and Demo

Filter are used to modify the data in AngularJS. Here we create a custom filter to remove the HTML tags from a string. “removeHTMLTags” is the filter name. Used regular expression to strip the HTML tags from the given string..