自己总结的尚硅谷angular课程笔记

1.入门介绍

1.1angularjs是什么？

jquery是js函数库

angular是google开源的js结构化框架

官网：

1.1.1angularjs特性和优点

耦合度越低越好，避免牵一发而动全身的事情发生

1.1.2与jquery比较

angular：在页面和内存之间建立管道，让数据在管道里来回流动

1.1.3angularjs能做什么项目

构建单页面（spa）web应用或web app应用

1）单页面应用（spa）：single page application

特点：

1.将所有的活动局限于一个页面

2.当页面中有部分数据发生了变化，不会刷新整个页面，而是局部刷新

3.利用的是ajax技术、路由

2）

使用插件可以看到网页里使用的angular相关数据

没有使用angular会提示

1.1.4关于版本的问题

学的是1.*版本，而angularjs还有2.*和4.*

1.*的版本采用的事javascript的语法

2.*和4.*用的事typescript的语法

1.2开发第一个angularjs应用

1.2.1例子

实现效果：

1）jquery实现

引入jquery库

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="name">
<p>您输入的内容是：<span id="contentspan"></span></p>

<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {//document.ready文档加载完毕(页面的结构) 原生：window.onload:整个页面加载完毕，包括图片。。。
      $('#name').keyup(function () {
          var name = this.value;
          $('#contentspan').html(name);
      })
})
</script>
</body>
</html>

2）angularjs实现

引入angularjs文件

       <script src="../../js/angular-1.2.29/angular.js"></script>

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body ng-app>

<input type="text" ng-model="username">
<p>您输入的内容是：<span>{{username}}</span></p>
<script src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

3）理解第一个angularjs应用

1.2.2webstorm设置

手动设置：

file→settings→editor→live templates

导入设置：

file→import settings

1.2.3引入angularjs

使用<script>引用angularjs源文件

1). 本地引入: angularjs.js

2). 在线远程引入(cdn): http://cdn.bootcss.com/angular.js/1.5.5/angular.min.js

1.2.4使用angularjs

在页面中使用angular的指令和表达式，在谷歌浏览器上使用ng-inspector插件

ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建$rootscope根作用域对象

ng-app生成的

ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootscope)的属性

{{}} (表达式) : 显示数据,从当前作用域对象的指定属性名上取

1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，

2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

3、区别：语句用分号结尾，有些语句我们没有加分号，比如console.log虽然我们没有加分号，但也是语句，因为js引擎会自动解析并且加上分号。

4、特例：if语句，就不用加封号可也是完整的语句

2.四个重要概念

2.1双向数据绑定

2.1.1数据绑定

数据从一个地方a转移(传递)到另一个地方b, 而且这个操作由框架来完成

- view（视图）：页面（标签、指令，表达式）

- model(模型) ：作用域对象（属性、方法）

- 数据绑定：数据从一个位置自动流向另一个位置

- view-->model

- model-->view

- 单向数据绑定：只支持一个方向

- view-->model ： ng-init

- model-->view : {{name}}

- 双向数据绑定

- model<-->view : ng-model

- angular是支持双向数据绑定的

2.1.2双向数据绑定

数据可以从view(视图层)流向model（模型）, 也可以从model流向view

* 视图(view): 也就是我们的页面(主要是andular指令和表达式)

* 模型(model) : 作用域对象(当前为$rootscope), 它可以包含一些属性或方法

* 当改变view中的数据, model对象的对应属性也会随之改变: ng-model指令数据从view==>model

* 当model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式数据从model==>view

* ng-model是双向数据绑定, 而{{}}是单向数据绑定

对象是用来存放管理数据的，函数是特殊的对象，与对象不同的是，函数可以执行，对象里也可以包含函数

例子：

表达式只能用来显示，不能操作，需要操作的地方就要使用ng-model指令

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>02_(双向)数据绑定</title>
</head>
<body ng-app="" ng-init="name='tom'">

<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>
</html>

2.1.3 ng-init

用来初始化当前作用域变量。日常开发不会全用这个初始化。

2.1.4理解双向数据绑定

2.2依赖注入（di，dependency injection）

* 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。

如何引入依赖对象？

方式一: 内部自己创建 : 不动态

　　　　　方式二: 全局变量 : 污染全局命名空间

　　　　方式三: 形参引入依赖 : 依赖注入使用的方式,这种最好

* 依赖注入：1). 定义函数时, 使用形参声明依赖对象变量, 在函数体中使用依赖对象(我们实现)

　　　　　　 2). 函数调用时, 自动将创建好的依赖对象动态传入(框架实现)

