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

原文：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还会创建一个新的域对象 $scope，它是$ roopScope的子对象；
在控制器函数中声明 $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：制定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）；

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

猜你喜欢