前端开发工程师-前端框架和库-Angular_Angular与AngularJS的差异.docx

PAGE1

PAGE1

Angular与AngularJS的概述

1Angular与AngularJS的历史背景

AngularJS由Google在2010年发布，旨在简化前端开发，提供一种声明式的方式来构建动态网页应用。AngularJS的核心特性包括双向数据绑定、依赖注入、指令和控制器，这些特性使得开发者能够更高效地构建和维护复杂的前端应用。

随着前端技术的发展和需求的增加，Google在2016年推出了Angular（通常被称为Angular2+），这是一个完全重写的框架，旨在解决AngularJS在大规模应用中的一些问题。Angular引入了组件化架构、TypeScript支持、更强大的路由系统、以及对移动和桌面应用的更好支持。Angular的版本更新迅速，从Angular2到Angular14（截至2022年），每个版本都带来了性能和功能的改进。

2Angular与AngularJS的基本概念

2.1AngularJS的基本概念

AngularJS基于MVC（Model-View-Controller）架构模式，其中：-Model：代表数据模型，通常由JavaScript对象表示。-View：是用户看到的HTML页面。-Controller：负责处理用户输入和更新模型。

AngularJS使用$scope对象作为控制器和视图之间的桥梁，通过$scope，控制器可以更新视图中的数据，视图也可以访问控制器中的方法和属性。

示例：创建一个简单的AngularJS应用，显示一个计数器并提供增加和减少计数器的按钮。

!DOCTYPEhtml

htmlng-app=myApp

head

scriptsrc=/ajax/libs/angularjs/1.7.9/angular.min.js/script

script

varapp=angular.module(myApp,[]);

app.controller(myCtrl,function($scope){

$scope.counter=0;

$scope.increment=function(){

$scope.counter++;

};

$scope.decrement=function(){

$scope.counter--;

};

});

/script

/head

body

divng-controller=myCtrl

pCounter:{{counter}}/p

buttonng-click=increment()Increment/button

buttonng-click=decrement()Decrement/button

/div

/body

/html

在这个例子中，$scope被用来在控制器和视图之间共享数据和方法。ng-app和ng-controller指令用于将AngularJS应用和控制器绑定到HTML元素。

2.2Angular的基本概念

Angular采用了组件化架构，每个组件都有自己的模板、样式和逻辑。组件是Angular的核心构建块，它们可以嵌套和重用，使得应用结构更加清晰和模块化。

Angular使用TypeScript作为开发语言，这是一种静态类型的JavaScript超集，提供了更好的类型检查和代码可维护性。

示例：创建一个简单的Angular组件，显示一个计数器并提供增加和减少计数器的按钮。

//ponent.ts

import{Component}from@angular/core;

@Component({

selector:app-root,

template:`

div

pCounter:{{counter}}/p

button(click)=increment()Increment/button

button(click)=decrement()Decrement/button

/div

`,

styles:[]

})

exportclassAppComponent{

counter=0;

increm