Angular基础知识

发布时间：2020-12-17 07:05:36 所属栏目：安全来源：网络整理

导读：=============================基本概念部分====================================== 1. AngularJS 是什么? * Google 开源的前端JS 结构化框架 * 动态展示页面数据, 并与用户进行交互 * AngularJS 特性( 优点) * 双向数据绑定 * 声明式依赖注入 * 解耦应用

=============================基本概念部分======================================
1. AngularJS是什么?
   * Google开源的 前端JS 结构化 框架
 * 动态展示页面数据,并与用户进行交互
 * AngularJS特性(优点)
 * 双向数据绑定
 * 声明式依赖注入
 * 解耦应用逻辑,数据模型和视图
 * 完善的页面指令
 * 定制表单验证
 * Ajax封装

2. **双向数据绑定**
   * View（视图）： 页面（标签、指令，表达式）
 * Model(模型) ：作用域对象（属性、方法）
 * 数据绑定： 数据从一个位置自动流向另一个位置
 * View-->Model
 * Model-->View
 * 单向数据绑定： 只支持一个方向
 * View-->Model ： ng-init
 * Model-->View : {{name}}
 * 双向数据绑定
 * Model<-->View : ng-model
 * angular是支持双向数据绑定的
3. **依赖注入**
 * 依赖的对象被别人(调用者)自动注入进入
 * 注入的方式;
 * 内部自建：不动态 
 * 全局变量：污染全局环境
 * 形参：这种最好
 * angualr就是通过声明式依赖注入， 来得到作用域对象 
 * 形参名不能随便定义（只是针对当前这种写法）
4. ** MVC模式**
 * **M: Model,即模型**,在angular中: 
 * 为scope
 * 储存数据的容器
 * 提供操作数据的方法
 * **V: View,即视图**,在angular中:
 * 为页面
 * 包括: html/css/directive/expression
 * 显示Model的数据
 * 将数据同步到Model
 * 与用户交互
 * **C: Controller,即控制器**,在angular中:
 * 为angular的Controller
 * 初始化Model数据
 * 为Model添加行为方法
5. **MVVM模式**
 * M: Model,即数据模型,在angular中:
 * 为scope中的各个数据对象
 * V: View,即视图,在angular中:
 * 为页面
 * VM: ViewModel,即视图模型,在angular中:
 * 为scope对象
 * 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层

6. **作用域**
   * 是一个js实例对象
 * 这个对象的属性、方法， 页面都可以直接引用、操作
 * ng-app指令： 内部创建一个根作用域（$rootScope）,是所有其它作用域的父对象
7. **控制器**
 * 也是一个对象，是我们View与Model之间的桥梁
 * 当我们使用了ng-controller指令， 内部就会创建控制器对象
 * 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
 * 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）,并自动注入构造函数中,在函数内部可以直接使用$scope对象。
