0

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?

Diskdrive
  • 18,107
  • 27
  • 101
  • 167

2 Answers2

4

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.

Community
  • 1
  • 1
wannadream
  • 1,669
  • 1
  • 12
  • 14
  • 1
    I don't think "that is the future" fully applies. It's just an alternative approach. Polymer components are built to work with any web framework, while Angular only works well when fully in charge. This full buy-in is not what everyone wants to do. Also Polymer works with most browsers (some older ones are not supported anymore, but that also applies to Angular). Polymer put a lot of effort into providing polyfills to bring new features to older browsers. Actually this is (or was) one of the main parts of the whole Polymer story. – Günter Zöchbauer Apr 26 '17 at 06:55
  • (I don't follow Polymer that closely since about 1 year and don't know details of the current status). – Günter Zöchbauer Apr 26 '17 at 06:55
  • 1
    You are right, not fully applies. More important Angular is a framework. Polymer is all about web components. – wannadream Apr 26 '17 at 15:59
0

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 ;-)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567