AngularJS的使用总结

原创于 2020-03-31 14:03:59 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

AngularJS是一款增强HTML的前端JavaScript框架，通过指令扩展HTML并实现数据双向绑定，提升开发效率。四大特性包括MVC模式、双向数据绑定、依赖注入及模块化设计，支持表达式、控制器、内置服务等，实现前后端JSON数据交互。

1  AngularJS是一个前端JavaScript框架。它可通过 <script> 标签添加到HTML页面。
         通过指令扩展了HTML，且通过表达式绑定数据到 HTML。
         提高开发效率和运行速度
四大特征：
      1 MVC模式：解耦和提高代码复用性
            Model:模型数据, 其实就是angular变量($scope.XX);
            View: 视图,模型数据的呈现, Html+Directive(指令)
            Controller:操作数据, 就是函数function,数据的增删改查;
      2 双向绑定：
            双向的数据绑定允许模型和视图之间的自动同步通过$scope
            Model的数据发生改变View就会随之改变
            当然View发生改变 Model也会改变
      3 依赖注入
         面向服务的设计，对于需要依赖使用的服务，只需注入即可使用

      4 模块化设计
         对象和函数都写在js下会污染全局空间把对象和函数定义在模块下运行效率会增高
         高内聚低耦合法则：
         1)官方提供的模块 ng、ngRoute、ngAnimate
         2)用户自定义的模块 angular.module('模块名',[])
2 运用AngularJS快速入门：前后都传递json格式数据
1 引入angular的包 angular.min.js
      <script type="text/javascript" src="plugins/angularjs/angular.min.js">
2 表达式:{{表达式}} 表达式中可以是变量或是运算式实时地输出变量或运算式。
         html页面直接    {{entity.id}}获取域中的值 $scope.entity.id=17
3 定义模块：模块下有控制器控制器下有$scope
            var app=angular.module('myApp',[]);//定义了一个名为myApp的模块变量是为了定义控制器使用
            []:用于在该模块下引入第三方的包如果没有要引的就不写
4 定义模块下控制器：
         控制器：对视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和处理。
                  对scope对象进行初始化
                  向scope对象添加方法/函数
            app.controller('控制器名',function($scope，$http){ //该$scope只在此控制器myController内有效
                     $scope.add=function(){
                           //$scope.z=parseInt($scope.x)+parseInt($scope.y);//可以把结果放在域中
                           return parseInt($scope.x)+parseInt($scope.y); //可以返回数据
                     }
               });

5 $scope：它与数据模型(Model)相绑定,同时也是表达式执行的上下文.$scope的作为范围只在某个控制器内
               有了$scope就在视图和控制器之间建立了一个通道,绑定函数或者变量。
               基于作用域：
               视图在修改数据时会立刻更新$scope,$scope发生改变时也会立刻重新渲染视图.
               1 $scope的绑定:
                     1 对象(json) $scope.user=data
                           不能直接操作对象方法，必须做初始化操作可以通过ng-model双向绑定
                           注意：除了ng-model会自动初始化创建对象，其他情况都需要初始化才能操作对象
                     2 变量  $scope.y=1; 可以直接赋值操作可以通过ng-model双向绑定
                     3 方法 $scope.add=(){}

            2 view获取域中的值和调用$scope的方法:
                     1{{user.name}}
                     2 {{y}}
            3 调用定义的方法：
                     {{add()}}:表达式调用函数并且输出返回值
                     $scope.add() ：调用函数
                     <body ng-init="findall()">  初始化页面时调用
                     <button ng-click="findall()"> 绑定事件调用点击调用
6 内置服务：向后台服务器发送get/post请求获取数据请求的数据页面必须在服务器上部署并且服务器已经启动
            1 发送get请求：
            //使用模块变量
            var app=angular.module("模块名",[])
            app.controller("myController",function($scope,$http){
            $scope.findall=function(){ //定义了$scope的一个函数findall
                  $http.get(url).success(function(data){ //success是成功后 data是返回值
                     $scope.list=data;
                     });
                  }
            })
            2 发送post请求
            app.controller("myController",function($scope,$http){
                  $http.post(url,请求参数).success(function(data){
                     $scope.list=data;
                  })
            })

7指令：这些指令都是加在html标签上使用的
1 ng-app 指令作用是告诉子元素以下的指令是归angularJs管理, angularJs会识别的
         指令的值指定使用哪个模块加在body标签上的
         <body ng-app="模块名不是模块变量" ng-controller="myController" ng-init="z='10'">
            1. 一个页面会自动加载第一个ng-app，后边的没用
            4. 一个ng-app(模块)可以有多个controller
            5. $scope的范围局限于每一个controller中

2 ng-model 指令用于绑定页面数据,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。
            它里面的值自动双向绑定到$scope域中
      <input ng-model="name" > //给$scope.name赋值

3 ng-init 初始化指令可以初始化变量值或加载函数多个时用;分隔
      <body ng-app="myApp" ng-controller="myController" ng-init="z='10';add()">
4 ng-controller  用于指定使用的控制器是哪个。
5 ng-click 是最常用的单击事件指令，绑定在方法上在点击时触发控制器的某个方法
            <button ng-click="add()">计算</button>
            ng-bind 指令把应用程序数据绑定到 HTML 视图。
6 ng-repeat 用于循环数组变量。这个数组必须是json对象数组集合
            普通数值数组：
                  <tr ng-repeat="i in list"> //数组数据在$scope.list中遍历list赋值给i
                     <td>{{i}}</td> //显示的td是多行的
                  </tr>
            对象数组(json数据)：
                  <tr ng-repeat="entity in list">
                     <td>{{entity.name}}</td>
                     <td>{{entity.shuxue}}</td>
                     <td>{{entity.yuwen}}</td>
                  </tr>
7 ng-if:判断指令.
8 ng-options:select标签使用的指令.