8. **模块**
 * 也是一个对象
 * 创建模块对象： angular.module(‘模块名‘,[依赖的模块])
 * 通过模块添加控制器：
 * module.controller(‘MyController‘,function($scope){//操作$scope的语句})
 * angular的整体设计也是多模块的
 * 核心模块： angular.js
 * 扩展模块： angular-router.js,angular-message.js,angular-animate.js

=======================页面语法部分=======================

1. **表达式**
   * {{js表达式}}
 * 从作用域对象中读取对应的属性数据来显示数据
 * 不支持if/for/while
 * 支持三目表达式
2. **指令**
 * 什么指令 ： 自定义标签属性/标签
 * 常用的指令：
 * ng-app: 指定模块名，angular管理的区域
 * ng-model： 双向绑定，输入相关标签
 * ng-init： 初始化数据
 * ng-click： 调用作用域对象的方法（点击时）
 可以传$event
 * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
 * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
 * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
 * $index,$first,$last,$middle,$odd,$even
 * ng-show: 布尔类型， 如果为true才显示
 * ng-hide: 布尔类型， 如果为true就隐藏
 * ng-class: 动态引用定义的样式 {aClass:true,bClass:false}
 * ng-style: 动态引用通过js指定的样式对象 {color:‘red‘,background:‘blue‘}
 * ng-mouseenter: 鼠标移入监听,值为函数调用,可以传$event
 * ng-mouseleave: 鼠标移出监听,可以传$event
3. **过滤器**
 * 作用: 在显示数据时可以对数据进行格式化或过滤
 * 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
 * 多个----》格式化/过滤
 * 不会真正改变被操作数据
 * {{express | 过滤器名：补充说明}}
 * 常用过滤器：
 * currency 货币格式化(文本)
 * number数值格式化(文本)
 * date 将日期对象格式化(文本)
 * json: 将js对象格式化为json(文本)
 * lowercase : 将字符串格式化为全小写(文本)
 * uppercase : 将字符串格式化全大写(文本)

 * limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
 * limitTo : 3 limitTo : -3
 * orderBy : 根据指定作用域属性对数组进行排序
 * {{[2,1,4,3] | orderBy}} 升序
 * {{[2,3] | orderBy：‘-’}} 降序
 * {{[{id:2,price:3},{id:1,price:4}] | orderBy:‘id‘} id升序
 * {{[{id:2,price:4}] | orderBy:‘-price‘} price降序
 * filter : 从数组中过滤返回一个新数组
 * {{[{id:22,price:35},{id:23,price:45}] | filter:{id:‘3‘}} //根据id过滤
 * {{[{id:22,price:45}] | filter:{$:‘3‘}} //根据所有字段过滤

=================================数据绑定demo=================================

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>02_(双向)数据绑定</title>
</head>
<body ng-app ng-init="username=‘tom‘">

<!--
1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B,而且这个操作由框架来完成
2. 双向数据绑定: 数据可以从View(视图层)流向Model（模型）,也可以从Model流向View
  * 视图(View): 也就是我们的页面(主要是Angular指令和表达式)
  * 模型(Model) : 作用域对象(当前为$rootScope),它可以包含一些属性或方法
  * 当改变View中的数据,Model对象的对应属性也会随之改变:  ng-model指令  数据从View==>Model
  * 当Model域对象的属性发生改变时,页面对应数据随之更新:  {{}}表达式  数据从Model==>View
  * ng-model是双向数据绑定,而{{}}是单向数据绑定
3.ng-init  用来初始化当前作用域变量。
-->
<input type="text" ng-model="username">
<div>输入的名是:{{username}}</div>
<input type="text" ng-model="username">
<div>输入的名是:{{username}}</div>



<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>
</html>

=========================作用域和控制器demo==================================

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app>
<!--
1. 作用域对象     :
  * 一个js实例对象,ng-app指令默认会创建一个根作用域对象($rootScope)
  * 它的属性和方法与页面中的指令或表达式是关联的
2. 控制器:
  * 用来控制AngularJS应用数据的 实例对象
  * ng-controller : 指定控制器构造函数,Angular会自动new此函数创建控制器对象
  * 同时Angular还有创建一个新的域对象$scope,它是$rootScope的子对象
  * 在控制器函数中声明$scope形参,Angular会自动将$scope传入
-->
<div ng-controller="MyController">
  <input type="text" ng-model="firstName">
  <input type="text" ng-model="lastName">
  <div>firstName:{{firstName + ‘-‘ + lastName}}</div>
  <div>lastName:{{getName()}}</div>
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  function MyController($scope) { // 形参必须是$scope
      console.log(this instanceof MyController);
      $scope.firstName = ‘tom‘;
      $scope.lastName = ‘jerry‘;
      $scope.getName = function () {
          return $scope.firstName + ‘ ‘ + this.lastName;
      }
  }
</script>
</body>
</html>

=============================依赖注入demo==================================

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
<!--
    * 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
    * 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
    * angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
      ！！！形参必须是特定的名称,否则Angular无法注入抛异常

    * 回调函数的event的就是依赖对象
    * 回调函数有形参就是依赖注入
-->
<button id="btn">hello world</button>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  window.onload = function (ev) {
      document.getElementById("btn").onclick = function (ev2) {
          alert(ev2.clientX);
      }
  }
</script>

<script type="text/javascript">

</script>
</body>
</html>

=============================angularJs常用指令===================================

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<!--
表达式:
{{}} (表达式) : 显示数据,从作用域对象的指定属性名上取

1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，

2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

3、区别：语句用封号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。
  js引擎在解析的时候会自动的加上封号

4、特例：if语句，就不用加封号  可也是完整的语句。

指令:
1. Angular指令
    * Angular为HTML页面扩展的: 自定义标签属性或标签
    * 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
  * ng-app: 指定模块名，告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope根作用域对象
  * ng-model： 双向绑定，输入相关标签,将当前输入框的值与谁关联(属性名:属性值),并作为当前作用域对象($rootScope)的属性
  * ng-init： 初始化数据
  * ng-click： 调用作用域对象的方法（点击时）
  * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
  * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
  * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
    * $index,$even
  * ng-show: 布尔类型， 如果为true才显示
  * ng-hide: 布尔类型， 如果为true就隐藏
-->

<body ng-app="myApp" >
    <div ng-controller="MyController">
        <div>
            <h1>价格计算器(自动)</h1>
            数量:<input type="number" ng-model="count">
            价格:<input type="number" ng-model="price">
            <p>总计:{{count * price}}</p>
        </div>
        <div>
            <h1>价格计算器(手动)</h1>
            数量:<input type="number" ng-model="count1">
            价格:<input type="number" ng-model="price1">
            <button ng-click="getTotalPrice()">计算</button>
            <p>总计:{{totalPrice}}</p>
        </div>
        <div>
            <h1>人员信息列表</h1>
            <ul>
                <li ng-repeat="person in persons">
                    {{$index}}======{{person.name}}======{{person.age}}=====odd===={{$odd}}
                </li>
            </ul>
        </div>
        <div>
            <button ng-click="switchShow()">点击切换显示与隐藏</button>
            <div ng-show="ngShow">show=====ng-show=====show</div>
            <div ng-hide="ngShow">hide=====ng-hide=====hide</div>
        </div>
    </div>


<script type=‘text/javascript‘ src=‘../../js/angular-1.5.5/angular.js‘></script>
<script type=‘text/javascript‘>
    angular.module("myApp",[])
        .controller("MyController",["$scope",function ($scope) {
            // 自动计算:初始化表单数据
            $scope.count=20;
            $scope.price=2;

            // 手动计算:初始化表单数据
            $scope.count1=20;
            $scope.price1=20;
            $scope.totalPrice=400;
            $scope.getTotalPrice=function () {
                $scope.totalPrice = $scope.count1 * $scope.price1;
            }

            // 人员信息列表:初始化
            $scope.persons = [
                {"name":"tom1","age":"31"},{"name":"tom2","age":"32"},{"name":"tom3","age":"33"},{"name":"tom4","age":"34"},{"name":"tom5","age":"35"}
            ]

            // show-hide信息:初始化
            ngShow = true;
            $scope.switchShow = function () {
                $scope.ngShow = !$scope.ngShow;
            }

        }])
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<!--
常用指令(二)
  * ng-class: 动态引用定义的样式  {aClass:true,bClass:false}
  * ng-style: 动态引用通过js指定的样式对象   {color:‘red‘,background:‘blue‘}
  * ng-click: 点击监听,值为函数调用,可以传$event
  * ng-mouseenter: 鼠标移入监听,可以传$event
  * ng-mouseleave: 鼠标移出监听,可以传$event
-->
<style>
  .evenB {
    background-color: grey;
  }

  .oddB {
    background-color: green;
  }
</style>
<body ng-app="myApp">
  <div ng-controller="MyController">
    <div ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="leave()"></div>
    <div>
      <ul>
        <li ng-repeat="person in persons" ng-class-even="{evenB: true}" ng-class-odd="{oddB: true}">
          {{person.name}}===={{person.age}}
        </li>
      </ul>
    </div>
  </div>


<script type=‘text/javascript‘ src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  angular.module("myApp",[])
      .controller("MyController",function ($scope) {
          // 设置样式
          $scope.myStyle = {
              "width": "100px","height": "100px","background-color": "#ccc"
          };
          // 设置鼠标移入移除事件
          $scope.enter = function () {
              this.myStyle.height = "200px"
          };
          $scope.leave = function () {
              this.myStyle.height = "100px"
          }
          // 设置人员信息
          $scope.persons = [
              {"name":"tom1","age":"21"},"age":"22"},"age":"23"},"age":"24"},"age":"25"}
          ]
      }])
</script>
</body>

</html>

================================example01=================================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            resize: none;
        }
    </style>
