What is the difference between AngularJs and Angular 2?

Performance improvements:

Performance improved in Angular 2.0 as compared to Angular 1.x. Bootstrap is now platform specific in angular 2.o. So if application is bootstrap from browser it will call different bootstrap as compare to mobile app. So for browser bootstrap package:angular2/platform/browser.dart is used.

For mobile loading Apache Cordova can be used to reduce loading time.

Mobile Support:

Angular 1.x was made for responsive and two way binding app. There was no mobile support. Although there are other libraries which make angular 1.x run on mobile. Angular 2.0 is made keeping in mind mobile oriented architecture. There are libraries i.e. Native script which help mobile Angular 2 mobile development fast. Build Truly Native Mobile Apps with Angular | NativeScript. It also render same code in different way on browser as well as on mobile app.

TypeScript:

TypeScript(TS) is used heavily in Angular 2. Google currently using DART for coding. DART or TypeScript can be used for Angular 2. Learning TypeScript is very good since other frameworks and libraries i.e. REACTJS is also using TS. Hence if one can learn TS it’s very easily to implement REACTJS and other libraries in project.

If any developer is coming from JAVA, .NET background TypeScript is very easy to learn.

No $Scope in Angular 2:

Angular 2 is not using $scope anymore to glue view and controller. This is one of the biggest problem when you did coding in Angular 1 and then want to try Angular 2 for the project. However if anyone is coming from JAVA, .NET/ background can easily pick up because syntax are more similar to Java.

  1. function($scope)
  2. {
  3. $scope.comparison =”Angular 1 vs Angular 2
  4. }
  5. //is replaced by
  6. constructor()
  7. {
  8. this.comparison =”Angular 1 vs Angular 2
  9. }

Component based Programming:

Just like ReactJs, AngularJs is also using component based programming. Component create less dependent and faster entities. I Angular 1 we have modular programming concept. Modular Programming was evolved from the fact that JQuery code were lot mess. Now component UI make component fast.

  1. @Component({
  2. selector: ‘AngularComparison’
  3. })
  4. @View({
  5. templateUrl: ‘./components/example/AngularComparison.html’
  6. })
  7. export class AngularComparison {
  8. constructor() {
  9. this.comparison= Angular 1 vs Angular 2”;
  10. }
  11. }

I have already explained benefits of component design in another thread. Why should ReactJS be used over any other client-side framework?

In React component creates virtual DOM. And this virtual DOM update itself with changing data.

Apart from this there are other improvement in brand new Angular 2 framework;

  1. Injectors changed significantly. Child injectors is new thing in Angular 2.
  2. There were bunch of directives in Angular 1. Angular 2 has only Component, Decorator and Template directive.
  3. JSON based Route config is more easy to edit.screenshot-www.quora.com-2018.06.04-16-30-04

Inner Join vs. Outer Join

Inner Join

An inner join focuses on the commonality between two tables. When using an inner join, there must be at least some matching data between two (or more) tables that are being compared. An inner join searches tables for matching or overlapping data. Upon finding it, the inner join combines and returns the information into one new table.

Example of Inner Join

Let’s consider a common scenario of two tables: product prices and quantities. The common information in the two tables is product name, so that is the logical column to join the tables on. There are some products that are common in the two tables; others are unique to one of the tables and don’t have a match in the other table.

An inner join on Products returns information about only those products that are common in both tables.

Outer Join

An outer join returns a set of records (or rows) that include what an inner join would return but also includes other rows for which no corresponding match is found in the other table.

There are three types of outer joins:

  • Left Outer Join (or Left Join)
  • Right Outer Join (or Right Join)
  • Full Outer Join (or Full Join)

Each of these outer joins refers to the part of the data that is being compared, combined, and returned. Sometimes nulls will be produced in this process as some data is shared while other data is not.

Left Outer Join

A left outer join will return all the data in Table 1 and all the shared data (so, the inner part of the Venn diagram example), but only corresponding data from Table 2, which is the right join.

Left Join Example

In our example database, there are two products — oranges and tomatoes — on the ‘left’ (Prices table) that do not have a corresponding entry on the ‘right’ (Quantities table). In a left join, these rows are included in the result set with a NULL in the Quantity column. The other rows in the result are the same as the inner join.

Right Outer Join

A right outer join returns Table 2’s data and all the shared data, but only corresponding data from Table 1, which is the left join.

Right Join Example

Similar to the left join example, the output of a right outer join includes all rows of the inner join and two rows — broccoli and squash — from the ‘right’ (Quantities table) that do not have matching entries on the left.

Full Outer Join

A full outer join, or full join, which is not supported by the popular MySQL database management system, combines and returns all data from two or more tables, regardless of whether there is shared information. Think of a full join as simply duplicating all the specified information, but in one table, rather than multiple tables. Where matching data is missing, nulls will be produced.

These are just the basics, but many things can be done with joins. There are even joins that can exclude other joins!

AngularJs Custom Directive

Let’s see what it takes to create our very first directive. We’ll start off by building a simple element called <welcome> that will display a custom message.

To begin building our directive, we will first create an angular module called “greetings” with no dependencies. Then we’ll just call the .directive method on angular.module and create a ‘welcome’ directive. The first parameter will be the name of the directive and the second will be a function for a callback. From this callback, we’ll return an object with a property called “restrict” which will restrict this directive to Elements. The object will also have the property “template” for specifying the HTML for our directive. For our template, we’ll make a div and we’ll say “Howdy there! You look splendid.”

angular.module(‘greetings’, [])
.directive(“welcome”, function() {
return {
restrict: “E”,
template: “

Howdy there! You look splendid.


}
});
Now that we have a greetings module with a welcome directive which is restricted to “E”, we can jump into our index, create our greetings app, and create our element here, which is the welcome directive.

<body ng-app=”greetings”>
<welcome></welcome>
</body>
Once we load the page and check it out, you can see it says, “Howdy there! You look splendid” – and that’s all there really is to writing your very first directive.

 

 

reference : https://thinkster.io/a-better-way-to-learn-angularjs#directives