zoukankan      html  css  js  c++  java

  • 初识angularJS的基本概念

    原文：http://www.cnblogs.com/zhongweizhu/p/6009171.html

    什么是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的基本写法：
    先看代码，代码如下：
    复制代码
    <!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操作
    • 让我们更加专注于业务逻辑的代码
    • 代码结构更加合理
    • 维护的成本更低
  • 相关阅读:
    Android编译选项eng、user、userdebug的区别
    Linux 内核编码规范
    PLM之EVT、DVT、PVT、MP
    fastboot刷机的一般方法
    Android手机拨号测试项
    使用Genymotion安装APK出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE的解决办法
    三星手机列表拖动时出现诡异背景色的问题
    分享android ADT百度云盘下载地址
    关于互联网思维
    分享Nginx在Windows下的管理命令（bat文件）
  • 原文地址：https://www.cnblogs.com/shihaiming/p/6011030.html
Copyright © 2011-2022 走看看