</head>
<body ng-app="noteApp">

    <div ng-controller="MyNoteController">
        <textarea cols="30" rows="10" ng-model="msg"></textarea>
        <div>
            <button ng-click="save()">保存</button>
            <button ng-click="delete()">删除</button>
            <button ng-click="read()">读取</button>
        </div>
        <p>剩余的字数是:{{getCount()}}</p>
    </div>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>

app.js文件如下:

angular.module("noteApp",[])
    .controller("MyNoteController",["$scope",function ($scope) {
        // 定义计算剩余字数的方法,当超过上限时,阻止用户继续输入
        $scope.getCount = function () {
            if($scope.msg == undefined || $scope.msg == null){
                return 10;
            }
            if($scope.msg.length > 10){
                $scope.msg = $scope.msg.slice(0,10);
                return "已超过字数,无法再输入"
            }
            return 10-$scope.msg.length;
        };
        // 定义保存事件
        $scope.save = function () {
            alert("数据已保存!")
            localStorage.setItem("noteKey",JSON.stringify($scope.msg));
            $scope.msg = "";
        };
        // 定义读取数据的方法
        $scope.read = function () {
            var item = localStorage.getItem("noteKey");
            if (item == null || item == undefined){
                return;
            }
            $scope.msg = JSON.parse(item);
        };
        // 定义删除数据的方法
        $scope.delete = function () {
            localStorage.removeItem("noteKey");
            $scope.msg = "";
        }
    }]);

