今天在这里分享分享我个人学习angular的知识点总结。在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大。作为一个前端开发人员,我们要对新知识不断地学习,不断的充电,对待新知识不断地渴望,学习新技术是我们每一位程序员的必备功课,这样我们才不会被潮流淘汰掉。希望今后的日子里,能和各位博友和大神们在技术上共勉!

什么是angularJS?

它是一个用于设计动态web应用的结构框架,首先它是一个框架,不是像Query这样的什么类库,它与jQuery不同之处在于,前者致力于MVC代码解耦,采用的是model,controller以及view方式组织代码,而后者是给你提供了很多的APi函数。那么什么是动态web应用呢,官方的解释是扩展HTML添加动态特性,和传统的web系统不同的是,web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转,也就是我们所说的单页面应用程序 (Single Page Application),angular使得开发现代的单一页面应用程序变得更加容易,大家可以去看看网易音乐http://music.163.com/#,它其实就是一个单页面操作的。在这里我自己也写了一个页面,也是实现的是单页面的,托管到了Github上面了,大家有兴趣的话可以下载来看看:https://github.com/blackManbaZhu/doubanApp/tree/master

angularJS的特点特性:

1、MVC架构模式,然而,要说angularJS它是MVC模式,倒不如说它更像是MVVM模式,因为它采用了MVC的基本思想,而又不完全是MVC。让我们来看看MVC的概念:
M: model 模型
1、存储数据
V: view 视图
1、展现数据给用户
2、与用户交互
C: Controller 控制器 调度者
1、请求数据(ajax操作)
2、将数据存储到model中
3、将模型中的数据交给视图显示(通过$scope对象)
4、监视模型的变化,做出相应的动作
2、angular了里面还有一个就是双向数据绑定,通过双向数据绑定来消除DOM操作,在任何时候当模型改变时视图都会得到更新。
3、模块化与依赖注入,也就是代码模块化,每个模块的代码都独立拥有自己的作用域scope,模型model,控制器controller,然后每个模块之间可以相互依赖,这样大大的提高了代码的重用性和灵活性,它还有一个比较好的模式是,它可以把一些操作放到客户端去操作,服务端只提供数据来源,和其他客户端不能完成的操作,这样尽可能的减少服务端的负担。

实践:

接下来的话就让我们用实践去一步一步的去学习angular,我个人觉得写一些demo练习,比理解理论概念要学习的快一些,毕竟实践是检验真理的唯一标准。通过一些小demo,让我们更好的理解angularJS。在此,我申明一下,我写的博客并不是教程,只是在学习过程中的知识点总结,可能在其中有很多不足的地方,毕竟我的知识和理解能力也是有限的,希望大家能把不足指正出来,我们一起共同进步和学习。
在使用之前,我们需要下载angularJS,然后把它引入到我们的项目中:
官方下载地址:https://angularjs.org/
使用npm下载:打开命令窗口,输入命令npm install angular 直接下载到我们的项目中去。
首先让我们先来看看angularJS的基本写法:
先看代码,代码如下:
前端  初识angularJS的基本概念-LMLPHP
<!DOCTYPE html>
<html ng-app="appModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular.js"></script>
</head>
<body ng-controller="AppController">
<p></p>
</body> <script>
//定义一个模块
var app=angular.module('appModule',[]);
//在这个模块中添加一个控制器
app.controller('AppController',['$scope',function($scope){ }]);
</script>
</html>
前端  初识angularJS的基本概念-LMLPHP
我们来一点点的分析,首先是引入我们下载好的angularJS文件。
1、定义一个模块,第一个参数appModule是模块的名字,第二个参数是个数组,数组中的值我们可以先不填,它里面的值是当前模块需要依赖的模块,后续再说详细的作用。
2、给这个模块中添加一个控制器,第一个参数是控制器的名称,第二个参数也是一个数组,数组中的$scope是我们注入的作用域,这个作用域只作用于当前这个控制器,后面写的是一个方法,方法中要以参数的形式写出我们注入的这个作用域(切记,必须要这样写,其中还有个坑的说出来,因为我就跳进去了,以后当我们要注入东西的时候,前后的顺序不能变,一定要一一对应)。
3、现在我们把模块和模块都定义出来了,那我们要怎么去和视图中的HTML建立联系呢,大家注意看,我在html标签中写了ng-app这个指令,这个就是引入模块的,也就是说我把我定义出来的appModule的模块放到了HTML中,相当于这整个HTML页面我把它当做了是一个模块,用我定义出来的模块去管理整个HTML界面,在之后,当前模块可以复用到其他的模块中去,只需要依赖就可以。然后在整个模块中,我把控制器写到了body标签中,用ng-controller来引入控制器,这时候,控制器就相当于是在控制整个body界面,去实现我们想要达到的效果。在这里我要多啰嗦一点,一个模块中,可以有多个控制器,用多个控制器去控制不同的区域,实现不同的功能,

