项目开发笔记-angular框架学习

最新推荐文章于 2024-07-17 21:56:41 发布

Y欲与深蓝C

最新推荐文章于 2024-07-17 21:56:41 发布

阅读量460

点赞数 1

分类专栏： Angular学习

Angular学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文：https://blog.csdn.net/mutouafangzi/article/details/77199346

一、什么是Angular框架？
AngularJS是一个JavaScript框架。它可通过<script>标签添加到HTML页面；

AngularJS把应用程序数据绑定到HTML元素；
AngularJS可以克隆和重复HTML元素；
AngularJS可以隐藏和显示HTML元素；
AngularJS可以在HTML元素“背后”添加代码；
AngularJS支持输入验证；
1.<script src="../../js/angular-1.2.29/angular.js"></script>

AngularJS通过扩展了HTML，且通过表达式绑定数据到HTML。

ng-app指令定义一个AngularJS应用程序，ng-app指令告诉AngularJS，
元素是AngularJS应用程序“所有者”。
ng-model指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind指令把应用程序数据绑定到HTML视图。

重要概念

数据绑定
数据绑定：数据从一个地方A转移（传递）到另一个地方B，而且这个操作由框架来完成
双向数据绑定：数据可以从View（视图层）流向Model（模型），也可以从Model流向View

视图（View）：也就是我们的页面（主要是Angular指令和表达式）
模型（Model）：作用域对象（当前为$rootScope），它可以包含一些属性或方法；
当改变View中的数据，Model对象的对应属性也会随之改变：ng-model指令，数据从View==> Model ；
当Model域对象的属性发生改变时，页面对应数据随之更新；{{}}表达式，数据从Model==>View；
ng-model是双向数据绑定，{{}}是单向数据绑定；
ng-init用来初始化当前作用域变量，单向绑定；

<!--设置了初始化数据，数据从view流向model-->
<body ng-app ng-init="name='rupin'">
<!--数据从model往view上流，流向了{{name}}和ng-model="name"上-->
<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>

依赖对象和依赖注入

依赖对象：完成某个特定功能需要某个对象才能实现，这个对象就是依赖对象
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是注入
anggular的’$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.命令式
更加注重执行的过程
更像简答题

重要对象
作用域对象

一个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
  }
</script>
</body>

控制器对象

用来控制AngularJS应用数据的实例对象；
ng-controller：指定控制器构造函数，Angular会自动new此函数创建控制器对象；
同时Angular还会创建一个新的域对象 $s c o p e ，它是$ roopScope的子对象；
在控制器函数中声明 $s c o p e 形参， A n g u l a r 会自动将$ 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项目练习

小型记事本练习

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

Y欲与深蓝C

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录