=============================example02==================================

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body ng-app="todoApp" >

  <div ng-controller="MyToDoController">
    <h2>我的备忘录</h2>
    <div>
      <input type="text" ng-model="newToDo">
      <button ng-click="add()">新增</button>
    </div>
    <div ng-repeat="todo in todos">
      <span>{{todo.name}}</span>
      <input type="checkbox" ng-model="todo.isChecked">
    </div>
    <div>
      <button ng-click="delete()">删除记录</button>
    </div>
  </div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js文件如下:

angular.module("todoApp",[])
    .controller("MyToDoController",function ($scope) {
        // 初始化数据
        $scope.todos = [
            {"name": "吃饭",isChecked: false},{"name": "睡觉",{"name": "打豆豆",isChecked: false}
        ];
        // 增加数据的方法
        $scope.add = function () {
            if(!$scope.newToDo){
                alert("输入的内容不能为空");
                return;
            }
            var obj = {
                name: $scope.newToDo,isChecked: true
            };
            $scope.todos.unshift(obj);
        };
        // 删除数据的方法
        $scope.delete = function () {
            var oldTodos = $scope.todos;
            $scope.todos = [];
            oldTodos.forEach(function (item,index) {
                if(!item.isChecked){
                    $scope.todos.push(item);
                }
            })
        }
    }]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!