前端初识angularJS的基本概念

DEMO1演示地址：http://webenh.chinacloudsites.cn/default/demo1

今天在这里分享分享我个人学习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

效果地址：https://blackmanbazhu.github.io/doubanApp/#/in_theaters

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的基本写法：

先看代码，代码如下：

<!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文件。

1、定义一个模块，第一个参数appModule是模块的名字，第二个参数是个数组，数组中的值我们可以先不填，它里面的值是当前模块需要依赖的模块，后续再说详细的作用。

2、给这个模块中添加一个控制器，第一个参数是控制器的名称，第二个参数也是一个数组，数组中的$scope是我们注入的作用域，这个作用域只作用于当前这个控制器，后面写的是一个方法，方法中要以参数的形式写出我们注入的这个作用域（切记，必须要这样写，其中还有个坑的说出来，因为我就跳进去了，以后当我们要注入东西的时候，前后的顺序不能变，一定要一一对应）。

3、现在我们把模块和模块都定义出来了，那我们要怎么去和视图中的HTML建立联系呢，大家注意看，我在html标签中写了ng-app这个指令，这个就是引入模块的，也就是说我把我定义出来的appModule的模块放到了HTML中，相当于这整个HTML页面我把它当做了是一个模块，用我定义出来的模块去管理整个HTML界面，在之后，当前模块可以复用到其他的模块中去，只需要依赖就可以。然后在整个模块中，我把控制器写到了body标签中，用ng-controller来引入控制器，这时候，控制器就相当于是在控制整个body界面，去实现我们想要达到的效果。在这里我要多啰嗦一点，一个模块中，可以有多个控制器，用多个控制器去控制不同的区域，实现不同的功能，

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

<!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的基本概念，对于概念的解释，其中肯定有不足的地方，还请各位博友和大神们能指正出来，我们大家一起共同学习！后续还会持续分享！谢谢大家！

标签: angularJS, JavaScript