那些年初识Angular(1)

Flink_China 发布于2019-08-02 11:36 / 861人阅读

摘要：它包含多个属性，这些属性值叫做元数据。会根据元数据渲染组件，并执行组件逻辑。元数据会告诉图和将这个类处理成一个组件。元数据这段代码表示这个组件可以通过这个标签来调用。

那些年初识Angular

由于工作需要初识了Angular，由于个人在学习一门新语言的时候喜欢买一本相关的书籍自己钻研，还记得自己的第一本Angular书籍是关于Angular2的学习，自此正式踏入Angular的学习。
书写这篇文章的主要目的是想以此文章几年自己学习Angular的历程和自己的一些感想，如果这篇文章能为你提供些许帮助也是极好的，废话不多说，正式进入正文。

搭建开发环境

首先你需要安装node.js
https://nodejs.org/en/download/

根据自己的操作系统选择相应的版本安装
安装Angular-cli工具，这个工具可以帮助你快速构建Angular项目,生成项目所需要的组件
这里通过npm在控制台安装

npm install -g @angular/cli

至此整体开发环境搭建完成

生成你的第一个Angular项目
打开控制台,利用ng命令生成Angular项目

ng new my-app

以下是我生成的一个初始Angular项目结构

了解Angular项目基本结构
首先我们来解释首层结构
node_modules ：第三方依赖包存放目录
e2e ：端到端的测试目录用来做自动测试的
src ：应用源代码目录
.angular-cli.json ：Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包比如jquery等
karma.conf.js ：karma是单元测试的执行器，karma.conf.js是karma的配置文件
package.json ：这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
protractor.conf.js ：也是一个做自动化测试的配置文件
README.md ：说明文件
tslint.json ：是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它
然后是src目录
app目录：包含应用的组件和模块，我们要写的代码都在这个目录
assets目录：资源目录，存储静态资源的比如图片
environments目录：环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
index.html ：整个应用的根html，程序启动就是访问这个页面
main.ts ：整个项目的入口点，Angular通过这个文件来启动项目
polyfills.ts ：主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
styles.css ：主要是放一些全局的样式
tsconfig.app.json ：TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.spec.json ：不用管
test.ts ：也是自动化测试用的
typings.d.ts ：不用管
我们主要的开发精力都在app这个目录下，一般一个Angular应用程序，最少需要一个组件，一个模块。这个在我们生成Angular项目的时候已经给我们生成了，如图：

以初始Angular项目来梳理组件，模块，模板的概念

在我们的Angular初始项目中生成一个app.component.ts的文件，这个就是我们的组件，以下就是我在这个文件的基础上所对组件牵扯到的一系列知识的整理，如果有不对的地方欢迎指出☺

// 从angular核心模块中引入Component装饰器
import { Component } from "@angular/core";

/* 这段代码中的@Components就是一个装饰器，它用来告知Angular框架来如何处理一个Typescript类。
它包含多个属性，这些属性值叫做元数据。Angular会根据元数据渲染组件，并执行组件逻辑。
简单的说就是我们可以看到这段代码的后三行定义了一个AppComponent类，它看着就是一个普通的ts类，
但是我们需要告诉Angular这个类是一个组件，这就需要用装饰器将这些元数据附加到类上。元数据会告
诉Angular图和将这个Typescript类处理成一个组件。 */

@Component({

  /* 元数据
        selector: "app-root"：
        这段代码表示这个组件可以通过app-root这个html标签来调用。打开项目根目录下的index.html
        可以看到里面有这样一行代码
        
        这其实就是调用了我们的这个组件

        templateUrl: "./app.component.html" ：
        既然已经知道了怎么调用组件，这行代码就是用来说明组件显示的内容是什么。文件路径就是这个
        组件对应的模板，模板用来定义组件的外观
        打开app.component.html代码如下
        
          {{title}}
        

        styleUrls: ["./app.component.css"] ：
        这个和上面的类似，表示组件的css
   */
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
/* 控制器
   AppComponent其实是一个很简单的ts类，但是在这里他是这个组件的控制器，我们这个组件所有相关的
   业务逻辑都在这个控制器里书写，包含了组件的所有属性和方法，控制器和模板进行双向数据绑定也就是
   模板中的{{变量名}}，这里的两个花括号就是双向数据绑定的格式

 */
export class AppComponent {
}

模块：

/* 主模块 */

/* import数组 引入项目需要的指令
    例如需要经常需要的ngif等指令 ngif等指令都在CommonModule类中
    引入项目需要的类
    不要在import数组中引入ngmodule类型之外的类
    如果有两个同名的指令 可以在指令后面添加 as 别名 另外再给同名指令添加一个别名，就可以了
    BrowserModule：每个在浏览器中运行的应用都需要引用这个指令
    */
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

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

/* 必须在Ngmodule类中声明每一个用到的组件
   不要在declarations添加组件，指令和管道以外的类型
*/
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

GPU云服务器云服务器免费虚机1年 vps免费1年免费空间1年云主机试用1年

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52992.html

angular - 收藏集 - 掘金

摘要：如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架，能够创建功能强大，动态功能的。自发布以来，已经广泛应用于开发中。如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...

AlexTuan 2019-08-20 17:19 评论0 收藏0
初识React

摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。初识React 依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Co...

kuangcaibao 2019-08-21 14:47 评论0 收藏0
2019 年值得学习的顶级 JavaScript 框架与主题

摘要：我们的目标是找出最有职业投资回报率的主题和技术。比特币在几年内增长了若干个量级。比特币倍拐点在这个图表中，每个箭头始于倍点，指向价格修正后的最低点。 showImg(https://segmentfault.com/img/remote/1460000017919159); 图：Jon Glittenberg Happy New Year 2019 (CC BY 2.0) 又到了一年的...

legendaryedu 2019-08-23 14:46 评论0 收藏0
第二天·初识HTML

摘要：一什么是是超文本标记语言，超文本的意思就是指页面内可以包含图片链接，甚至音乐程序等非文字元素。这表示着元素的结尾这表示元素在此结束在本例中即段落在此结束。元素指定了当前的字符编码是，它包括了非常多人类已知语言的字符。一·什么是HTML HTML（HyperText Markup Language）是超文本标记语言，超文本的意思就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素...

Pocher 2019-08-02 12:01 评论0 收藏0
angular，react & vue

摘要：由进行开发和维护，代发布于年月，现在主要是。状态是只读的，只能通过来改变，以避免竞争条件这也有助于调试。文件大小为，而为，为。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。使用的人员报告说，他们永远不必阅读库的源代码。本文当时写在本地，发现换电脑很不是方便，在这里记录下。 angular，react & vue 2018/07/23 2016年，对于JavaScript来说...

jiekechoo 2019-08-23 18:02 评论0 收藏0