Angular.js学习笔记

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>

{{}}表达式
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]

模块对象与控制器对象

创建模块对象步骤

创建模块对象

//[]中可以传入依赖对象

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>

ng-bind 该指令用于解决表达式闪屏问题
1. 优点:解决闪屏问题
2. 缺点：只能绑定一个变量
```
    <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="{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'

    }

})

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'

    }

})

看完我的笔记不懂也会懂----AngulaJS的更多相关文章

看完我的笔记不懂也会懂----bootstrap
目录 Bootstrap笔记知识点扫盲容器栅格系统源码分析部分外部容器栅格系统(盒模型)设计的精妙之处 Bootstrap笔记写在开始: 由于我对AngulaJS的学习只是一个最浅显的过 ...
看完我的笔记不懂也会懂----git
Git学习笔记 - 什么是Git - 首次使用Git - DOS常用命令 - Git常用命令 - 关于HEAD - 版本回退 - 工作区.暂存区与版本库 - git追踪的是修改而非文件本身 - 撤销修 ...
看完我的笔记不懂也会懂----Node.js
Node.js 学习 - 命令行窗口 - 进程与线程 - ECMAScript的缺点 - Node模块化 - Node中的全局对象 - 包 package - NPM包管理器 (Node Packag ...
看完我的笔记不懂也会懂----javascript模块化
JavaScript模块化模块化引子模块化的历史进化模块化规范 CommonJS规范 Node.js(服务器端) 下项目的结构分析 browerify(浏览器端) 下项目的结构分析 AMD规范 ...
看完我的笔记不懂也会懂----less
目录 Less学习语法篇注释变量映射(Maps) @规则嵌套和冒泡 less中的嵌套规则 less中的混合 less的运算 extend延伸/继承 less忽略编译(转义) 导入(Import ...
看完我的笔记不懂也会懂----MongoDB
MongoDb数据库学习 - 数据库的分类 - 数据库基本概念 - MongoDB常用指令 - MongoDB的CURD - sort({key:*[1,-1]}).limit(num).skip(n ...
看完我的笔记不懂也会懂----MarkDown使用指南
目录语法 [TOC] 自动生成目录 1. 标题 2. 文本强调 3. 列表 4. 图片 5. 超链接 6. 文本引用 7. 分割线 8. 代码 9. 任务列表 (MPE专属) 10. 表格 11. ...
看完我的笔记不懂也会懂----ECMAscript 567
目录 ECMAscript 567 严格模式字符串扩展数值的扩展 Object对象方法扩展数组的扩展数组方法的扩展 bind.call.apply用法详解 let const 变量的解构赋值 ...
看完我的笔记不懂也会懂----Ajax
Ajax(Asynchronous JavaScript And XML) - 本次学习所用到的插件 - XML - JSON - 关于AJAX - HTTP协议 - AJAX重点之XMLHttpRe ...

随机推荐

JVM之堆参数
1.Java 7和Java 8区别 Java 7堆结构 JDK 1.8之后将最初的永久代取消了,由元空间取代. 在Java8中,永久代已经被移除,被一个称为元空间的区域所取代.元空间的本质和永久代类似 ...
BZOJ3998 弦论【SAM】k小子串
BZOJ3998 弦论给一个字符串,问其第$K$小字串是什么两种形式 1.不同起始位置的相同串只算一次 2.不同起始位置的相同串各算一次首先建$SAM$ 所有串的数量就是$SAM$中 ...
poj3757 Training little cats
Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11496 Accepted: 2815 Description Face ...
ACM International Collegiate Programming Contest, Egyptian Collegiate Programming Contest (ECPC 2015) G. It is all about wisdom (二分,单源最短路)
题意:有$n$个点,$m$条边,只有当你的智力值大于这条边的$w$才能走,问在花费不超过$k$的情况下,从$1$走到$n$的所需的最小智力值. 题解:这题比赛为什么没想出来呢? ...
Linux 查看系统日志，查看服务日志
journalctl 查看系统日志参数 -f 表示日志跟中-u 指定的是 unit 指定要查看的服务日志,如果不指定的话会显示所有服务的日志 journalctl -f -u 要查看的服务日志 jou ...
CF1400-C. Binary String Reconstruction
CF1400-C. Binary String Reconstruction 题意: 对于一个二进制字符串$s$,以及一个给定的$x$,你可以通过一下操作来得到字符串$w$: 对于字符串\ ...
K8S(06)web管理方式-dashboard
K8S的web管理方式-dashboard 目录 K8S的web管理方式-dashboard 1 部署dashboard 1.1 获取dashboard镜像 1.1.1 获取1.8.3版本的dsash ...
SPOJ REPEATS Repeats （后缀数组 + RMQ：子串的最大循环节）题解
题意: 给定一个串$s$,$s$必有一个最大循环节的连续子串$ss$,问最大循环次数是多少思路: 我们可以知道,如果一个长度为$L$的子串连续出现了两次及以上,那么必然会存在\(s[ ...
011.NET5_MVC解读Razor混编
MVC开发 1. 什么是MVC? V-视图,呈现给用户看到的内容---表现层 C-控制器,控制业务逻辑计算,可定义多种返回类型.可以是视图模型.JSON.字符串等等 M-视图模型,用于视图和控制之间传 ...
Pycharm+任务栏悬浮+docked mode
先点下所想改变模式的模块, 然后: Window -> Activate tool window -> docked mode.

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

Angular.js学习笔记

ng-app(指令)

ng-model

ng-init

angular之表达式

双向数据绑定

数据流向的总结

作用域对象

控制器对象

依赖对象与依赖注入

命令式与声明式

模块对象与控制器对象

表达式

angular常用指令

看完我的笔记不懂也会懂----AngulaJS的更多相关文章

随机推荐

热门专题