　　　　　　 3). 例子: 事件监听就使用了依赖注入, event就是依赖对象(event可以是任意名称)

　　　　　　　　angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。

回调函数的event的就是依赖对象，回调函数有形参就是依赖注入

angular中的依赖注入：形参必须是特定的名称$scope, 否则angular无法注入会抛异常

开发的两种方式：

需求：将数组里的每一项值乘2，然后输出

1.命令式

var arr = [1,2,3,4,5];
var newarr = [];
for(var i=0;i<arr.length;i++){
var num = arr[i]*2;
newarr.push(num);
}
console.log(newarr);

2.声明式

//声明式
var newarr2 = arr.map(function (item) {
return item*2;
});
console.log(newarr2);

命令式和声明式的区别：

命令程序执行的时候每一步都是按照自己的指令，更注重执行的过程

声明式更注重执行的结果。声明式是对命令式的局部包装

它们是解答题与填空题的区别

2.3 mvc模式

总结：

- m: model, 即模型**, 在angular中:

- 为scope

- 储存数据的容器

- 提供操作数据的方法

- **v: view, 即视图**, 在angular中:

- 为页面

- 包括: html/css/directive/expression

- 显示model的数据

- 将数据同步到model

- 与用户交互

- **c: controller, 即控制器**, 在angular中:

- 为angular的controller

- 初始化model数据

- 为model添加行为方法

2.4 m-v-vm模式

mvvm是mvc的进化版, angular使用的就是m-v-vm

在angular中mvvm模式主要分为四部分：

1. view：它专注于界面的显示和渲染，在angular中则是包含一堆声明式directive的视图模板。

2. model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。也就是angular中的service

3. viewmodel：它是view和model的粘合体，负责view和model的交互和协作，它负责给view提供显示的数据，以及提供了view中command事件操作model的途径；也就是angular中的scope

4. controller：这并不是mvvm模式的核心元素，但它负责viewmodel对象的初始化，它将组合一个或者多个service来获取业务领域model放在viewmodel对象上，使得应用界面在启动加载的时候达到一种可用的状态。

总结：

- m: model, 即数据模型, 在angular中:

- 为scope中的各个数据对象

- v: view, 即视图, 在angular中:

- 为页面

- vm: viewmodel, 即视图模型, 在angular中:

- 为scope对象

- 在angular中controller不再是架构的核心，在mvvm中只是起辅助作用，用来辅助$scope对象，即vm层

3.三个重要对象

3.1作用域(scope)

作用域对象:

* 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootscope)

* 它的属性和方法与页面中的指令或表达式是关联的

3.2控制器(controller)

* 用来控制angularjs应用数据的实例对象，是我们view与model之间的桥梁

* ng-controller : 指定控制器构造函数, angular会自动new此函数创建控制器对象

* 同时angular还有创建一个新的作用域对象$scope, 它是$rootscope的子对象

每定义一个ng-controller指令，内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。

* 在控制器函数中声明$scope形参, angular会自动将$scope对象传入

3.3作用域与控制器

例子：

angular旧版本：手动写构造器的方法已淘汰

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<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>输入的姓名为: {{firstname+'-'+lastname}}</p>
<p>输入的姓名2为: {{getname()}}</p>
</div>
<div>
{{firstname}} 
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
function mycontroller ($scope) {//必须是$scope
    // alert(this instanceof mycontroller);//说明是new调用
    $scope.firstname = 'kb';
    $scope.lastname = 'brent';
    //给域对象指定方法
    $scope.getname = function() {
      return $scope.firstname + " " + $scope.lastname;
    };
    console.log($scope.age);
}
</script>
</body>
</html>

3.3模块(module)

- 也是一个对象

- 创建模块对象： angular.module('模块名', [依赖的模块])

- 通过模块添加控制器：

