So I've recently started using Angular 2 and have realized there are lots of different Material Design frameworks and I'm trying to get my head around the differences.
So I started using Angular Material 2 and found that the documentation and features were lacking because the project is still in beta. Angular Material 1 seems to be fully operational and they are re-writing it so that it is compatible with Angular 2.
So I'm wondering what makes Material so tightly coupled with Angular that it required a complete rewrite. I would've thought that underneath, Angular Material is similar to frameworks like Bootstrap where it is just a bunch of Javascript and CSS files that style the HTML in a certain way. Angular Material makes it easy by letting you use their built in directives instead of having to write the HTML referencing the right classes etc.
Given that Angular and Angular 2 at the end of the day is just spitting out HTML, couldn't you basically keep all of the underlying CSS and javascript code? Then all you'd need to do is write Angular 2 directives for the controls? I've been using Material Design Lite and there's an npm package called angular-mdl which basically just does the directive. How exactly does Angular Material work behind the scenes?
First of all, let's clear some terminology here. I think Google announced that there is no more Angular 2 as it is already Angular 4 now!
Here, officially, I am using AngularJS (1.x) and Angular (One framework).
Angular is completely rewritten and has nothing to do with AngularJS anymore. That is why Angular Material has to be rewritten.
There is already a lot of discussion here: Angular vs Angular 2.
Here is official guide of how to upgrade your application from AngularJS: https://angular.io/docs/ts/latest/guide/upgrade.html
Angular Material actually is a set of Angular components, you can study its source code here: https://github.com/angular/material2
Actually, Google has another web component concept project - Polymer. That focuses on web component which refreshes your cognition of web. It is not fully supported by all browsers I believe.
Overall, Angular has a powerful ecosystem and sets of tools to help you build any small to large scale web application. It makes Javascript easy to code, maintain, and test.
Given that Angular and Angular 2 at the end of the day is just spitting out HTML, couldn't you basically keep all of the underlying CSS and javascript code?
Angular has it's own "syntax" to bind the view to the model. This syntax is entirely different between Angular and Angularjs.
HTML and CSS is split into components to make reusable building blocks.
The differences between Angular and Angularjs also results in components (and also directives and pipes) being structured quite differently between these frameworks, which also required HTML, CSS, and code to be structured differently.
Also animations work entirely different.
Angular users TypeScript (at least it's the most commonly used Angular variant) which allows to write more expressive code. This also requires quite different code to utilize Angulars full power.
The rest are tons of details that differ.
I assume they reused a lot of gained knowledge when they rebuilt Material components ;-)