I wanted to take the Angular plunge, dig deep and see what is actually required to write a maintainable, loosely coupled, and well architected line-of-business application. I spent two weeks learning Angular, watching online courses, reading the documentation, and writing the application.
Application Run-Time Packages
- Angular 5
- Infragistics Ignite UI for Angular
- Angular Material
- Material Icons
- Font Awesome
Angular Application Modules
The application has four modules: Application, Shared, People, and Sales.
The Application module is the root module of the application, all Angular applications have one of these. This module provides application-level navigation and routing.
The Shared module has code that is shared across multiple modules, providing a central location to bring in all of the application’s dependencies.
The Sales module is just a shell and an image of a Dashboard; it is there to demonstrate navigating between modules.
The People module is the bulk of the application that allows for selecting, viewing, editing, and adding people. The People Shell, provides module structure, module routing, loosely coupled components, navigation guards, and custom date validator.
I’m using the Angular In-Memory Web API as my development backend which makes spinning up an application without a real backend very easy.
- Angular In-Memory Web API
- Loose Coupling provided by the pub-sub service and the use of component @Input and @Output decorators
- Global Error Handler
- Use of Child Routing
- Use of Router Resolvers to prefetch form data
- Clean readable CSS – leverages HTML5 Symantec tags when possible
- Navigation Guards
- File Upload Component
- Custom Validator
- Error Page
- 404 Page
- Toast messages on data save or deletes
- Angular Reactive Forms
Ignite UI for Angular
Over the last two weeks, Ignite UI has grown on me and now I’m all in with it. This rich cross-browser component library saved me time, simplified my development, and provided outstanding results. Infragistics has invested heavily in this product and it shows. Yes, I work for Infragistics, but I wouldn’t blog about something that I’m not sold on.
The amount of time I saved by leveraging the Ignite UI library is immeasurable. Using this library allow me to focus on the application, design, interactions, etc. and not how to implement a cross-browser Navigation Drawer, Avatar, Badge, Navigation Bar, Slider, Toast, Buttons, etc.
Ignite UI also delivers a consistent look and feel across the entire component library, greatly simplifying application development and maintenance. Additionally, it provides for customized application themes.
- igx-nav-drawer – slides into view when the hamburger menu is clicked
- igx-navbar – application navigation bar, contextual title and action buttons
- igx-avatar – renders an image or icon as an avatar
- igx-badge – renders a badge; typically associated with an avatar, card, etc.
- igx-icon – renders icons
- igx-slider – provides for selecting for one or more values
- igx-checkbox – renders a checkbox
- igx-toast – customizable rendering of toast messages
- igx-dialog – customizable dialog component
- igx-list, igx-list-item – component for easily rendering a list of items
- igxRipple – provides animations when associated element is clicked
- igxButton – turns its associated element into a button
- igxInput – adds behavior to an input element
- igxLabel – adds rendering to a single-line text element
- Angular 5 People Application – Introduction
- Angular 5 People Application – Thoughts on Architecture
- Angular 5 People Application – Ignite UI for Angular
Recommended Angular Learning Path
I have a deep background and a lot of real-world experience in web development; beginning with classic ASP, ASP.NET, jQuery and roll your own SPA, AngularJS, Nodejs apps, and now Angular. My deep web background and real-world product development experience greatly shortened the learning curve for Angular.
Do not underestimate the time it takes to learn and be productive writing Angular applications. The concept count is very high because you are not only learning Angular but also HTML5, CSS, TypeScript, cross-browser programming, possibly a new editor, toolchain required to write an Angular application, and more. Give yourself enough time and training to grasp the high number of concepts necessary to be successful. Most important, have fun along the way, your hard work will pay off in spades.
I have completed these courses and recommend them to a quicker path to success. Please consider, these are the resources I’ve viewed. There are many other outstanding resources, books, videos, and blog posts available to developers.
Massive thank you to Deborah Kurata and Asim Hussain for these courses and sample applications.
Nothing like reading the documentation will save you time in the long run.
Visual Studio Code
In Memory Web API
Ignite UI Docs
Ignite UI Demos
Ignite UI Theming
Ignite UI CLI
Ignite UI Getting Start Blog Post
Ignite UI Roadmap – Lot’s of goodness coming soon!
Angular Community Experts on Twitter
Client web development has come a long way since classic ASP. I like the Angular framework and the community of developers, tools, and 3rd party offerings such as Infragistics Ignite UI for Angular. I can be productive and write maintainable code for my customers.
Have a great day,
Just a grain of sand on the world’s beaches.