- module.controller('mycontroller', function($scope){//操作$scope的语句})

- angular的整体设计也是多模块的

- 核心模块： angular.js

- 扩展模块： angular-router.js, angular-message.js, angular-animate.js

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="text" ng-model="empname">
<p>员工名:{{empname}}</p>
</div>
<div ng-controller="myctrl1">
<input type="text" ng-model="empname">
<p>员工:{{empname}}</p>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
//    console.log(angular,typeof angular);
//    //创建当前应用的模块对象
//      var module = angular.module('myapp',[]);
//      module.controller('myctrl',function ($scope) {
//            $scope.empname = 'tom';
//      });
//    module.controller('myctrl1',function ($scope) {
//        $scope.empname = 'jack';
//    })
写法问题：代码重复率高。
    //方法链调用
//    angular.module('myapp',[])//模块对象的方法执行完返回的就是模块对象本身
//            .controller('myctrl',function ($scope) {//$scope //写法问题（js代码压缩时会把所有的局部变量压缩成abcd等）
//                $scope.empname = 'tom';
//            }).controller('myctrl1',function ($scope) {
//                $scope.empname = 'jack';
//            })
    /*
    上面写法的问题：
        1、形参只能写固定的变量名$scope;
        2、一旦文件压缩，将不能使用，会报错。
     */
    //改进
    angular.module('myapp',[])
            .controller('myctrl',['$scope',function (a) {
                a.empname = 'tom'
            }])
            .controller('myctrl1',['$scope',function (b) {
                b.empname = 'jack';
            }])
</script>
</body>
</html>

4.两个页面语法

4.1表达式

- {{js表达式}}

- 从作用域对象中读取对应的属性数据来显示数据

- 不支持if/for/while

- 支持三目表达式

4.2指令

- 什么指令：自定义标签属性/标签

- 常用的指令：

- ng-app: 指定模块名，angular管理的区域

- ng-model：双向绑定，输入相关标签

- ng-init：初始化数据

- ng-click：调用作用域对象的方法（点击时）

可以传$event

- ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）

- ng-bind：解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）

- ng-repeat：遍历数组显示数据，数组有几个元素就会产生几个新的作用域

- $index, $first, $last, $middle, $odd, $even

- ng-show: 布尔类型，如果为true才显示

- ng-hide: 布尔类型，如果为true就隐藏

- ng-class: 动态引用定义的样式 {aclass:true, bclass:false}

- ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}

- ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event

- ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event

<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
</head>
<body ng-app="myapp" >
<div ng-controller="myctrl" ng-init="age=12">
    <div>
       <h2>价格计算器(自动)</h2>
        数量：<input type="number" ng-model="count1">
        价格：<input type="number" ng-model="price1">
        <p>总计：{{count1 * price1}}</p>
    </div>
    <div>
        <h2>价格计算器(手动)</h2>
        数量：<input type="number" ng-model="count2">
        价格：<input type="number" ng-model="price2">
        <button ng-click="gettotalprice()">计算</button>
        <p>总计：{{totalprice}}</p>
    </div>
    <h3>人员信息列表</h3>
    <ul>
        <li ng-repeat="person in persons">偶数行：{{$even}},奇数行{{$odd}},中间的：{{$middle}},最后一个：{{$last}},第一个：{{$first}},第{{$index + 1}}个，{{person.name}}----{{person.age}}</li>
    </ul>
    
    <p ng-bind="count2">{{'asdfdsfds'}}</p>
    <p>{{count2}}</p>
    <button ng-click="switch()">切换</button>
    <p ng-show="islike">我喜欢贾静雯</p>
    <p ng-hide="islike">贾静雯喜欢我</p>
</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.count1 = 1;
                $scope.price1 = 20;
                $scope.count2 = 1;
                $scope.price2 = 10;
                $scope.totalprice = $scope.count2 * $scope.price2;
                $scope.gettotalprice = function () {
                    $scope.totalprice = this.price2 * this.count2;
                };
                $scope.persons = [
                    {name : 'kobe', age : 39},
                    {name : 'anverson', age : 41},
                    {name : 'weide', age : 38},
                    {name : 'tim', age : 40},
                    {name : 'curry', age : 29}
                ];
                $scope.islike = true;
                $scope.switch = function () {
                    $scope.islike = !$scope.islike;
                }
            }])
</script>
</body>
</html>

隔行换色

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<style>
.evenb {
    background-color: grey;
}
.oddb {
    background-color: green;
}
</style>
<body ng-app="myapp" ng-controller="mycontroller">
<div style="width: 100px;height: 100px;background-color: red"
     ng-mouseover="over()" ng-mouseleave="leave()" ng-style="mystyle">
</div>
<div>
<ul>
      <li ng-repeat="p in persons" ng-class="{evenb:$even, oddb:$odd}">
        {{p.name}}---{{p.age}}
      </li>
</ul>
</div>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
angular.module('myapp', [])
      .controller('mycontroller', function ($scope) {
        $scope.over = function () {
          $scope.mystyle = {
            background: 'blue'
          };
        };
        $scope.leave = function () {
          $scope.mystyle = {
            background: 'green'
          };
        };
        $scope.persons = [
          {name: 'tom', age: 12},
          {name: 'tom2', age: 13},
          {name: 'tom3', age: 14},
          {name: 'tom4', age: 15},
          {name: 'tom5', age: 16}
        ];
      });
