前端框架AngularJS入门

最新推荐文章于 2024-06-23 17:16:57 发布
最新推荐文章于 2024-06-23 17:16:57 发布
阅读量122 收藏
点赞数
文章标签： 前端控件anjular JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltcz99/article/details/88362872
版权

1.前端框架AngularJS入门

1.1 AngularJS简介

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

 

1.2 AngularJS四大特征

1.2.1 MVC 模式

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

 

 

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;

1.2.2双向绑定

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

 

 

1.2.3依赖注入

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

1.2.4模块化设计

高内聚低耦合法则

1)官方提供的模块           ng、ngRoute、ngAnimate

   2)用户自定义的模块     angular.module('模块名',[ ])

1.3入门小Demo

1.3.1 表达式

<html>

<head>

<title>入门小Demo-1</title>

<script src="angular.min.js"></script>

</head>

<body ng-app>

{{100+100}}

</body>

</html>

 

执行结果如下：

 

表达式的写法是{{表达式 }} 表达式可以是变量或是运算式

ng-app 指令 作用是告诉子元素一下的指令是归angularJs的,angularJs会识别的

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

1.3.2 双向绑定

<html>

<head>

<title>入门小Demo-1  双向绑定</title>

<script src="angular.min.js"></script>

</head>

<body ng-app>

请输入你的姓名：<input ng-model="myname">

<br>

{{myname}},你好

</body>

</html>

运行效果如下：

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

1.3.3 初始化指令

我们如果希望有些变量具有初始值，可以使用ng-init指令来对变量初始化

<html>

<head>

<title>入门小Demo-3  初始化</title>

<script src="angular.min.js"></script>

</head>

<body ng-app   ng-init="myname='陈大海'">

请输入你的姓名：<input ng-model="myname">

<br>

{{myname}},你好

</body>

</html>

1.3.4 控制器

<html>

<head>

<title>入门小Demo-3  初始化</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定义了一个叫myApp的模块

//定义控制器

