angular学习（一）——简介、搭建项目、第一个组件

最新推荐文章于 2024-04-22 23:18:29 发布

DrinkWater Sun

最新推荐文章于 2024-04-22 23:18:29 发布

阅读量287

点赞数 1

文章标签： angularjs typescript

本文链接：https://blog.csdn.net/qq_41534913/article/details/104915718

版权

angular学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.angular.js简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

2.angular四大特征

2.1MVC模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

2.2双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。

2.3依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI。后端的童鞋应该更容易理解这个概念。

2.4模块化设计

高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate、ngTouch
2)用户自定义的模块 angular.module(‘模块名’,[ ])

3.angular环境搭建

3.1 前端开发必备环境：node.js

3.2 node自带包管理工具npm，为了防止npm不能使用的一些情况，推荐使用cnpm，yarn

3.2 安装angular/cli （只需要安装一次）

 npm install -g @angular/cli， cnpm install -g @angular/cli，yarn global add @angular/cli 其一

4.angular创建项目

4.1 在指定为止创建你需要的项目文件夹 ng new 文件夹名
如果电脑上的node版本不符合要求，可以使用nvm管理node版本，切换到符合要求的node版本，需要注意的是换了node版本之后，cnpm，yarn需要重新安装
nvm使用请点击这里
4.2 项目创建完成后，node_modules包已经存在不需要再额外初始化， npm run start启动项目,

5.生命周期

执行顺序
• 指令与组件共有的钩子
1. ngOnChanges - 当数据绑定输入属性的值发生变化时调用
2. ngOnInit - 在第一次 ngOnChanges 后调用，并且只调用一次
3. ngDoCheck - 自定义的方法，用于检测和处理值的改变
• 组件特有的钩子
5. ngAfterContentInit - 在组件内容初始化之后调用
6. ngAfterContentChecked - 组件每次检查内容时调用
7. ngAfterViewInit - 组件相应的视图初始化之后调用
8. ngAfterViewChecked - 组件每次检查视图时调用
• 指令与组件共有的钩子
9. ngOnDestroy - 指令销毁前调用

6.初始化项目说明

6.1 src文件夹

应用代码位于src文件夹中。所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。这个文件夹之外的文件都是为构建应用提供支持用的。
在这里插入图片描述

6.2 根目录

在这里插入图片描述

7.第一个应用helloWord

7.1 打开src\app\app.component.html，删掉项目初始化生成的代码，重新编写

<div>
 欢迎使用 angular
 <h1>Hello{{people}}</h1>
</div>

<router-outlet></router-outlet>

代码中的 {{}} 里面的内容，使用双向绑定
7.2 再打开src\app\app.component.ts

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

@Component({
  selector: 'app-root', // 组件名称
  templateUrl: './app.component.html',    // 使用的页面模板
  styleUrls: ['./app.component.less']     // 样式文件
})
export class AppComponent {
  people = '孙亮';
}

这里的people就是绑定到界面上的people，修改这个值，界面上也会刷新

导入依赖

import { Component } from ‘@angular/core’;定义了我们编写代码的时候要用到的模块。这里我们导入了Component。’@angular/core’ 部分高速程序到哪里查找所需要的模块，从他里面取出对象（{}中声明的，这里是Component ）。

Component注解

@Component({
  selector: 'app-root',  // 组件名称，表示我们可以再html中使用<app-root>标签来使用它
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

注解的概念，这里以@开始的语句和java中的注解的使用方式和作用都很类似
a) 注解（装饰器）就是一个函数，但它是一个返回函数的函数，它属于Typescript的特性，而非Angular的特性。
b) @Component可以让开发者通过Angular 的@Component创建一个类似Java的class，并同时提供额外的元数据，用于定义在运行环境中，这个component将如何运行/实例化以及被使用。
c) selector表示该组价将使用什么标签，当html中有这个标签时，就会用当前组件去编译和渲染。

templateUrl添加模板

a) templateUrl: html文件的url，导入项目模板的意思。
b) template，把对应的html写在了当前的文件中,字符串形式。

注意：

// 不推荐templateUrl和template同时存在
// 当templateUrl和template的内容同时存在时，只会生效templateUrl的内容

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html', // 这里的优先级大于template
  template: '<h1>hello{{people}}</h1>',
  styleUrls: ['./app.component.css']
})

styleUrls样式表文件地址

这个参数是一个数组

8.页面的输出流程

用户访问index.html文件时。执行到 < app-root></ app-root> 系统就会通过selector 关联的所有组件。找到selector: ‘app-root’ 这个组件，然后用templateUrl: ‘./app.component.html’ 声明的模板，去渲染。在html模板中，遇到了 {{people}}（或者其他的ng的标签），又回到 app.component.ts 中找到 people的值，替换掉模板界面的变量，最后向用户输出静态页面。
在这里插入图片描述

9.第一个组件

9.1新建文件

在src\app下新建first-component文件夹，在src\app\first-component下新建first-component.html、first-component.ts、first-component.less文件
在这里插入图片描述

9.2写代码

<!-- first-component.html -->
<body>
  <div>
    <3>今天工作状态：</3>
  </div>
  <ul>
    <li>天气{{workStatus.weather}}</li>
    <li>工作内容{{workStatus.work}}</li>
    <li>姓名{{workStatus.name}}</li>
    <li>时间{{workStatus.time}}</li>
  </ul>
</body>

在typescript中，要使用变量要先声明变量类型。
typescript点击这里

// first-component.ts 
  
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'first-component',
  templateUrl: './first-component.html',
  styleUrls: ['./first-component.less'],
})
export class FirstComponent implements OnInit {
  workStatus: {
    weather: string,
    work: string,
    name: string,
    time: string,
  }
  constructor() {
    this.workStatus = {
      weather: '多云',
      work: 'sit问题修复',
      name: 'sun',
      time: '2020-03-116',
    }
  }

  ngOnInit() {
    console.log('初始化加载')
  }
}

9.3 自定义组件配置

在app.module.ts中配置自定义组件
在这里插入图片描述

9.4 使用组件

在app.component.html中使用该组件

在这里插入图片描述

参考文章：https://blog.csdn.net/onil_chen/article/details/77934685

DrinkWater Sun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular学习（一）——简介、搭建项目、第一个组件

1.angular.js简介AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。2.angular四大特征2.1MVC模式An...
复制链接

扫一扫