📜  AngularDart 简介

📅  最后修改于: 2022-05-13 01:55:26.939000             🧑  作者: Mango

AngularDart 简介

在本文中,我们将了解 AngularDart 框架的基础知识,以及如何在在线模式下开始使用它。所以首先让我们看看什么是Dart。

Dart: Dart是一种面向对象的编程语言,支持各种编程范式,如类、多态、接口、继承、集合和泛型。 Dart由 Google 开发,用于构建应用程序和服务器。

如果您是初学者并且想在下载依赖项之前开始在线实现Dart代码,我们建议您访问 https://dartpad.dev/?id。 //dart.dev /工具/ SDK /档案:但如果你想深入到它,并希望您的系统上执行代码,您可以从它的官方网站上的https安装Dart SDK。

Dart的代码:



Dart
void main() {  
    var info = "article";  
    var publisher = "Geeks for Geeks";  
    print("This $info is published on $publisher");  
}


Dart
import 'dart:html';
  
void main() {
  var header = querySelector('#header');
  header.text = "Geeks for Geeks ";
}


HTML
  

  

is best



CSS
body {
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(
    "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q.jpg")
}
  
h1 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
  
h2 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}


输出:

This article is published on Geeks for Geeks

在上面的代码中:

  • void: void 是一种返回类型,表示该函数没有返回值。
  • main(): main()函数指示程序的开始,对其执行至关重要。
  • var: var 语句声明一个变量,它可以包含字母、数字或符号。
  • print(): print()函数用于在控制台上打印输出。

注意:我们可以清楚地看到它非常类似于 C 风格的语法和 JavaScript 的结合。

注意:要了解有关Dart及其设置的更多信息,请查看 Geeks for Geeks Dart教程。

现在让我们看看什么是 AngularDart。

AngularDart: AngularDart 是 Google 开发的框架,用于使用 HTML、CSS 和Dart构建 Web 应用程序、服务器应用程序或单页应用程序。它以其良好的速度、执行力和生产力而闻名。 AngularJS 是制作结构化 Web 应用程序的著名工具,而 AngularDart 基本上是 Angular 在Dart语言中的实现。 AngularDart 的当前版本是5.3.1 ,并且正在许多应用程序中使用,例如 Fiber、Google Play Console 等。

如果您之前使用过FlutterDart ,那么您会爱上 AngularDart。



如何在线运行 AngularDart 代码:如果您是初学者并想在线测试您的 AngularDart 代码,请按照以下步骤操作:

第 1 步:打开 DartPad

第 2 步:单击新垫

第三步:出现确认框,点击确定

第 4 步:选择Dart打开HTML 开关,然后单击创建

第 5 步:现在您可以编写Dart、HTML 和 CSS 代码,要运行代码,请单击“运行”按钮。



下面是 AngularDart 代码实现:

Dart

import 'dart:html';
  
void main() {
  var header = querySelector('#header');
  header.text = "Geeks for Geeks ";
}

HTML

  

  

is best

CSS

body {
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(
    "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q.jpg")
}
  
h1 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
  
h2 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}

输出:

在上面的代码中:

  1. 我们在Dart文件中为所需的库导入了' dart :html'
  2. 在 main 方法中,我们将变量声明为“header”
  3. 变量使用 querySelector 获取值。
  4. 我们为 header 变量分配了一个文本以在 HTML 中使用。
  5. 在 HTML 文件中,我们使用 id 作为参数调用标头值。
  6. 在 CSS 文件中,我们根据需要对元素进行了样式设置。

注意:如果您想将依赖项下载到您的系统中,请查看 https://angulardart.dev/guide/setup 文档。

现在,让我们看看 AngularDart 与其类似工具之间的核心区别。

AngularDart 与 AngularJS

AngularDartAngularJS
AngularDart is faster than AngularJSAngularJS is slower than AngularDart
AngularDart is written in Dart languageAngularJS is written in Javascript language
AngularDart is a class-based frameworkAngularJS is a symbol-based framework
AngularDart uses components.AngularJS uses directive controllers.
AngularDart uses shadowDomAngular uses ngTransclude
In AngularDart, we use apply function.In AngularJs, link/compile functions are used.
AngularDart uses the attribute maps conceptAngularJS has no attribute maps concept

AngularDart 与Flutter振:

AngularDartFlutter
AngularDart is used for building web applications.Flutter is used to develop cross-platform applications for Android, iOS, and the web.
AngularDart is less popular.Flutter is very popular among developers.
There are very few companies that use AngularDart.A huge number of companies use Flutter for application development.

AngularDart 的优缺点:

优点:

  • Angular Dart源代码很干净
  • Dart开发人员的福音。
  • 许多与 Typescript 版本不兼容的功能可以与Dart版本一起使用。
  • AngularDart 不仅仅是一种编程语言,还是一套稳定的库和可靠的工具。
  • AngularDart 更快。

缺点:

  • AngularDart 教程很难找到。
  • 不太活跃的 AngularDart 社区。
  • Angular 组件包不支持 Internet Explorer。
  • 不那么受欢迎,它不像 Angular Typescript 那样最新。