The angular framework has become an invaluable tool in developing web applications. It consists of many modules, services and tools that work together to simplify the development of angular apps. One such module is angular-UI bootstrap or angular UI-bootstrap (for short).
This article will give a short introduction to angular UI bootstrap and how it can be used on angular web development.
Before we go further, it is important to point out angular UI-bootstrap is built and maintained by angular developers and not the bootstrap team. Bootstrap is a front-end framework for developing responsive websites using HTML, CSS and Javascript (jQuery) while angular UI-bootstrap is an angular module that makes it easy to integrate angular and bootstrap. If you are interested in learning angular development, check out the Angular js tutorial.
What is angular UI-bootstrap?
Angular UI-bootstrap integrates AngularJS with Twitter Bootstrap (or the now more popular Bootstrap 3). Simply put, Angular UI-bootstrap is an Angular wrapper around the bootstrap angular directives.
Where can angular UI-bootstrap be used? angular UI-bootstrap can be used as a standalone component or as angular bindings for Bootstrap javascript widgets. In certain cases, angular UI-bootstrap adds additional functionality to bootstrap components, especially in their angularization.
How does Angular UI-bootstrap work?
Angular UI-bootstrap angularizes bootstrap components by providing AngularJS bindings for the most commonly used bootstrap directives and javascript widgets. When angular expressions are encountered in a page using angular UI-bootstrap, angular replaces them with angular (and jQuery) equivalents and binds the scope to angular application models.
What Angular UI-bootstrap components are available?
Angular UI bootstrap angularizes many of the most commonly used Bootstrap javascript widgets including buttons, hero unit, labels, progress bars etc. Table among other things is not angularized by angular UI-bootstrap yet because the bootstrap table is not responsive. angular ui-bootstrap provides angular directives for responsive bootstrap tables.
One of Angular web development’s most important components is the angular HTML compiler. It takes angular HTML code and turns it into browser-friendly angular application code. Angular provides this service using a node package called angular-compiler.
The Angular HTML compiler can be used directly by angular tools, or indirectly through angular framework modules that use it at the core of angular’s dependency injection system.
The Angular HTML compiler is also known simply as the Angular compiler. The angular-compiler node package contains classes that are used by angular tools, modules, and applications to compile angular code into browser-friendly angular application code. The angular compiler has many responsibilities in the angular framework, including dependency injection (DI) and angular change detection (CD).
To use the Angular compiler directly in angular tools and application modules, angular tools and angular application modules need to import the angular-compiler module. For example, when using angular schematics for generating new components, we pass the –module parameter to indicate which angular framework module should be used as a parent of generated angular components. For angular modules, angular schematics use angular-compiler module to determine which angular framework modules should be available to a user when generating a new angular component.
angular compiles angular code in two primary ways: statically during development, or dynamically just in time (JIT) at run time.
Static angular compilation occurs when angular tools transform angular source code into angular application code. For example, the angular compiler parses angular source code and transforms it into a JavaScript function that calls angular APIs to create a new angular application in the browser DOM. This is an important step during angular development because angular tools run against HTML files without executing them, so they can’t access native angular APIs at design time.
Dynamic angular compilation occurs when angular runs a browser application in a web browser. Just-in-time angular compilation generates angular application code from angular templates at run time so that the angular framework can apply DI and angular change detection after the page loads in the browser.
In addition to generating angular source code, the angular compiler resolves dependencies between different parts of an angular application. Dependencies can be angular framework modules (e.g., angular-animate depends on angular-cookies and angular-touch), or angular components using DI in template expressions (e.g., parent component <my-child></my-child> requires child component).
The angular compiler optimizes application code for speed and size: it wraps a root angular application function in a self-invoking function to avoid global angular scope lookups at run time, and it minifies angular code using uglifyjs.
The angular compiler can be invoked from the command line or programmatically from node.js code. The compiler is used by angular tools such as angular schematics for generating Angular application code, angular CLI for building angular applications, angular universal for running angular applications in node.js server environments, and the angular lint angular code quality tool.
The angular compiler is also used by angular at run time to create a self-invoking function based on an application’s dependency structure, minify angular templates using uglifyjs, and inject angular application code into the browser DOM.