angular学习整理（一）

柔光的暖阳◎ 2022-07-13 00:23 161阅读 0赞

#  #

# 最近在学习angular做个整理，因为没有大的项目经验做支撑，所以可能有很多问题没有遇到，理解的没有那么深刻，所以如果有什么问题欢迎大家提出~~~闲话少说，让我们一起来学习angular吧      1、angular简介：      angular是一个框架，不是类库，框架能提供一整套的类似MVC架构来设计实现web应用，angular（ng）用来设计web  app应用的结构框架。官网对angular的描述是:HTML enhanced for web apps。HTML enhanced指的是借助标签或者指令完成一部分页面逻辑。方法是通过自定义指令或者标签、自定义属性等（如常见的 <div ng-model='mytest'>）ng-model就是指令，而这个是以前的HTML标签没有的。angular适合场景是动态web应用，传统的web系统是用户在界面做了操作后会发生url跳转做处理（AJAX等除外），而动态web应用能为用户提供丰富的操作，用户在前台做更新视图不会发生url跳转，angular声明它更适用于开发CURD（创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete））应用，即数据操作比较多，而不是游戏或者图像处理类应用。   前面提到angular是框架，但是官网上说的是angular采用的是MVC的思想，但不完全是MVC。官网给的解释是MVM    #

**2、开始演练**

a.js

function testC($scope){
    $scope.name='zhangsan';
    }

html

示例简介：

anguar的使用很简单，使用angular.module('MyApp',\[\])来生成模块，注意这指的是angular作用域只是在Myapp中，后面的\[\]指的是所依赖的模块，我们在使用时候，只需在所用之地引入我们的这个模块即可，

然后我们发现还有一个角色叫做conotroller，熟悉mvc模型的应该对这个不陌生吧。对，这个就是我们所说的控制器，我们的业务分析基本都在controller中实现，每个module有时候不止一个controller,通常我们为了避免controller过于臃肿，会将conotroller分离开

举个例子：

view:

controller:

angular.module("app", []).controller("parentCtr",
      function ($scope) {
          $scope.$on("Ctr1NameChange",
       
          function (event, msg) {
              console.log("parent", msg);
              $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
          });
      }).controller("childCtr1", function ($scope) {
         $scope.change = function (name) {
             console.log("childCtr1", name);
             $scope.$emit("Ctr1NameChange", name);
         };
    }).controller("childCtr2", function ($scope) {
         $scope.$on("Ctr1NameChangeFromParrent",
      
         function (event, msg) {
             console.log("childCtr2", msg);
             $scope.ctr1Name = msg;
        });
     });

这段代码中就不止一个controller，实际上这段代码是分为父controller和子controller

对这段代码做个简单解释，看不懂的童鞋们不用着急，可以忽略掉这个解释，我的目的是想说明下很多情况不止一个controller。

angularjs为在scope中为我们提供了冒泡机制，$broadcast会把时间广播给所有的子controller，而$emit则会将事件冒泡传递给父controller，$on则是angualarjs的事件注册函数，这个就为不同的controller之间的通信提供了可能，而上文这个例子就是为了说明这种通信机制的，这里的childCtrl1的name改变会以冒泡传递给父controller，而父controller会对事件包装在广播给所有的子controller，而childCtr2则注册了change事件，并改变自己，注意父controller在广播时候一定要改变事件name

言归正传，我们发现了另一个非常高频的词，就是$scope，这个就是我们所说的作用域，上下文，每个controller都会有自己的作用域，

ng-model就是所谓的模型，而HTML指的是模板，在我们的HTML中，我们可以加入任何指令来增强它的功能，这些指令可以让你把模板和数据联系起来。在ng之前，我们页面数据的操作往往是先操作DOM元素后然后获取其value值，但是在ng中我们只需用ng的指令即可绑定模板和数据 如上文的示例中，我们并没有获取input这个DOM元素，只是将input这个DOM绑定了name这个model值，然后当input值发生变化时model获取后将在其他地方用到了model模型的地方显示出来。

结果如下：

![Center][]

当我们在输入框中输入任何值都会立刻先显示出来

![Center 1][]

是不是觉得很神奇？