</script>
</body>
</html>

4.3过滤器

- 作用: 在显示数据时可以对数据进行格式化或过滤

- 单个--->格式化（将别的类型的数据转换为特定格式的字符串）

- 多个----》格式化/过滤

- 不会真正改变被操作数据

- {{express | 过滤器名：补充说明}}

- 常用过滤器：

- currency 货币格式化(文本)

- number数值格式化(文本)

- date 将日期对象格式化(文本)

- json: 将js对象格式化为json(文本)

- lowercase : 将字符串格式化为全小写(文本)

- uppercase : 将字符串格式化全大写(文本)

- limitto 从一个数组或字符串中过滤出一个新的数组或字符串

- limitto : 3 limitto : -3

- orderby : 根据指定作用域属性对数组进行排序

- {{[2,1,4,3] | orderby}} 升序

- {{[2,1,4,3] | orderby：‘-’}} 降序

- {{[{id:2,price:3}, {id:1, price:4}] | orderby:'id'} id升序

- {{[{id:2,price:3}, {id:1, price:4}] | orderby:'-price'} price降序

- filter : 从数组中过滤返回一个新数组

- {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤

- {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤

5.练习

练习1

遇到的问题：如果没有保存就读取报错

①放空串，类型不对

②放空json对象，返回了类型并显示到了输入框

③放空数组，成功

总结：处理null的情况

【我的笔记.html】

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
    textarea{
      resize: none;
    }
</style>
</head>
<body ng-app="noteapp" ng-controller="notecontroller">

<h2>我的笔记</h2>
<textarea cols="30" rows="10" ng-model="message"></textarea>
<div>
<button ng-click="save()">保存</button>
<button ng-click="read()">读取</button>
<button ng-click="delete()">删除</button>
</div>
<p>剩余字数：{{getcount()}}</p>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

【app.js】

angular.module('noteapp', [])
    .controller('notecontroller', function ($scope) {
        //console.log($scope.message);
        $scope.message = '';
        //定义获取剩余字数的方法
        $scope.getcount = function () {
            //判断输入数据的长度
            if(this.message.length > 100){
                $scope.message = $scope.message.slice(0, 100);
            }
            //返回剩余字数的个数
            return 100 - $scope.message.length;
        };
        //定义保存的方法
        $scope.save = function () {
            alert('note is saved');
            //将数据保存到sessionstorage中
            sessionstorage.setitem('note_key', json.stringify($scope.message));
            //将输入内容清空
            $scope.message = '';
        };
        //定义读取的方法
        $scope.read = function () {
            $scope.message = json.parse(sessionstorage.getitem('note_key') || '[]');//对读取null做了处理
        };
        // 定义删除的方法
        $scope.delete = function () {
            $scope.message = '';
        };
    });

练习2

unshift（）返回的是新数组的length

相邻的后边的删不掉，

①递归解决，不推荐

②逆向思维，保存未选中的到新数组

【demo.html】

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body ng-app="todoapp" >
<div ng-controller="todocontrol">
    <h2>我的备忘录</h2>
    <div>
        <input type="text" ng-model="newtodo">
        <button ng-click="add()">新增</button>
    </div>
    <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.ischecked">
        <span>{{todo.todo}}</span>
    </div>
    <button ng-click="delete()">删除选中的记录</button>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

【app.js】

angular.module('todoapp', [])
.controller('todocontrol', function ($scope) {
//初始化数据
$scope.todos = [
   {todo : '吃饭', ischecked : false},
   {todo : '睡觉', ischecked : false},
   {todo : '打豆豆', ischecked : false}
];
//定义添加todo的方法
$scope.add = function () {
   //判断添加的内容是否为空
   if(!$scope.newtodo){
    alert('输入的内容不能空');
    return
   }
   // 组合新的todo对象
   var todo = {
    todo : $scope.newtodo,
    ischecked : false
   };
   // 将新的对象添加到todos中
   $scope.todos.unshift(todo);
   //添加完将输入的内容清空
   $scope.newtodo = '';
};
//定义删除 todo 的方法
$scope.delete = function () {
   //将$scope.todo的数据暂时保存
   var oldtodo = $scope.todos;
   //将$scope.todos的数据清空
   $scope.todos = [];
   //进行遍历
   oldtodo.foreach(function (item, index) {
    //将没被选中的todo添加到 $scope.todos 数组中
    if(!item.ischecked){
     $scope.todos.push(item);
    }
   });
}
});

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

Angular入门笔记

2019年09月08日 | 移动技术网IT编程 | 我要评论