app.controller('myController',function($scope){

$scope.add=function(){

return parseInt($scope.x)+parseInt($scope.y);

}

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

x:<input ng-model="x" >

y:<input ng-model="y" >

运算结果：{{add()}}

</body>

</html>

运行结果如下：

 

ng-controller用于指定所使用的控制器。

理解 $scope：

$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.

 

1.3.5 事件指令

<html>

<head>

<title>入门小Demo-5  事件指令</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定义了一个叫myApp的模块

//定义控制器

app.controller('myController',function($scope){

$scope.add=function(){

$scope.z= parseInt($scope.x)+parseInt($scope.y);

}

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

x:<input ng-model="x" >

y:<input ng-model="y" >

<button ng-click="add()">运算</button>

结果：{{z}}

</body>

</html>

运行结果：

 

ng-click  是最常用的单击事件指令，再点击时触发控制器的某个方法

1.3.6 循环数组

<html>

<head>

<title>入门小Demo-6  循环数据</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定义了一个叫myApp的模块

//定义控制器

app.controller('myController',function($scope){

$scope.list= [100,192,203,434 ];//定义数组

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

<table>

<tr ng-repeat="x in list">

<td>{{x}}</td>

</tr>

</table>

</body>

</html>

这里的ng-repeat指令用于循环数组变量。

运行结果如下：

1.3.7 循环对象数组

<html>

<head>

<title>入门小Demo-7  循环对象数组</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定义了一个叫myApp的模块

//定义控制器

app.controller('myController',function($scope){

$scope.list= [

{name:'张三',shuxue:100,yuwen:93},

{name:'李四',shuxue:88,yuwen:87},

{name:'王五',shuxue:77,yuwen:56}

];//定义数组

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

<table>

<tr>

<td>姓名</td>

<td>数学</td>

<td>语文</td>

</tr>

<tr ng-repeat="entity in list">

<td>{{entity.name}}</td>

<td>{{entity.shuxue}}</td>

<td>{{entity.yuwen}}</td>

</tr>

</table>

</body>

</html>

运行结果如下：

 

1.3.8 内置服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。注意：以下代码需要在tomcat中运行。

<html>

<head>

<title>入门小Demo-8  内置服务</title>

<meta charset="utf-8" />

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定义了一个叫myApp的模块

//定义控制器

app.controller('myController',function($scope,$http){

$scope.findAll=function(){

$http.get('data.json').success(

function(response){

$scope.list=response;

}

);

}

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">

<table>

<tr>

<td>姓名</td>

<td>数学</td>

<td>语文</td>

</tr>

<tr ng-repeat="entity in list">

<td>{{entity.name}}</td>

<td>{{entity.shuxue}}</td>

<td>{{entity.yuwen}}</td>

</tr>

</table>

</body>

</html>

建立文件 data.json

[

{"name":"张三","shuxue":100,"yuwen":93},

{"name":"李四","shuxue":88,"yuwen":87},

{"name":"王五","shuxue":77,"yuwen":56},

{"name":"赵六","shuxue":67,"yuwen":86}

]

 

 

码农秃头老李
关注
前端框架AngularJS基础入门
qq_44154912的博客
06-12 702
1. AngularJS简介: AngularJS 诞生于2009年，后为Google所收购。被用于Google的多款产品当中。 AngularJS 特性: MVC、模块化、自动化双向数据绑定、依赖注入 双向绑定: 数据变量与视图同步更新 ,当修改数据变量视图显示的随着改变 , 当修改文本框中的值数据变量一起改变。JS与JQuery都是单项绑定。 模块化设计:官方提供了多种模块 , 用户可以自定义模块 2.基础使用 2.1 表达式与指令 AngularJS 使用{{ }}表达式 ng-app 指
前端框架AngularJS简介及入门
NULL
07-22 3043
AngularJS简介     AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护。它的最新版本是1.3.14。 AngularJS四大特征    ①MVC的模式    Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合,通过依赖注入,Angular为客户端的Web应用带...
前端框架AngularJS
huangyh技术栈
11-17 601
1.1 AngularJS简介 AngularJS  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 官方网站：https://angularjs.org/ 下载地址：https://code.an...
前端框架-Angular.js
码园老农的专栏
10-09 8803
前端的功能与单页应用 就webapp开发而言，前端实现的功能主要有： -实现UI（渲染出用户可见的视图和各种功能组件） -对用户的操作（事件）做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 -对文件资源的管理（HTML/CSS/javascrip/图片等） -提供用户安装和运行的手段 目前，实现这些功能的框架/库五花八门。怎么选择呢？ 首先，谨记“用户体验至
Angular-Web前端框架
weixin_47295886的博客
08-12 973
Angular（使用Type Script编写）是Angular JS的重写（使用JS编写）:构建用户界面的前端框架。Angular核心特性。
XXX电商系统开发-前端框架AngularJS入门.docx
06-02
AngularJS作为一款强大的前端框架，在电商系统的开发过程中发挥着重要作用。通过其MVC架构、模块化设计、双向数据绑定等特性，可以显著提升开发效率和用户体验。对于开发者而言，掌握AngularJS不仅能够帮助他们在...
day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
黑泽君
01-15 870
day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
starter-laravel-angular-master:这是一个单页应用程序入门应用程序的存储库，该应用程序具有现代Laravel PHP框架和Google广受赞誉的前端框架AngularJS。 只需下载并安装，您便拥有构建任何应用程序的良好基础
04-28
这是一个单页应用程序入门应用程序的存储库，该应用程序具有现代Laravel PHP框架和Google广受赞誉的前端框架AngularJS。 只需下载并安装，您便具有构建任何应用程序的良好基础。 特征！ 单页申请 HTML5模式网址 ...
前端MVC框架之 Angular
weixin_30521161的博客
03-30 199
一、什么是Angular jQuery，它属于一种类库(一系列函数的集合)，以DOM为驱动核心；而Angular是一种 MVC 的前端框架，则是前端框架，以数据和逻辑为驱动核心，它有着诸多特性，最重要的是：模块化，双向数据绑定，语义化标签，依赖注入等。 MVC 开发模式：model（模型），view（视图），controller（控制器）。 二、模块化 最大程度实现代码复用 定义应用 为HTML...
JS框架AngularJS
shenzhenNBA的专栏
10-18 4473
JavaScript的使用已经非常普遍，同时也有很多写好的JS框架，比如 jQuery 框架，应用已经非常广泛，最近又出很多新的JS框架，比如 AngularJS 框架，下面就简单认识一下 该框架； 一，AngularJS的开发者 AngularJS 由 Google 开发； 二，什么是AngularJS？ 在高层次理解之上，AngularJS是一个把HTML(视图)绑定到Java
前端框架AngularJS-基础详解
weixin_44232093的博客
12-28 1075
本次讲解的版本是AngularJS-1,最流行的可能还是AngularJS1吧 1.什么是AngularJS AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等 2.MV...
【Angular】认识前端框架
冯浩月
07-02 684
前言&amp;nbsp;&amp;nbsp;小编最近在做项目的过程中，需要深入了解一下前端架构，便上网学习了一下，果真是很有收获，下面将自己了解到的内容，简单做一个总结。 一、常说的框架 &amp;nbsp;&amp;nbsp; Angular，Vue和react，但目前小编使用的是angular的框架。 二、为什么使用框架 &amp;nbsp;&amp;nbsp; 大家也许会有一个疑问，明明我们使用JQuery使用得很好，为什么使用a...
全面掌握前端框架AngularJS
绝圣弃智-零的博客
11-27 2627
整理自菜鸟教程 AngularJS AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。 AngularJS 学习起来非常简单。 AngularJS 实例 <!DOCTYPE html> <html> <head> &l...
全面分析一下前端框架Angular的来龙去脉，分析angular的技术要点和难点，以及详细的语法和使用规则，底层原理-小白进阶之路
最新发布
zhang9880000的博客
06-23 2911
Angular 是一个由 Google 维护的开源前端框架。它最早在 2010 年发布，最初版本称为 AngularJS。2016 年，团队发布了一个完全重写的版本，称为 Angular 2，之后的版本（如 Angular 4、Angular 5 等）都统称为 Angular。Angular 使用 TypeScript 编写，提供了静态类型检查、现代 JavaScript 特性等优点，有助于提高代码质量和开发效率。采用组件式开发，将应用程序分割成独立的、可复用的组件，每个组件包含自己的模板、样式和逻辑。使用
angular框架简介基础与使用（全文2w8字）前端框架angular
热门推荐
几百块的博客
05-02 2万+
angular作为一个完整的框架，模块化做的特别好。内置的路由，httpclient，rxjs，除了界面相关的组件库，几乎可以不用任何第三方工具库就可以完成一个spa项目。对typescript支持非常好，或者说只有typescript以一个选择。Angular是三大巨头中，框架版本升级最容易的，虽然目前在国内不是特别火。...
AngularJS入门(一)
weixin_30920513的博客
03-15 275
1. 前端框架AngularJS入门 1.1 AugularJS简介 　　AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 1.2 AngularJS四大特征 ...
angularjs前端框架
HP-MN
03-05 952
angularjs 锋利的web app快速敏捷的开发框架支持各种插件灵活使用，减少不必要的dom操作。
Angular前端框架
头号玩家的博客
05-24 307
定义：       AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等特点：    使用双大括号{{}}语法进行数据绑定；    使用DOM...
AngularJS入门与框架特性解析
AngularJS是一个强大的JavaScript框架，专为构建动态Web应用程序而设计，基于MVC（Model-View-Controller）架构模式。它由Google维护，旨在简化前端开发过程，尤其是在处理数据绑定和依赖注入时。AngularJS的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值