Angular UI Development With PrimeNG
Angular modules make it possible to consolidate components, directives, services, pipes, and many more into cohesive blocks of functionality. Angular's code is modularized. Every module has its own functionality. There are FormsModule, HttpModule, RouterModule, and many other modules as well. What does a module look like? A module is a class annotated with the @NgModule decorator (imported from @angular/core). @NgModule takes a configuration object that tells Angular how to compile and run the module code. The most significant properties of the the configuration object are:
Angular UI Development with PrimeNG
PrimeNG fits perfectly with the mobile and desktop development because it is a responsive and touch optimized framework. PrimeNG showcase is a good place to play with the components, try them in action, study documentation, and code snippets. Anyway, we need a systematic approach for getting started with PrimeNG. This is what this book tries to convey. In this chapter, we will set up and run PrimeNG with SystemJS ( )--universal module loader supporting various module formats. SystemJS is a good choice for learning purposes if you want to try TypeScript, Angular, PrimeNG code snippets, or write small applications in Plunker ( ) because it can load your files, transpile them (if needed) and resolve module dependencies on-the-fly. In the real applications, you should choose Webpack or Angular CLI-based setups that have more power and advanced configurations. They also bundle your application in order to reduce the amount of HTTP requests. Those setups will be discussed in the next two sections.
As a result, PrimeNG is installed in your project root under the node_modules folder as well as added in package.json as a dependency. Here again, you can skip this step if you use the seed project hosted on GitHub--just run npm install. The next step is to add two new entries to the SystemJS configuration file. For shorter import statements, it is recommended to map primeng to node_modules/primeng. PrimeNG components are distributed as CommonJS modules ending with .js. That means we should set the default extension too:
JavaScript and other files imported into each other are closely interwoven. Webpack creates a graph of all such dependencies. The starting point of this graph is called entry point. An entry point tells Webpack where to start to resolve all dependencies and creates a bundle. Entry points are created in the Webpack configuration file using the entry property. In the seed project on GitHub, we have two configuration files, one for the development mode (webpack.dev.js) and one for the production (webpack.prod.js) mode, each with two entry points.
Webpack takes care of the rest. There are more goodies from Webpack--a development server with live reloading webpack-dev-server ( -server). It detects changes made to files and recompiles automatically. You can start it with npm start or npm run start:prod. These commands represent npm scripts:
This command will create an Angular 4 project within the folder primeng-angularcli-setup. The option --style sets a CSS preprocessor. Here, we want to use SASS files and need a Sass preprocessor. The preprocessor compiles SASS files whenever we make changes. You don't need to set a preprocessor if you only have CSS files.
After reading this chapter, you got an overview of TypeScript and Angular concepts you need to understand for the upcoming chapters. TypeScript introduces types which help to recognize errors at development time. There are primitive types, types known from object-oriented programming languages, custom types, and so on. By default, TypeScript compiler always emits an JavaScript code, even in the presence of type errors. In this way, you can quickly migrate any existing JavaScript code to TypeScript just by renaming .js file to .ts without having to fix all compilation errors at once.
PrimeNG is a collection of such rich UI components for Angular 2+. In comparison with competitors, PrimeNG was created for enterprise applications and provides 80+ components. Adding PrimeNG dependencies is easy done. You only need to add PrimeNG and FontAwesome dependencies to the package.json file, and three CSS files: primeng.min.css, font-awesome.min.css, and theme.css for any theme you like. The next chapter will cover the theming concept in detail.
In this chapter, SystemJS and Webpack loaders were discussed. SystemJS is only recommended for demo applications for the purpose of learning. Webpack-based builds are more sophisticated. Webpack has a combination of loaders for every file type and plugins. Plugins include useful behaviors into the Webpack build process, for example, creating common chunks, minification of web resources, copying files and directories, creating SVG sprites, and more. To quickly start the development in TypeScript and Angular, generate your projects with Angular CLI. This is a scaffolding tool, which makes it easy to create an application that works out of the box.
Sudheer Jonna was born in Nellore, India. Currently, he works as a senior software engineer in Singapore. He completed his master's degree in computer applications from JNTU University. In the past few years, he has worked on building various Java and JavaScript web applications based on JSF, PrimeFaces, Struts, Spring, REST, jQuery, Angular, React, and VueJS. He has also worked on many JavaEE and API development technologies, such as JPA (Hibernate), EJB, GraphQL, and Sequelize. He is the founder of GeekoTek company and is a longtime JSF and Prime products expert. He is also a project member of the PrimeFaces, PrimeFaces Extensions, and PrimeNG open source projects. He is the author of three other Packt books, titled Learning PrimeFaces Extension Development, PrimeFaces BluePrints, and PrimeFaces Theme Development. He has worked as a technical reviewer on a few books. He is a regular speaker, trainer, reviewer, blogger, organizer, and active member of public forums. He is interested in R&D on the latest technologies. He shares his knowledge through his personal website. You can follow him on Twitter with the handle @SudheerJonna.
primeng - Nice lib and easy to integrate with but little customization is available. Also, components can be inconsistent. For example, one may require you to style the width with CSS and the next one provides a width input property. Also, upgrading between versions can really break the look and feel of your app.
UI Bootstrap is an Angular framework for UI that uses one of the most robust front-end tools, Bootstrap. It comes with a rich collection of components with dependencies like Bootstrap CSS, Angular-touch, and Angular-animate. UI Bootstrap provides huge support for quick web development with Angular. The best part is that it eliminates the use of jQuery or Bootstrap JavaScript while also giving an additional boost to your web application performance.
With over more than 10 years of experience in software development, we, at Third Rock Techkno, offer a broad range of software development services and solutions. Our expert professionals not only ensure timely project completion and product launch within budget, but also help your product find the right market positioning and help you grow to meet your business goals.
LumX is also based on Google Material Design and one of the highly responsive Angular frameworks for UI. Built with Saas and Bourbon, LumX works as a full CSS framework. However, it does have a complete dependency on AngularJS for web application development. LumX is great for customizing your Angular web application design. In addition to that, it also helps improve your web application performance by automatically optimizing your Saas and JS files with Gulp. LumX uses jQuery but without any of its plugins.
Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice, and mobile app development company with over 10 years of experience. Client success forms the core of our value system.
First, we need to install Node.js (node and npm). You should install the Node.js distribution compatible with your operating system. Next step is to create the project folder, choose a location on your computer and create a new folder named, angular2 ; this folder will contain all the files of our application. In the angular2 folder, we need to add three JSON files: one to guide the TypeScript compiler, one that identifies missing TypeScript definition files and one that defines the packages and scripts we need. These three JSON files and their descriptions are listed below:
BLK Design System Angular is a free Angular Design System for Bootstrap 4 and Angular. It is open-source, free and it features many components that can help you create amazing websites. All components can take variations in color, that you can easily modify using SASS files. This Angular Design System is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.
Dragula enables engineers to simplify and accelerate Angular app development with drag-and-drop technology. Dragula differs from other drag-and-drop libraries and frameworks as it can be applied to not only layout creation but also for actual product content. For instance, it allows programmers to drag the content in every possible direction.
PrimeNG is a rich component library for UI designers for accelerating the web development process. Released by PrimeTek Informatics, a company with high expertise in making open-source digital UI solutions, PrimeNG provides over 80 components.
Invented by Akveo Angular development company, ngx-admin is a front-end admin dashboard template with a component-based structure. An administrator panel is based on Angular 8+, Bootstrap 4+, Nebular with Eva Design System support.
With Backend Bundle support (.NET, Node.js, Java etc.), ngx-admin enables full-stack software development. Launched by Akveo, it comes packed with 100+ Angular user interface components, multiple code samples, and REST Backend Services. 041b061a72