不需要再用ajax来写，只需简单的借用angular就可以实现即时变化，其实它的神奇不止如此，我们接着看些例子

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
        <script type="text/javascript" src='E:/jstest/a.js'></script>
            <script type="text/javascript">
    		function testC($scope){
    
    
    $scope.userlist=[];
    $scope.addUser=function(){
    var o={
       name:'',
       tel:''
       
    };
    
    $scope.userlist.push(o);
    
    };
    $scope.del=function(index){
    $scope.userlist.splice(index,1);
    
    };
    }
    var app=angular.module('MyApp',[]);
    app.controller('testC',testC);
    </script>
    <body>
    <div ng-controller='testC'>
    <h1>adduser</h1>
    <button ng-click='addUser();'>addbutton</button>
    <div>
    <ul>
    <li ng-repeat='o in userlist'>
    <span>
    name:{
        {o.name}}<br/>
    tel:{
        {o.tel}}<br/>
    
    <a href='javascript:void(0);'ng-click='del($index)'>delbutton</a></span>
    </li>
    </ul>
    </div>
    please input your message:
    <ul>
    <li ng-repeat='o in userlist'>
    <span>
    name:<input type='text' ng-model='o.name'>
    tel:<input type='text' ng-model='o.tel'>
    </span>
    </li>
    </ul>
    </div>
    </body>
    </html>

结果如下：

![Center 2][]

每次点击addbutton时候，页面的上半部分用来展示预览部分，下面是新建部分，中有个ng-repeat的作用是循环，其中的add按钮可以用来添加选项，每次用户输入的信息将存储在O中，然后o会被push到userlist中，上面的预览部分将从userlist展示出来。用到了ng-model与内容做了双向绑定。注意$index是公共变量。

这样进行了绑定后，模板中的列表将与数据模型的userlist保持同步，所以我们无需自己再监听keyup然后自己去操纵DOM元素从而获取信息然后再在展示区域获取DOM显示数据。  
**.我们现在针对上述几个例子学习下angular中最重要的几个概念**

**3.controller**

前面已经提到了这个名词，这里的controller其实与我们之前mvc的controller的功能非常类似，但是它同时还会实现一些与服务端不同功能，在angular中，controller自身并不会处理request，除非它是用来处理路由route的（很多人把这种方式叫做创建route  controller--路由控制器）。

controller应该是用来把service、依赖关系以及其它对象串联在一起，然后通过scope把它们关联到view上

**4、service(服务)**

这个名词对于大家如果做过后端的人来说应该也不陌生，service就是单例对象在angularjs中的一个别名，这些单例对象会被经常传来传去，保证你每次访问的都是同一个实例，这一点和工厂模式不同，基于这点，单例对象可以让我们实现一些相当酷的功能，它可以让很多controller和directive访问内部的数据。

看到上面这段文字中一个非常关键的名词叫做单例，这也就告诉我们什么时候用servicen呢，那就是当我们需要在不同的域中共享数据的时候。举个例子：

var module=angular.module('firstapp',\[\]);

好了现在我们来创建一个新的service,假如我们这个module是用来管理personlist的，我们现在要创建一个service

module.service('Person',['$rootScope',function($rootScope){
    var serivice={
    personlist;[
    {name:'zhangsan',age:12}.
    {name:'lisi',age:19}
    ],
    addPerson:function(person){
    service.personlist.push(person);
    $rootScope.$broadcast('personlist.update');
    
    }
    }
    return service
    }]);

好了，我们这里在管理一个personlist数组，同时还带有一个增加人物的方法，在需要的时候增加人物，addPerson还会在application上广播一个事件，告诉所有正在使用我们service的人，数组已经更新从而让它们自己也做一些刷新，现在我们要做的就是将这个service传递给各种controller、directive、filter或者其他任何需要它的东西，然后它们就可以访问service中的这些方法和属性了。

var ctrl=['$scope','Person',function(scope,Person){
    scope.$on('personlist.update',function(event){
    scope.personlist=Person.personlist;
    scope.$apply();//这个还不是太明白等后面再研究下
    
    });
    scope.personlist=Person.personlist;
    }];
    module.controller('personlist',ctrl);

我们上面做的非常简单，就是为我们的module创建了一个新的controller，在创建的时候吧$scope provider和我们自己的Person service传递给了它，简单点说就是把前面创建的Person service中的personlist数组赋给了controller内部的scope对象。

这样的好处是什么呢？我们这样做可以为我们节约时间，如果其他地方也要处理这些人类列表信息的话，通常做法是通过scope来维护数据是非常不友好的一种方式，由于其他controller、directive、model的影响，scope很荣誉就会奔溃或者变脏。通过一种集中的额途径即service我们可以管理所有的人，然后通过某种方式来请求修改它，这样不仅仅更加清晰，同时当应用的体积不断增大的时候也容易管理，最后还可以让你的代码保持模块化，一旦你在其他项目中需要用到这个service，你没必要再scope、controller、filter等东西里面到处去查找相关代码，因为所有东西都在service里面。

[Center]: /images/20220713/28e4fb8b8dd3415c8c36c6bc7ff2fddb.png
[Center 1]: /images/20220713/991a4d01ee6548e293d7e2dc336132bb.png
[Center 2]: /images/20220713/2ea62fd2402e4a92b7948e20c390f14f.png