看看代码就知道是怎么实现的:

前端  初识angularJS的基本概念-LMLPHP
<!DOCTYPE html>
<html ng-app="appModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular.js"></script>
</head>
<body>
<div ng-controller="AppController1">
<p>控制器1</p>
</div>
<div ng-controller="AppController2">
<p>控制器2</p>
</div>
<div ng-controller="AppController3">
<p>控制器3</p>
</div>
</body> <script>
//定义一个模块
var app=angular.module('appModule',[]); app.controller('AppController1',['$scope',function($scope){ }]);
app.controller('AppController2',['$scope',function($scope){ }]);
app.controller('AppController3',['$scope',function($scope){ }]);
</script>
</html>
前端  初识angularJS的基本概念-LMLPHP
以上代码就可以看到,我在整个模块中定义了三个控制器,这个控制器分别管辖着界面中的三个div,而这三个div的独立分开的,每一个控制器值控制着自己的区域,控制不到别人的区域,互不干扰,这样就把一个一个功能分离开来,这样有很好的一个好处就是功能的复用性和灵活性!
以上就是angularJS的基本写法,接下来,用demo来看看angularJS的强大之处

demo1:计数器

界面效果:如图所示,实现功能:我在输入框中输入任意数字,当我点击增加按钮的时候,数字会依次往上加1。
前端  初识angularJS的基本概念-LMLPHP

我们先来看看传统JS是怎么实现的:
前端  初识angularJS的基本概念-LMLPHP
<body>
<input type="number" id="txt_value"/>
<input type="button" value="增加" id="btn_add"/>
</body>
<script>
(function () {
var txt=document.getElementById('txt_value');
var btn=document.getElementById("btn_add");
//监听按钮的点击事件 当我点击按钮的时候进行以下操作
btn.addEventListener('click',function(event){
var now=txt.value-0; //这是把字符串强制转换成数字的一种简单方法
now=now+1;
txt.value=now;
});
})();
</script>
</html>
前端  初识angularJS的基本概念-LMLPHP
我们再来看看angularJS的实现方法:
前端  初识angularJS的基本概念-LMLPHP
<!DOCTYPE html>
<html ng-app="appModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular.js"></script>
</head>
<body>
<div ng-controller="AppController">
<input type="number" ng-model="value"/>
<input type="button" value="增加" ng-click="value=value+1"/>
</div>
</body>
<script>
var app=angular.module('appModule',[]);
app.controller('AppController',['$scope',function($scope){
}])
</script>
</html>
前端  初识angularJS的基本概念-LMLPHP
大家对比一下,代码量显著减少,实现的功能是一样的。但是,大家不难发现,angular的语法确实有些不一样,我们来详细分析一下上面的写法,在第一个input输入框上面,用ng-model把输入框的值记录了下来,然后在第二个按钮中,给按钮绑定了一个点击事件,在绑定事件中,我们写的是value=value+1,这样的意思是告诉angular把上面记录下来的value值进行相应的运算,然后再把运算的结果赋值给当前输入框的值。大家可以想象一下,angular里面是不是帮我们做很多的工作,在这里我们并没有做DOM操作,都是angular帮我们默默的去做了,这样实现了让开发者更多的去做业务逻辑。

demo2:文字同步功能

界面效果:如果所示;实现效果:当我在输入框中输入文字的时候,在文本框下面同步我输入的内容。
前端  初识angularJS的基本概念-LMLPHP

大家可以想象一下,如果用原生的JS来实现这样的效果,是不是要写比较多的js代码,在这里我就不用原生的写法写了,就用angular来写:
前端  初识angularJS的基本概念-LMLPHP
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular.js"></script>
</head>
<body ng-controller="DemoController">
<div>
<input type="text" ng-model="value"/>
<h1>{{value}}</h1>
</div>
</body>
<script src="../angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('DemoController',function(){
})
</script>
</html>
前端  初识angularJS的基本概念-LMLPHP
我们来分析一下,当前在DemoController的控制器下,我把input的value值记录下来了,然后再把记录下来的值赋给h1标签中,大家可以看到这里使用了两个大括号,这样写的意思是告诉angular,我这里是你要去解析的东西。
通过两个demo可以看出来,angularJS的强大之处和他的基本的优点和特点。
我们来总结一下它的基本特点:
  • angular最大程度的减少了页面上的DOM操作,解放了传统js中频繁的DOM操作
  • 让我们更加专注于业务逻辑的代码
  • 代码结构更加合理
  • 维护的成本更低
以上是我今天分享的angular的基本概念,对于概念的解释,其中肯定有不足的地方,还请各位博友和大神们能指正出来,我们大家一起共同学习!后续还会持续分享!谢谢大家!
05-02 16:46