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.
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.
How does Angular UI-bootstrap work?
What Angular UI-bootstrap components are available?
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.
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.