Loading

看完我的笔记不懂也会懂----AngulaJS

目录

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

  1. 为当前的作用域对象初始化数据

    <!-- p所对应的作用域中，初始化的  username属性  的 属性值是  Fitz -->
<p ng-init="username='Fitz'"></p>

  2. 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>

数据流向的总结

  1. ng-init
    1. 单向 view层 ===> model层
    <body ng-app ng-init="'test='name'"></body>
<!-- view层初始化数据  test='name' -->
<!-- 数据流向model层但是model层不能流向view层 -->
<!-- 具体表现在刷新页面后显示数据仍然是view初始化数据 -->
  2. ng-model
    1. 双向 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>
  3. {{}}表达式
    1. 单向 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]

模块对象与控制器对象

创建模块对象步骤

  1. 创建模块对象
    //[]中可以传入依赖对象
var myModule = angular.module('myModuleName',[]);
  2. 生成作用域对象
    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';
}])

表达式

  1. 语法: {{expression}}
  2. 作用: 显式表达式的结果
  3. 注意: 表达式中引用的变量必须是当前作用域中的变量，包括原型属性
  4. 特殊值: undefined, null, Infinity, NaN 会被解释成空串无任何显示效果

angular常用指令

  1. ng-click 点击调用作用域对象

  2. 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值

    1. $index
      <li ng-repeat="person in persons">
    {{$index}}  !<-- 1 2 3 ... -->
</li>
    2. $first
      <li ng-repeat="person in persons">
    {{$first}}  !<-- true / false-->
</li>
    3. $last
      <li ng-repeat="person in persons">
    {{$last}}  !<-- true / false-->
</li>
    4. $middle
      <li ng-repeat="person in persons">
    {{$middle}}  !<-- true / false-->
</li>
    5. $odd
      <li ng-repeat="person in persons">
    {{$odd}}  !<-- true / false-->
</li>
    6. $even
      <li ng-repeat="person in persons">
    {{$even}}  !<-- true / false-->
</li>

  3. ng-bind 该指令用于解决表达式闪屏问题

    1. 优点:解决闪屏问题
    2. 缺点：只能绑定一个变量
        <li ng-repeat="person in persons" ng-bind="person.username"></li>
    ```

  4. 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(){

    }
})

  5. ng-style 能够给当前元素设置样式

    <!-- 方式一 -->
<div ng-controller="myController">
    <div ng-style="{width: '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 = {
        width: '300px',
        height: '300px',
        background: 'pink'
    }
})

  6. 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'
    }
})

  7. 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'
    }
})
posted @ 2020-10-18 00:27  虚伪渲染敷衍  阅读(76)  评论(0)    收藏  举报