前端框架AngularJS入门与实战

1、AngularJS简介

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

本文简单介绍了AngularJS的四大特征，从0开始入门前端框架AngularJS，并结合几个Demo了解AngularJS常用指令，包括的指令有：

1、<body ng-app>

2、<input ng-model="name"> 与 {{name}} 实现双向绑定

3、<body ng-app ng-init="name='填写初始化值变量或方法()">

4、控制器的创建指令

5、单击事件指令 ng-click="方法名称()"

6、ng-repeat循环指令

7、$http内置服务——实际是对ajax封装

最后简述了AngularJS控制器继承方法

使用案例：实战使用AngularJS分页、实战使用AngularJS执行增加删除操作。

本博客中使用到的所有资源：

链接: https://pan.baidu.com/s/1UMxEN2XJX3HC34kDbGroWw 密码: 9tt3

2、AngularJS四大特征

MVC模式
双向绑定
依赖注入
模块化设计

2.1、 MVC模式

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

Model:数据,其实就是angular变量($scope.XX);
View: 数据的呈现,Html+Directive(指令);
Controller:操作数据,就是function,数据的增删改查;

2.2、双向绑定

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

2.3、依赖注入

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

2.4、模块化设计

高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate

2)用户自定义的模块 angular.module('模块名',[ ]) // []书写其他模块，若引用到其他模块则书写

3、入门Demo

3.1初识angularJS

<html>
<head>
<title>angularJS Demo-1 表达式</title>
<script src="angular.min.js"></script>
</head>
<!-- body标签内申明ng-app -->
<body ng-app>
<!-- 使用双重{{}} -->
{{100+100}}</body></html>

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

ng-app 指令：作用是告诉子元素以下的指令是归angularJs的，拥有此指令，angularJs才会识别。

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

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

3.2演示angularJS双向绑定

<html>
<head>
<title>angularJS Demo-2 双向绑定</title>
<script src="angular.min.js"></script>
<meta charset="utf-8">
</head>
<!-- body标签内申明ng-app -->
<body ng-app>
<!-- ng-model为angularJS的绑定指令,引号内为变量名称,此时文本框和变量name进行了双向绑定 -->
请输入姓名:<input ng-model="name"></br>
<input ng-model="name">
<!-- 显示变量. -->
{{name}}
</body></html>

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

所谓的双向绑定，简单而言就是模型(M)和视图(V)之间的自动同步。

3.3、初始化值指令ng-init=" 属性名='初始化值' "

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

<html>
<head>
<title>angularJS Demo-3 初始化指令</title>
<script src="angular.min.js"></script>
<meta charset="utf-8">
</head>
<!-- body标签内申明ng-app -->
<!-- 为name初始化值 -->
<body ng-app ng-init="name='初始化值'">
<!-- ng-model为angularJS的绑定指令,引号内为变量名称,此时文本框和变量name进行了双向绑定 -->
请输入姓名:<input ng-model="name"></br>
</body></html>

实际应用中,可以在ng-init="属性名='方法名称' "，即页面一加载则调用单引号内的方法。

3.4、控制器的创建与使用

