AngularJS的基本简介

今天你吸猫了么
55 阅读6分钟

什么是Angular？Angular是一个JavaScript框架，可以帮助你建立反应式单页应用程序。换句话说，单页应用程序给人一种访问和浏览通过网络提供的在线网络应用的感觉。当你访问单页应用程序中的各种链接时，浏览器窗口中的URL会发生变化，但所有这些都发生在浏览器本身。你真正交互的只是一个单一的HTML文件和一些在初始页面加载时从服务器加载的JavaScript代码。这给用户带来了非常好的体验，因为JavaScript可以在页面上渲染变化，比网络浏览器为每一个页面变化向网络服务器发出HTTP请求的速度更快。其结果是，在速度和简单性方面，其外观和感觉可以与移动应用程序非常相似。

Angular的众多版本

当然，Angular从第一版开始，一经推出就是革命性的。它的方法导致了其他流行的JavaScript框架的产生，如React和Vue。公平地说，从第一版开始，Angular的版本划分就有点混乱了。截至目前，你有Angular 1、2、6和7。在Angular 1在前端世界大受欢迎之后，Angular 2紧随其后，对代码库进行了全面重写。Angular 2于2016年问世，除了新的代码库外，它还是一种全新的Angular代码编写方式。不幸的是，Angular 1与Angular 2不兼容。那么，我们是如何走到6和7的？嗯，实际上，如果你在Angular 2或更高版本上，只需将其称为 "Angular "或 "AngularJS "就足够了。好的是，现在我们已经度过了Angular 2的重写阶段，现在看来，每一次迭代都是简单的增量改进和错误修复。你的理智将保持不变。

Angular命令行界面

通过使用Angular CLI或命令行界面，开始使用AngularJs会变得更容易一些。现在让我们来试运行一下。

首先，我们可以用以下命令安装Angular CLI。 npm install -g @angular/cli请确保你的机器上已经安装了NodeJs和NPM。安装将在终端显示类似于这样的输出。

angularjs $npm install -g @angular/cli

+ @angular/cli@7.0.4
added 268 packages from 205 contributors in 64.825s
angularjs $

现在Angular CLI工具已经安装好了，你可以用它来搭建一个应用程序的支架。 ng new命令来搭建一个应用程序。你还需要为该应用程序提供一个名称。这里我们创建了一个新的应用程序，叫做hello-angular。注意，angular cli会问我们几个问题。你是否想添加Angular路由，以及你想使用哪种样式表格式。为了我们的目的，我们将暂时不使用路由，并为我们的样式表使用标准CSS。
angular cli example

如果这一步似乎花了很长时间，请继续并再次尝试，确保你以管理员身份运行你的命令行工具。请注意，这一步可能需要几分钟时间。最后，你应该有一个这样的文件夹。一旦完成，我们可以进入该目录，看看为我们创建了什么。
inside the angular generated directory

很好!看起来我们有README.md、package.json、tslint.json、angular,json、tsconfig.json、package-lock.json以及e2e、src和node_modules目录。现在，让我们运行以下命令 ng serve.
angularjs ng serve command

我们可以看到，实时开发服务器已经启动，并在本地主机4200端口上运行。我们可以访问这个URL，发现我们有一个工作的AngularJS应用程序的雏形
angular cli starter application

我们可以在Visual Studio Code这样的编辑器中打开我们新的Angular应用程序，这里是我们的起点。
visual studio code angularjs project

热重载是默认开启的

由Angular CLI为我们设置一切的一个很好的特点是，热重载默认是自动开启的。如果我们打开app.component.html文件，该文件包含在 src/app文件夹中的app.component.html文件，我们可以对该文件进行修改，就像我们在这里看到的突出显示。

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Check out this new {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener noreferrer" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener noreferrer" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener noreferrer" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

如果我们看一下我们的命令行，注意到该工具会自动重新编译一切。
angular cli hot reload example

在我们的本地主机上访问网站，会立即显示出更新的内容。非常狡猾!
angularjs testing via cli tool

现在你可能想知道，当我们刚刚编辑的代码被写成 "看看这个新的{{标题}}！"时，输出怎么会显示 "看看这个新的hello-angular！"好吧，这里发生的事情是，在双**{{ }}大括号内我们有动态数据。这是Angular的目的之一，因为我们希望能够在我们的应用程序中拥有动态数据。为了了解这一点，我们可以打开app.component.ts**typescript文件，该文件本身就是Angular组件的一部分，我们可以看一下。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hello-angular';
}

啊哈。它看起来像 title是一个变量，它被设置为一个 "hello-angular "的字符串。我们改变这个字符串怎么样？

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Super Mario';
}

我们的应用程序会自动重新编译，浏览器也会立即更新。
updating the title of an angular app

检查

对于单页应用程序，如果你看一下页面的源代码，它看起来很空。只有少数几个html标签和一些包含的JavaScript。就像我们讨论的那样，这是因为在SPA中所有的东西都是用JavaScript渲染的。但是，应用程序如何将自己 "附加 "到浏览器上。它是通过使用根元素来实现的，在我们的例子中是标签。这是我们到目前为止的页面的源头。请注意，我们的应用程序是在突出显示的应用根标签上附着在页面上的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

如果我们看一下我们项目根中的index.html文件，我们可以看到这是在哪里定义的。
angularjs app root

介绍一下 [(ngModel)]

现在我们来看看Angular中绑定数据的方法之一。要做到这一点，首先我们将打开app.modules.ts文件，并添加下面突出的几行。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，我们可以更新app.component.html文件，使之使用 [(ngModel)].

<input type="text" [(ngModel)]="game">
<p>{{ game }}</p>

最后，我们需要像这样更新app.component.ts文件中的变量名。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  game = 'Super Mario';
}

就这样，我们现在在AngularJS中有了一些数据绑定的工作!

AngularJS简介摘要

在这个关于AngularJS的基础教程中，我们了解了一点关于Angular的历史，它的第二版重写，以及它今天的情况。Angular有一个强大的命令行界面工具，可以为你搭建出一个应用程序的支架。此外，通过使用 ng serve命令，你会得到一个伟大的开发服务器，并为你对源文件所做的任何修改自动热重载。最后，我们通过使用[(ngModel)]指令看了AngularJS中数据绑定的最基本介绍。

avatar
文章
阅读
粉丝