前端 初识angularJS的基本概念

时间  2019-11-30
标签 前端 angularjs 基本概念 栏目 AngularJS 繁體版
原文   原文链接
 
今天在这里分享分享我我的学习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的特色特性：

一、MVC架构模式，然而，要说angularJS它是MVC模式，倒不如说它更像是MVVM模式，由于它采用了MVC的基本思想，而又不彻底是MVC。让咱们来看看MVC的概念：
M: model 模型
一、存储数据
V: view 视图
一、展示数据给用户
二、与用户交互
C: Controller 控制器 调度者
一、请求数据（ajax操做）
二、将数据存储到model中
三、将模型中的数据交给视图显示（经过$scope对象）
四、监视模型的变化，作出相应的动做
二、angular了里面还有一个就是双向数据绑定，经过双向数据绑定来消除DOM操做，在任什么时候候当模型改变时视图都会获得更新。
三、模块化与依赖注入，也就是代码模块化，每一个模块的代码都独立拥有本身的做用域scope，模型model，控制器controller，而后每一个模块之间能够相互依赖，这样大大的提升了代码的重用性和灵活性，它还有一个比较好的模式是，它能够把一些操做放到客户端去操做，服务端只提供数据来源，和其余客户端不能完成的操做，这样尽量的减小服务端的负担。

实践：

接下来的话就让咱们用实践去一步一步的去学习angular，我我的以为写一些demo练习，比理解理论概念要学习的快一些，毕竟实践是检验真理的惟一标准。经过一些小demo，让咱们更好的理解angularJS。在此，我申明一下，我写的博客并非教程，只是在学习过程当中的知识点总结，可能在其中有不少不足的地方，毕竟个人知识和理解能力也是有限的，但愿你们能把不足指正出来，咱们一块儿共同进步和学习。
在使用以前，咱们须要下载angularJS，而后把它引入到咱们的项目中：
官方下载地址： https://angularjs.org/
使用npm下载：打开命令窗口，输入命令npm install angular 直接下载到咱们的项目中去。
首先让咱们先来看看angularJS的基本写法：
先看代码，代码以下：
复制代码 
<!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文件。
一、定义一个模块，第一个参数appModule是模块的名字，第二个参数是个数组，数组中的值咱们能够先不填，它里面的值是当前模块须要依赖的模块，后续再说详细的做用。
二、给这个模块中添加一个控制器，第一个参数是控制器的名称，第二个参数也是一个数组，数组中的$scope是咱们注入的做用域，这个做用域只做用于当前这个控制器，后面写的是一个方法，方法中要以参数的形式写出咱们注入的这个做用域（切记，必需要这样写，其中还有个坑的说出来，由于我就跳进去了，之后当咱们要注入东西的时候，先后的顺序不能变，必定要一一对应）。
三、如今咱们把模块和模块都定义出来了，那咱们要怎么去和视图中的HTML创建联系呢，你们注意看，我在html标签中写了ng-app这个指令，这个就是引入模块的，也就是说我把我定义出来的appModule的模块放到了HTML中，至关于这整个HTML页面我把它当作了是一个模块，用我定义出来的模块去管理整个HTML界面，在以后，当前模块能够复用到其余的模块中去，只须要依赖就能够。而后在整个模块中，我把控制器写到了body标签中，用ng-controller来引入控制器，这时候，控制器就至关因而在控制整个body界面，去实现咱们想要达到的效果。在这里我要多啰嗦一点，一个模块中，能够有多个控制器，用多个控制器去控制不一样的区域，实现不一样的功能，

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

复制代码 
<!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>
复制代码

 

以上代码就能够看到，我在整个模块中定义了三个控制器，这个控制器分别管辖着界面中的三个div，而这三个div的独立分开的，每个控制器值控制着本身的区域，控制不到别人的区域，互不干扰，这样就把一个一个功能分离开来，这样有很好的一个好处就是功能的复用性和灵活性！
以上就是angularJS的基本写法，接下来，用demo来看看angularJS的强大之处

demo1：计数器

界面效果：如图所示，实现功能：我在输入框中输入任意数字，当我点击增长按钮的时候，数字会依次往上加1。

 

咱们先来看看传统JS是怎么实现的:
复制代码 
<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的实现方法：
复制代码 
<!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>
复制代码
你们对比一下，代码量显著减小，实现的功能是同样的。可是，你们不难发现，angular的语法确实有些不同，咱们来详细分析一下上面的写法，在第一个input输入框上面，用ng-model把输入框的值记录了下来，而后在第二个按钮中，给按钮绑定了一个点击事件，在绑定事件中，咱们写的是value=value+1，这样的意思是告诉angular把上面记录下来的value值进行相应的运算，而后再把运算的结果赋值给当前输入框的值。你们能够想象一下，angular里面是否是帮咱们作不少的工做，在这里咱们并无作DOM操做，都是angular帮咱们默默的去作了，这样实现了让开发者更多的去作业务逻辑。

demo2：文字同步功能

界面效果：若是所示；实现效果：当我在输入框中输入文字的时候，在文本框下面同步我输入的内容。
你们能够想象一下，若是用原生的JS来实现这样的效果，是否是要写比较多的js代码，在这里我就不用原生的写法写了，就用angular来写：
复制代码 
<!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>
复制代码
咱们来分析一下，当前在DemoController的控制器下，我把input的value值记录下来了，而后再把记录下来的值赋给h1标签中，你们能够看到这里使用了两个大括号，这样写的意思是告诉angular，我这里是你要去解析的东西。
经过两个demo能够看出来，angularJS的强大之处和他的基本的优势和特色。
咱们来总结一下它的基本特色：
  • angular最大程度的减小了页面上的DOM操做，解放了传统js中频繁的DOM操做
  • 让咱们更加专一于业务逻辑的代码
  • 代码结构更加合理
  • 维护的成本更低
以上是我今天分享的angular的基本概念，对于概念的解释，其中确定有不足的地方，还请各位博友和大神们能指正出来，咱们你们一块儿共同窗习！后续还会持续分享！谢谢你们！
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程