<html>
<head>
<title>angularJS Demo-4 控制器</title>
<script src="angular.min.js"></script>
<meta charset="utf-8"><script>/*1、建立模块@Param1 模块名称@Param2 []书写其他模块，若引用到其他模块则书写@return 模块对象*/    var myModule = angular.module("myModule",[]);/*2、通过模块对象创建控制器@Param1 控制器名称@Param2 函数类型,函数体为控制器所要执行的内容函数内参数 $scope代表控制层与视图层交换数据的桥梁$代表系统所提供的变量,自己定义的无$符号*/     		 myModule.controller("myController",function($scope){//$scope相当于public,外部可以调用,若不书写$scope则只能方法内部调用//如add = function(){}  add方法只能内部调用$scope.add = function(){//默认使用字符串类型 parseInt将String类型转换为int类型return parseInt($scope.x) + parseInt($scope.y);}});</script></head>
<!-- 若要操作myModule模块,则需要在ng-app指定模块名 -->
<!-- 指明控制器使用指令 ng-controller -->
<body ng-app="myModule" ng-controller="myController">
<!-- ng-model为angularJS的绑定指令,引号内为变量名称,此时文本框和变量name进行了双向绑定 -->
请输入第一个数:<input ng-model="x"></br>
请输入第二个数:<input ng-model="y"></br>
两数之和为:</br>
<!-- 3、调用控制器内部的函数 -->
{{ add() }}</body></html>

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

理解 $scope：

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

3.5、事件指令

常见如：单击事件指令 ng-click="方法名称()"

<html>
<head>
<title>angularJS Demo-5 事件指令</title>
<script src="angular.min.js"></script>
<meta charset="utf-8"><script>   var myModule = angular.module("myModule",[]);    		 myModule.controller("myController",function($scope){$scope.add = function(){$scope.res = parseInt($scope.x) + parseInt($scope.y);}});</script></head><body ng-app="myModule" ng-controller="myController">
请输入第一个数:<input ng-model="x"></br>
请输入第二个数:<input ng-model="y"></br>
<!-- 单击click事件指令 -->
<button ng-click = "add()">求和</button></br>两数之和为:</br>
{{ res }}</body></html>

3.6、循环数组

(1)循环指令ng-repeat

<html>
<head>
<title>angularJS Demo-6 循环数组</title>
<script src="angular.min.js"></script>
<meta charset="utf-8"><script>   var myModule = angular.module("myModule",[]);    		 myModule.controller("myController",function($scope){//构造一个数组$scope.array = [100,200,300,400,500];});</script></head><body ng-app="myModule" ng-controller="myController"><table><!-- 使用循环指令ng-repeat --><tr ng-repeat = "x in array"><td>{{x}}</td></tr>
</table></body>
</html>

(2)循环对象数组(常用在返回json数据中遍历输出)

实际即，使用对象导航输出

<html>
<head>
<title>angularJS Demo-7 循环对象数组(json数据遍历)</title>
<script src="angular.min.js"></script>
<meta charset="utf-8"><script>   var myModule = angular.module("myModule",[]);    		 myModule.controller("myController",function($scope){//构造json返回值$scope.jsonArray = [{name:'工员1',job:'UI',salary:7000},{name:'工员2',job:'前端工程师',salary:8000},{name:'工员3',job:'后端工程师',salary:9000},{name:'工员4',job:'运维',salary:10000},];});</script></head><body ng-app="myModule" ng-controller="myController"><table border="1px"><!-- 表头 --><tr><td>姓名</td><td>职位</td><td>薪水</td></tr><!-- 使用循环指令ng-repeat --><tr ng-repeat = "entity in jsonArray"><td>{{entity.name}}</td><td>{{entity.job}}</td><td>{{entity.salary}}</td></tr>
</table></body>
</html>

在ng-repeat指令体中,使用 $index 可以获取当前循环的索引数。

3.7、内置服务

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

<html>
<head>
<title>angularJS Demo-8 内置服务</title>
<script src="angular.min.js"></script>
<meta charset="utf-8"><script>   var myModule = angular.module("myModule",[]);    		 myModule.controller("myController",function($scope,$http){//构造json返回值$scope.findAll=function(){//get或者post请求,括号内为请求的后端地址,请求成功返回结果,实际上为ajax请求$http.get("data.json").success(function(response){$scope.list = response;});}});</script></head><!-- 使用ng-init是方法在页面初始化时调用 -->
<body ng-app="myModule" ng-controller="myController" ng-init="findAll()"><table border="1px"><!-- 表头 --><tr><td>姓名</td><td>职位</td><td>薪水</td></tr><!-- 使用循环指令ng-repeat --><tr ng-repeat = "entity in jsonArray"><td>{{entity.name}}</td><td>{{entity.job}}</td><td>{{entity.salary}}</td></tr>
</table></body>
</html>

使用自定义服务对与后端交互的地址进行抽取

1、通过add.service(serviceName,function($http){});创建服务

2、this.methodName() = function(){renturn ...}

3、controller中的function引用自定义服务的serviceName

4、使用serviceName.methodName().success(){}调用自定义服务

<script type="text/javascript">var app = angular.module("myModule",[]);//自定义服务,把与后端进行交互的地址进行抽取到自定义服务内,controller再引用服务//生成service服务,param1:服务名称app.service("myService",function($http){this.findAll = function(){//返回与后端交互的地址return $http.get("../findAll.do");}});app.controller("myController",function($scope,$http, myService){//查询品牌列表$scope.findAll = function(){//调用FindAllService服务,调用该服务的findAll方法获取地址myService.findAll().success(function(response) {$scope.list = response;});}
</script>

json数据，模拟从数据库返回转json的结果，必须严格书写为json数据结构，所有key必须为字符串类型

[{"name":"工员1","job":"UI","salary":7000},{"name":"工员2","job":"前端工程师","salary":8000},{"name":"工员3","job":"后端工程师","salary":9000},{"name":"工员4","job":"运维","salary":10000}
]

4、如何使用AngularJS将后端获取的json数据进行分页(仅展示前端处理)

0、导入pagination.js和pagination.css
资源包在博文开始处云盘已经提供

1、在brand.html引入分页组件

<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

查看angularjs/pagination.js中源码发现：
//pagination.js文件内部创建了名为pagination的模块，则需要在自己构建的app模块中引用，执行步骤2
angular.module('pagination', []).directive(...)

2、构建app模块时引入pagination模块
var app = angular.module("brandModule",['pagination']);        //定义brandModule模块，务必引入红色部分pagination。
需要被分页的html
中间是一些<table>标签
<table>
.....
</table>
<tm-pagination conf="paginationConf"></tm-pagination>

重点来了......

3、页面的<table>表格下放置分页组件

<tm-pagination conf="paginationConf"></tm-pagination>
4、JS代码————在brandController中添加如下代码
<script type="text/javascript">
//分页控件配置 var app = angular.module("brandModule",['pagination']);app.controller("brandController",function($scope,$http){//从这开始复制//1、分页控件配置 $scope.paginationConf = {currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions: [10, 20, 30, 40, 50],onChange: function(){$scope.reloadList();}}; //2、重新加载列表 数据$scope.reloadList=function(){//切换页码  $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);}//3、分页显示逻辑//page为当前页,应和Controller层接收的属性名相同//size为每页显示条数,应和Controller层接收的属性名相同$scope.findPage=function(page,size){$http.get('../brand/findPage.do?page='+page +'&size='+size).success(function(response){//显示当前页数据 ，此处自行修改，因为我返回的json数据中list集合放在rows:中	$scope.array=response.rows;//此处自行修改，因为我返回的json数据中总数据量放在total:中	$scope.paginationConf.totalItems=response.total;//更新总记录数 }		);				    }//到这复制结束});
</script>
5、最后在<body>标签中声明模块ng-app和ng-controller

<body ng-app="brandModule" ng-controller="brandController">

..........

</body>

6、最后有一些备注
备注：
在页面的body元素上去掉ng-init指令的调用
paginationConf 变量各属性的意义：
currentPage：当前页码
totalItems:总条数
itemsPerPage: 每页显示条数
perPageOptions：分页选项
onChange：更改页面时触发事件

5、如何使用AngularJS进行表单提交添加操作

1、书写新增方法
<script type="text/javascript">var app = angular.module("brandModule",['pagination']);app.controller("brandController",function($scope,$http){//新增商品方法$scope.add=function(){$http.post('../brand/add.do',$scope.vo).success(function(response){if(response.success){//若添加成功则重新加载分页$scope.reloadList();}else{//添加失败弹框提示alert(response.message);}});}});
</script>
2、申明模块名和控制器
<body ng-app="brandModule" ng-controller="brandController">
3、绑定变量
<input  ng-model = "vo.name">  
<input  ng-model = "vo.password">
vo为步骤一参数申明处的$scope.vo，而后面的属性名name、password需要同实体类对应

4、修改提交按钮，绑定单击事件指令ng-click
<button ng-click="add()">保存</button>
add()为步骤1新增方法名称

6、如何使用AngularJS通过勾选表单checkbox进行批量删除操作

<script type="text/javascript">var app = angular.module("brandModule",['pagination']);app.controller("brandController",function($scope,$http){//1、定义全局变量Ids数组,表示用户勾选的集合$scope.selectIds = [];//2、定义添加id进入Ids数组方法//用户勾选删除复选框的checkbox Id集合//传入id,往Ids数组内添加id值(push方法)$scope.addSelection = function($event,id){//$event.target为获得checkbox对象,checked为true则选中if($event.target.checked){$scope.selectIds.push(id);}else{//查找值所在位置var index = $scope.selectIds.indexOf(id);//移除没有选择的元素,移除的索引index,移除1个元素$scope.selectIds.splice(index,1);}}//获取勾选的集合,传递到后端进行批量删除(注意:delete是关键字,这里用del)$scope.del = function(){$http.get('../brand/delete.do?ids='+$scope.selectIds).success(function(response){if(response.success){//删除成功,刷新页面$scope.reloadList();}else{//删除失败,提示信息alert(response.message);}}	);}});
</script>//3、checkbox中使用ng-click动态调用addSelection方法将勾选id传入
<tbody><tr ng-repeat ="entity in array"><!-- $event为源 --><td><input  type="checkbox" ng-click="addSelection($event,entity.id)"></td>			                              <td>{{entity.id}}</td><td>{{entity.name}}</td>									     <td>{{entity.type}}</td>		                                 </tr>
</tbody>//4、测试——————在页面任意位置添加
{{selectIds}}//5、为删除按钮添加ng-click指令
<button type="button" title="删除" ng-click="del()">

7、控制器的继承(伪继承——通过传递$scope实现)

/*控制器继承,在子控制器体内部书写,则继承了来自baseController的所有属性与方法,这种伪继承实际是通过传递%scope实现*///子控制器myController    注意:务必传入$scope,$controller!!!!!app.controller("myController",function($scope,myService,$controller){//控制器继承$controller('baseController',{$scope,$scope});//..............//..............//..............省略后续代码});//父控制器baseController,对通用js的封装,如分页等...     注意:务必传入$scope!!!!!app.controller('baseController',function($scope){//..............//..............//..............省略后续代码});

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angularjs(angular1)项目初体验
angularjs(angular1)项目初体验我刚开始接手一个微信公众号的项目，技术栈还是angular1，之前只用过2以上版本，最近用angular1发现还是有一点坑点。坑点一：ng-if中的ng-model值无效的问题 ng-if指令也会创建一个子级作用域因此&…...
2024/4/21 4:40:21
Angular入门：AngularJS
前言：目前正在准备加入ITOO项目组，所以学习一下Angular，首先先从了解AngularJS开始，下面总结一下有关AngularJS的知识点。什么是 AngularJS？ AngularJS 使得开发现代的单一页面应用程序（SPAs：Si…...
2024/4/24 10:30:19
angularjs 滚动条 angular-scroll插件
超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 使用缘由： 在进行网页开发时，导航栏想做…...
2024/4/21 4:40:18
AngularJS $destroy
$destroy用于监控当前页面是否关闭； 在Controller中监听$destory事件，这个事件会在页面发生跳转的时候触发。 $scope.$on("$destroy", function() {// 关闭页面时要做的事 })...
2024/4/21 4:40:17
使用fileinput与angularjs上传文件
目录目录文件准备form表单的代码angular的代码服务器端代码angular自启动函数写法文件准备首先必要的是引入fileinput的相关js和cs文件 <link type"text/css" rel"stylesheet" href"css/fileinput.css" /> <script src" js…...
2024/4/20 15:50:25
angularjs2学习心得之使用第三方JS库
使用angularjs2的时候，我们难免会用到第三方的js库，而和其他框架不一样的是，angular是通过typings,类似于maven仓库一样，我的理解是这样，地址是：http://microsoft.github.io/TypeSearch/，在里面…...
2024/4/20 13:58:44
IntelliJ IDEA安装AngularJS插件
Settings→Plugins→Install JetBrains plugins...输入an后选择AngularJS，然后点击Install进行安装按照提示重启IDEA下图为插件管理窗口，点击下方的Install JetBrains plugins...按钮输入an，即可在列表中找到AngularJS，然后点击右…...
2024/4/21 4:40:15
安装angularjs及idea导入angularjs项目
在已安装好npm，cnpm情况下使用先安装angular/cli //安装执行命令 cnpm i -g angular/cli --save-devcmd控制台输入选择你要创建的路径 C:\Users\xyang>cd G:\project\angularuiC:\Users\xyang>g:G:\project\angularui>创建angular项目 ng new agrau…...
2024/4/20 16:11:37
angularJS中的父子作用域和兄弟作用域，以及父子，兄弟controller通信机制
angularJS中非常重要的概念之一就是作用域，不同的作用域之间是相互隔离的，通过常规手段是无法互相访问变量及方法的本次我们着重讲一下父子作用域和兄弟作用域 1.父子作用域 <div ng-controller"ParentCtrl"><div ng-controller&quo…...
2024/4/20 19:45:15
从 AngularJS 模块定义说起
最近的项目使用了AngularJS作为主要前端框架，在使用模块时遇到一些有意思的问题，本文围绕模块的定义与加载的话题，小结一下我的体会。首先，定义一个Angular模块（module）很简单，直接使用angula…...
2024/4/20 19:45:15
angularJS常用标签
1、ng-app：告诉Angular他应该管理页面的那一部分，可以放在html元素上也可以放在div等标签上例如：<html ng-app"problem"> 2、ng-controller:控制器，通过在body标签上包含一个控制器，则可以管理bod…...
2024/4/20 19:45:13
AngularJS实现钟表效果超简单
网上搜了一下angularjs实现钟表效果， 然后跳出一大堆， 点开一看， 内容多的不想看， 再点开其他的， 我去，复制粘贴一个人的至于吗？ 我将angularjs教程中的一个例子甩到你们脸上&#xff0…...
2024/4/21 4:40:13
ThoughtWorks 2017技术雷达
前言： ThoughtWorks人酷爱技术。我们对技术进行构建、研究、测试、开源、记述，并始终致力于对其进行改进-以求造福大众。我们的使命是支持卓越软件并掀起IT革命。我们创建并分享ThoughtWorks技术雷达就是为了支持这一使命。由 ThoughtWorks中一群资深…...
2024/4/20 12:58:09
使用Create-React-App和.NET Core 3.0构建React客户端（全球天气）-第1部分
介绍 (Introduction) I’ve introduced how to build Angular App with .NET Core in Global Weather – Angular 7 App With .NET Core series (Part 1, Part 2 and Part 3). Now let’s talk about another popular technology React. React, Angular have become incredibly…...
2024/4/20 15:12:16
怒肝最新保姆级前端学习路线，速成贴心全面！
这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。大家好，我是鱼皮，肝了几天终于完成了这份保姆级前端学习路线。 💂 💻 👴🏽 先放一张图&#xff1a…...
2024/4/21 4:40:10
BaaS后端即服务 - 分析篇
在本文中我们将主要研究目前主要的BaaS平台的功能，以及Google，Facebook，Apple等互联网巨头在BaaS领域的动作。同时我们也会关注国内一些主流BaaS平台的发展以及国内互联网巨头如百度，华为等在BaaS领域的投入发展。 1. 国外主流的…...
2024/4/21 4:40:09
前端学习路线（详细）
前端学习路线！ 这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。特点一份全面的前端知识点大梳理和汇总分阶段学习，每个阶段给出学习目标使用符号对知识点的重要程度做了区分，按需学习…...
2024/4/21 4:40:08
MEAN.js和MEAN.io之间的区别
本文翻译自：Difference between MEAN.js and MEAN.ioI wanted to use the MEAN JavaScript Stack, but I noticed that there are two different stacks with either their own website and installation methods: mean.js and mean.io. 我想使用MEAN JavaScript St…...
2024/4/21 4:40:07
Serverless 掀起新的前端技术变革
本文为转发文章：作者阿里巴巴前端蒋航最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless，其实早已和前端有了颇深渊源，并且将掀起新的前端技术变革。本文主要就根据个人理解和总结，从前端开发模式的演…...
2024/4/21 4:40:06
刷新:重新发现商业与未来_NET：为您的未来做好准备
刷新:重新发现商业与未来.NET生态系统将是惊人的一年： (It’s going to be an amazing year for the .NET ecosystem:) .NET Framework is “complete”. It’s not likely that there will be a new version of the framework. 4.8 will be the last one after 18 …...
2024/4/21 4:40:05