繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

angularJS简介、环境搭建（脚手架）及组件创建

作者：繁依Fanyi0 | 2024-05-12 05:19:16

踩

angularjs

文章目录

angularJS是什么
angularJS的特点
与Jquery的比较
angularJS的应用
- 单页面应用SPA
判断一个页面是否使用AngularJS写的
Angular的环境搭建
angular的组件创建
小案例：helloword实现
- 文档加载完毕和页面加载完毕
- 实现如下效果

angularJS是什么

jQuery是JS的一个函数库，而angularJS是Google开源的前端JS结构化框架。
官网：https://angular.cn/
离线手册下载：https://www.php.cn/xiazai/shouce/58

angularJS的特点

双线数据绑定
声明式依赖注入
解耦应用逻辑，数据模型和视图
完善的页面指令
定制表单验证
Ajax封装

与Jquery的比较

Jquery是JS函数库，jQuery的作用是封装简化dom操作的
angularJS是JS结构化框架，他的关注点不是dom，是页面动态的数据。

angularJS的应用

AngularJS的主要作用是构建单页面应用或Web App应用

单页面应用SPA

单页面应用的特点：

所有的活动局限于一个页面（即不会跳转到新的页面）
当前页面中的部分数据发生了改变不会去刷新整个页面，而是局部刷新
利用的是ajax技术，路由

判断一个页面是否使用AngularJS写的

Chrom浏览器下载ng-inspector for AngularJS插件，固定到标签页上，打开一个网页点击该插件，如果不是AngularJS写的就会显示：
在这里插入图片描述
如果是AngularJS写的就会显示相应的数据。
eg：微信网页版：

Angular的环境搭建

下载脚手架

下载angular脚手架
npm i -g @angular/cli

输入ng v就可以验证是否安装成功，出现如下内容说明安装成功：
在这里插入图片描述

创建angular项目

选择项目创建目录
ng new 项目名称 创建项目（选择路由和css，在创建过程会执行npm i 的操作）
进入到项目目录，ng serve --open运行项目

运行成功：
在这里插入图片描述

目录结构分析

在这里插入图片描述

在这里插入图片描述
app.component.spec.ts是生成的一个测试文件

文件详解：

app.module.ts

// angular的根模块文件，告诉angular如何组装应用

// angular的核心模块
import { NgModule } from '@angular/core';
// 浏览器解析模块
import { BrowserModule } from '@angular/platform-browser';
// 根模块
import { AppComponent } from './app.component';

// @NgModule装饰器，接受一个元数据对象，告诉angular如何编译和启动应用
@NgModule({
  // 配置当前项目运行的组件
  declarations: [
    AppComponent
  ],
  // 配置当前模块运行依赖的其他模块
  imports: [
    BrowserModule
  ],
  // 配置项目所需服务
  providers: [],
  // 指定应用的根组件，通过引导根模块AppModule来启动应用
  bootstrap: [AppComponent]
})
// 跟模块无需导出，因为它不需要被其他组件引用
export class AppModule { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

app.component.ts

// 引入核心模块中的Component
import { Component } from '@angular/core';

// 组件装饰器
@Component({
  selector: 'app-root',//组件名称
  templateUrl: './app.component.html',//组件的html
  styleUrls: ['./app.component.css']//组件的css
})
export class AppComponent {
  title = 'my-anuglar'; //定义组件的属性
  constructor(){
    // 组件类的构造函数
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

angular的组件创建

组建的创建：
利用命令 ng g component 组件名创建组件。
通过命令创建好组件之后会自动将创建的组件配置在app.module.ts.
组件的使用：
在html文件中直接使用组件的名称作为标签在页面进行引入。
eg：
在根html中引入app-news组件

<app-news></app-news>
<div>
   Angular  
</div>
1
2
3
4

小案例：helloword实现

文档加载完毕和页面加载完毕

document.ready：文档结构加载完毕
等待文档结构加载完毕的写法:

$(function(){})
1

window.onload：整个页面加载完毕，包括文件结构、图片等。

实现如下效果

在这里插入图片描述
jQuery实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="text" name="" id="">
    <p>您输入的内容是：<span></span></p>
    <script type='text/javascript' src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
    <script>
        $(function (){
           $('input').keyup(function (){
              var value = this.value
              $('span').html(value)
           })
        })
    </script>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

angular实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body ng-app>
    <input type="text" ng-model="username">
    <p>您输入的内容是：<span>{{username}}</span></p>
    <script type='text/javascript' src='./angular/angular-1.2.29/angular.js'></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

angular和jQuery相比：没有写js代码，没有操作Dom元素，直接操作的是动态数据。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/557742