Angular

Angular

什么是Angular

AngularJS 是一个 JavaScript 框架。它可通过 < script> 标签添加到 HTML 页面；
- AngularJS 把应用程序数据绑定到 HTML 元素；
- AngularJS 可以克隆和重复 HTML 元素；
- AngularJS 可以隐藏和显示 HTML 元素；
- AngularJS 可以在 HTML 元素”背后”添加代码；
- AngularJS 支持输入验证。

<script src="../../js/angular-1.2.29/angular.js"></script>

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。
- ng-app 指令定义一个 AngularJS 应用程序，ng-app 指令告诉 AngularJS，< div> 元素是 AngularJS 应用程序的”所有者”。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- ng-bind 指令把应用程序数据绑定到 HTML 视图。

重要概念

数据绑定

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

<body ng-app  ng-init="name = 'rupin'">

<input type="text" ng-model="name">
<p>姓名1：{{name}}</p>
<input type="text" ng-model="name">
<p>姓名2：{{name}}</p>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>
```
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9

依赖对象和依赖注入

依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
- angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用；
- 注意：形参必须是特定的名称, 否则Angular无法注入抛异常。
```
//一个依赖对象的例子
<script>
  var arr = [1,2,3,4,5];
  var arr1 = [];
  //命令式
  for(var i=0;i<arr.length;i++){
      var value = arr[i]+10;
      arr1.push(value);
  }
  console.log('命令式输出：'+arr1);

  //声明式
  var arr2 = arr.map(function (item,index) {
      return item+10;
  })
  console.log('声明式输出：'+arr2);
