目录
Angular.js学习笔记
写在开始：由于我对AngulaJS的学习只是一个最浅显的过程,所以看完后你大概只能学会如何简单的使用AngularJs，所以我对我的标题党行为道歉啦,嘿嘿
ng-app(指令)
作用是: 告诉angular核心，管理当前标签所包含的整个区域,并且会自动创建$rootScope对象
<body ng-app="">
<!-- something -->
</body>
ng-model
用于将当前输入框 与 某个需要的地方 进行关联，并成为当前作用域 对象中的属性
<input type="text" ng-model="username">
<p>{{username}}</p>
<!--
当前输入框: input
与
p标签进行关联
同时，
input的值成为它所在作用域(这里是$rootScope)中的属性值，属性名就是ng-model的值 即:
{username: $input的值$}
-->
- ng-model的数据流动
- Model层 ===> view层
- view层 ===> Model层
ng-init
-
为当前的作用域对象初始化数据
<!-- p所对应的作用域中，初始化的 username属性 的 属性值是 Fitz --> <p ng-init="username='Fitz'"></p> -
ng-init的数据流向
ng-init的数据流向是 单向的 view层 ==> model层
angular之表达式
angular中表达式的语法格式:{}
双向数据绑定
数据绑定： 数据从A转移(传递)到B
双向数据绑定： 数据从view层流向model层，或者从model层流向view层
<body ng-app="" ng-init="result='Fitz'">
<input type="text" name="name" value="" ng-model="result">
<p>
姓名1:{{result}}
</p>
<input type="text" name="name" value="" ng-model="result">
<p>
姓名2:{{result}}
</p>
</body>
数据流向的总结
- ng-init
- 单向 view层 ===> model层
<body ng-app ng-init="'test='name'"></body> <!-- view层初始化数据 test='name' --> <!-- 数据流向model层但是model层不能流向view层 --> <!-- 具体表现在刷新页面后显示数据仍然是view初始化数据 --> - ng-model
- 双向 view层 ===> model层 model层 ===> view层
<body ng-app ng-init="'test='name'"></body> <!-- 一进入页面就能看到输入框显示文本为 name，这说明此时的数据流向是从model层 ===> view层 --> <input ng-model= "test"></input> <!-- 修改第二个文本框中的文字，能够发现第一个文本框也随之更改,此时的数据流向是双向的: view层 ===> model层 再从 model层 ===> view层 --> <input ng-model= "test"></input> - {{}}表达式
- 单向 model层 ===> view层
作用域对象
- 本质上是一个普通的js实例对象,ng-app指令默认会创建一个根作用域对象($rootScope)
- 根作用域对象的属性、方法与页面中的指令、表达式是关联的
控制器对象
- 控制器对象是用于控制AngularJS应用数据的 实例对象
- ng-controller 指定控制器的构造函数, Angular会自动new这个函数来创建控制器
<div ng-controller="MyController"> //MyController为自定义的构造函数 <input type="text" ng-model="firstName"> <input type="text" ng-model="lastName"> <p>名: {{firstName}}</p> <p>姓: {{lastName}}</p> <p>姓名: {{lastName + firstName}}</p> <p>姓名: {{getFullName()}}</p> </div> - 同时Angular还会创建一个新的作用域对象
$scope,他是$rootscope的子对象 - 控制器中声明
$scope形参,Angular会自动将$scope传入function MyController($scope){ //构造函数的形参必须是$scope //指定初始化数据,作用类似于ng-init //$scope.prop1 = value1; //$scope.prop2 = value2; $scope.firstName = 'Da' $scope.lastName = 'Lx' $scope.getFullName = function(){ return $scope.lastName + this.firstName } console.log($scope); }
依赖对象与依赖注入
依赖对象: 完成某个特定功能所必须以一个对象，这个必须的对象成为依赖对象
``` javascript
document.gerElementById('box1').onclick = function(event){
console.log(event.clientX);
// 得到clientX的值必须通过event对象，那么就成event对象为依赖对象
}
```
依赖注入： 依赖对象以形参的方式被注入使用
Angular直接$scope对象是一个依赖对象，它需要通过依赖注入的方式进行使用，这就意味着在controller构造函数中传入非$scope形参，会导致错误
// 这是正确的
function Controller($scope){
//something
}
//这是错误的
function Controller(result){}
命令式与声明式
命令式：注重实现、执行的过程(类似解答题，要求详细过程)
var arr = [1,2]
var arr2 = []
for (var i=0,len=arr.length; i<len; i++){
var result = arr[i] + 10
arr2.push(result)
}
声明式:注重结果(类似填空、选择题注重结果的对错)
var arr = [1,2]
var arr2 = arr.map(item,index){
return item * 10
}
console.log(arr2) //arr2 ---> [10,20]
模块对象与控制器对象
创建模块对象步骤
- 创建模块对象
//[]中可以传入依赖对象 var myModule = angular.module('myModuleName',[]); - 生成作用域对象
myModule.controller('ControllerName',function($scope){ $scope.prop1 = value1 //something just like that })
模块对象与控制器对象结合使用
HTML
<body ng-app="testModule">
<div ng-controller="MyController">
<input type="text" ng-model="name">
<p>工人1: {{name}}</p>
</div>
<div ng-controller="MyController2">
<input type="text" ng-model="name">
<p>工人2: {{name}}</p>
</div>
//创建模块对象
var testModule = angular.module('testModule',[])
//生成作用域对象
//方式一
testModule.controller('MyController',function($scope){
$scope.name = 'Fitz';
})
testModule.controller('MyController2',function($scope){
$scope.name = 'Lx';
})
//方式二
testModule.controller('MyController',function($scope){
$scope.name = 'Fitz2';
}).controller('MyController2',function($scope){
$scope.name = 'Lx2';
})
//方式三(显式声明依赖注入) 这种方式能够解决因为后期代码压缩引发的形参错误
testModule.controller('MyController',['$scope',function($scope){
$scope.name = 'Fitz2';
}]).controller('MyController2',['$scope',function($scope){
$scope.name = 'Lx2';
}])
表达式
- 语法: {{expression}}
- 作用: 显式表达式的结果
- 注意: 表达式中引用的变量必须是当前作用域中的变量，包括原型属性
- 特殊值: undefined, null, Infinity, NaN 会被解释成空串无任何显示效果
angular常用指令
-
ng-click 点击调用作用域对象
-
ng-repeat 遍历显示数据,数组中有几个数据就会产生几个新的作用域
<body ng-app="myApp"> <div ng-controller="myController"> <div> <h2>人员信息列表</h2> <ul> <li ng-repeat="person in persons"> index: {{$index}} ---> Name: {{person.username}} ---> Age: {{person.age}} </li> </ul> </div> </div> </body>angular.module('myApp',[]) .controller('myController',function($scope){ //数组中包含用于显示的数据 $scope.persons = [ {username:'a',age:50}, {username:'b',age:50}, {username:'c',age:50}, {username:'d',age:50}, {username:'e',age:50} ] })除了$index其他都是返回Bool值
- $index
<li ng-repeat="person in persons"> {{$index}} !<-- 1 2 3 ... --> </li> - $first
<li ng-repeat="person in persons"> {{$first}} !<-- true / false--> </li> - $last
<li ng-repeat="person in persons"> {{$last}} !<-- true / false--> </li> - $middle
<li ng-repeat="person in persons"> {{$middle}} !<-- true / false--> </li> - $odd
<li ng-repeat="person in persons"> {{$odd}} !<-- true / false--> </li> - $even
<li ng-repeat="person in persons"> {{$even}} !<-- true / false--> </li>
- $index
-
ng-bind 该指令用于解决表达式闪屏问题
- 优点:解决闪屏问题
- 缺点：只能绑定一个变量
<li ng-repeat="person in persons" ng-bind="person.username"></li> ``` -
ng-show与ng-hide 这两个指令的值类型是布尔值，当时true时show显示,hide隐藏
<div> <button ng-click="switchLike()">切换</button> <p ng-show="isLike">show !</p> <p ng-hide="isLike">hide !</p> </div>angular.module('myApp',[]) .controller('myController',function($scope){ $scope.isLike = true; //ng-show/hide需要布尔值 $scope.switchLike = function(){ } }) -
ng-style 能够给当前元素设置样式
<!-- 方式一 --> <div ng-controller="myController"> <div ng-style="{ '300px',height: '300px',background: 'pink'}"></div> </div> <!-- 方式二 --> <div ng-controller="myController"> <div ng-style="myStyle"></div> </div>angular.module('myApp',[]) .controller('myController',function($scope){ // for 第二种方法 $scope.myStyle = { '300px', height: '300px', background: 'pink' } }) -
ng-mouseenter 响应鼠标移入
<div ng-controller="myController"> <div ng-style="myStyle" ng-mouseenter="enter()"></div> </div>angular.module('myApp',[]) .controller('myController',function($scope){ $scope.enter = function(){ this.myStyle.background = '#bfa' } }) -
ng-mouseleave 响应鼠标移出
<div ng-controller="myController"> <div ng-style="myStyle" ng-mouseenter="leave()"></div> </div>angular.module('myApp',[]) .controller('myController',function($scope){ $scope.leave = function(){ this.myStyle.background = '#bfa' } })