</script>
```
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1、声明式
  - 更加注重的执行的结果；
  - 声明式是对命令式的局部包装；
  - 更像填空题，选择题；
- 2、命令式
  - 更加注重的执行的过程；
  - 更像简答题。

重要对象

作用域对象
- 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)；
- 它的属性和方法与页面中的指令或表达式是关联的；

<!--这个根作用域对象就是body内的内容，未命名，就叫($rootScope)-->
<body ng-app ng-init="age=12">
<div ng-controller="MyController">
  <input type="text" placeholder="姓" ng-model="firstName">
  <input type="text" placeholder="名" ng-model="lastName">
  <p>输入的姓：<span>{{firstName}}</span></p>
  <p>输入的名：<span>{{getName()}}</span></p>
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>

<script type="text/javascript">
//这是定义的一个控制器对象，而控制器对象控制的范围就是<div ng-controller="MyController">内的内容。
  function MyController($scope) {
      console.log($scope);//$$childScopeClass对象
      $scope.firstName = 'KB';
      $scope.lastName = 'Ben';
      $scope.getName = function () {
          return $scope.firstName + '-' +this.lastName;
      }
      //可以证明，定义控制器对象时，自动new了一个实例。
      console.log(this instanceof MyController);//true
  }

控制器对象

用来控制AngularJS应用数据的实例对象；
ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象；
同时Angular还会创建一个新的域对象$scope, 它是$rootScope的子对象；
在控制器函数中声明$scope形参, Angular会自动将$scope传入；

<!--html结构-->
<body ng-app="myApp">
<div ng-controller="MyController">
  <input type="text" ng-model="empName">
  <p>姓名1：{{empName}}</p>
</div>
<div ng-controller="MyController2">
  <input type="text" ng-model="empName">
  <p>姓名2：{{empName}}</p>
</div>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  console.log(angular);
//创建方法：
//  创建模块对象
var myModule = angular.module('myApp',[]);
//  创建控制器对象
myModule.controller('MyController',function ($scope) {
    $scope.empName = 'kobe';
});
myModule.controller('MyController2',function ($scope) {
    $scope.empName = 'wade';
});

//  简化写法--//隐式声明依赖注入
angular.module('myApp',[]).controller('MyController',function ($scope) { $scope.empName = 'kobe';}).controller('MyController2',function ($scope) {$scope.empName = 'kobe';});

//  简化写法2--//显示声明依赖注入
  angular.module('myApp',[]).controller('MyController',['$scope',function ($scope) { $scope.empName = 'kobe';}]).controller('MyController2',['$scope',function ($scope) { $scope.empName = 'wade';}])

</script>
</body>

Angular指令

Angular为HTML页面扩展的: 自定义标签属性或标签
与Angular的作用域对象(scope)交互,扩展页面的动态表现力

常用指令

ng-app: 指定模块名，angular管理的区域；
ng-model：双向绑定，输入相关标签；
ng-init：初始化数据；
ng-click：调用作用域对象的方法（点击时）；
ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）；
ng-bind：解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）；
ng-repeat：遍历数组显示数据，数组有几个元素就会产生几个新的作用域；
$index, $first, $last, $middle, $odd, $even；
ng-show: 布尔类型，如果为true才显示；
ng-hide: 布尔类型，如果为true就隐藏

<!--一个计算总价练习-->
<body ng-app="myApp" >

<div ng-controller="MyCtrl">
    <div>
        <h2>价格自动计算器</h2>
        数量：<input type="number" ng-model="count1">
        价格：<input type="number" ng-model="price1">
        <p>总计：{{price1 * count1}}</p>
    </div>
    <div>
        <h2>价格手动计算器</h2>
        数量：<input type="number" ng-model="count2">
        价格：<input type="number" ng-model="price2">
        <button ng-click="getTotal()">计算</button>
        <p>总计：{{total}}</p>
    </div>
</div>
<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
angular.module('myApp',[]).controller('MyCtrl',['$scope',function ($scope) {
    $scope.price1 = 20;
    $scope.count1 = 1;
    $scope.price2 = 30;
    $scope.count2 = 3;
    $scope.total = 90;
    $scope.getTotal = function () {
        $scope.total = $scope.price2 *$scope.count2;
    }
}])
</script>

</body>

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" ng-controller="MyController">

<!--使用了ng-class、ng-style来进行定义样式-->
<!--使用了ng-mouseover、ng-mouseleave来绑定事件-->
<div style="width: 300px; height: 300px;background-color: yellow;" ng-mouseover="over()" ng-mouseleave="leave()" ng-style="myStyle"></div>
<ul>
<!--使用了ng-repeat来进行遍历，创造li元素标签-->
  <li ng-repeat="lim in lis" ng-class="{evenB:$odd,oddB:$even}">
    {{lim.name}}----{{lim.age}}
  </li>
</ul>

<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.over = function () {
        $scope.myStyle = {background:'blue'}
    };
    $scope.leave = function () {
        $scope.myStyle = {background:'green'}
    }
    $scope.lis = [
          {name: 'Tom', age: 12},
          {name: 'Tom2', age: 13},
          {name: 'Tom3', age: 14},
          {name: 'Tom4', age: 15},
          {name: 'Tom5', age: 16}
          ];
}])
</script>
</body>

表达式

使用Angular表达式:
- 语法: {{expression}}
- 作用: 显示表达式的结果数据
- 注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
操作的数据
- 基本类型数据: number/string/boolean
- undefined, Infinity, NaN, null解析为空串: “”, 不显示任何效果
- 对象的属性或方法
- 数组

<!--将一个字符串倒序输出-->
<p>{{'abcdefg'}}</p>
<p>{{'abcdefg'.split().reverse().join()}}</p>

数据存储

1、sessionStorage(会话存储)
- 声明周期：浏览器打开—-浏览器关闭;
- 数据大小：5M甚至更大
2、localStorage(本地存储)
- 生命周期：永久，除非手动删除;
- 数据大小：5M甚至更大
3、cookie
- 浏览器与服务器之间通信携带的载体。
- 不能跨域;
- 大小限制到4kb;
- 生命周期：
  - 会话cookie：浏览器打开—-浏览器关闭
  - 人为设置生命周期 === 人为设置的时间
- 缺点：每次发送请求都会携带，浪费带宽。

AngularJS项目练习

小型记事本练习

有保存、读取以及删除功能的笔记本

<!--HTML结构-->
<!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="NoteController">
    <h2>我的笔记</h2>
    <textarea cols="30" rows="10" ng-model="message"></textarea>
    <div>
        <button ng-click="save()">保存</button>
        <button ng-click="read()">读取</button>
        <button ng-click="delete()">删除</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>

//js文件
angular.module('noteApp',[]).controller('NoteController',['$scope',function ($scope) {
    $scope.message = '';
    $scope.getCount=function () {
        if($scope.message.length>100){
            //判断，当输入的内容长度大于100时，将输入的内容进行截取，截取内容放入到文本框内，这样的话文本框内就不能再输入超过100长度的内容。
            $scope.message = $scope.message.slice(0,100);
        }
        return 100-$scope.message.length;
    }
    $scope.save = function () {
        //将存储的js值内容转化为json字符串的形式存入。
        sessionStorage.setItem('note_key',JSON.stringify($scope.message));
        $scope.message = '';
    }
    $scope.read = function () {
        //考虑到用户一进入就进行读取数据，如果是空串“”，他只是一个js正常字符串，而非json字符串，所以调用parse是报错的。所以考虑传入"{}"或者"[]"，但是如果传入的"{}"，则转化为js对象，得到的是{object,object}。所以只能传入"[]".
        $scope.message = JSON.parse(sessionStorage.getItem('note_key') || '[]');
    }
    $scope.delete = function () {
        $scope.message = '';
        sessionStorage.removeItem('note_key');
    }
}])

备忘录练习

可进行新增备忘，删除选中备忘的备忘录

<!--html文件-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body ng-app="todoApp" ng-controller="myCtrl">
<h2>我的备忘录</h2>
<input type="text" ng-model="newTodo">
<button ng-click="add()">新增</button>
<div ng-repeat="todo in todos">
  <input type="checkbox" id="rdo" ng-model="todo.isChecked"/>
  <label for="rdo">{{todo.name}}</label>
</div>
<button ng-click="delete()">删除选中</button>

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

//js文件
angular.module('todoApp',[]).controller('myCtrl',['$scope',function ($scope) {
    $scope.todos = [
        {name:"吃饭",isChecked:false},
        {name:"睡觉",isChecked:false},
        {name:"打豆豆",isChecked:false},
        ];
    $scope.add = function () {
        if(!$scope.newTodo){
            return;
        }
        var obj = {
            name:$scope.newTodo,
            isChecked:false
        }
        $scope.todos.unshift(obj);
        $scope.newTodo = '';
    }
    $scope.delete = function () {
        var oldArr = $scope.todos;
        $scope.todos = [];
        oldArr.forEach(function (item,index) {
            if(!item.isChecked){
                $scope.todos.push(item);
            }
        })
    }
}])

初识AngularJs

Angular

什么是Angular

重要概念

数据绑定

依赖对象和依赖注入

重要对象

Angular指令

常用指令

表达式

数据存储

AngularJS项目练习

小型记事本练习

备忘录练习

猜你喜欢