Angular入门笔记

程序员文章站 2022-06-20 18:43:10

自己总结的尚硅谷Angular课程笔记 1.入门介绍 1.1AngularJS是什么？ jQuery是js函数库 Angular是Google开源的JS结构化框架官网：https://angularjs.org/ 1.1.1AngularJS特性和优点耦合度越低越好，避免牵一发而动全身的事情发生 ......

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

1.入门介绍

1.1angularjs是什么？

jquery是js函数库

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

官网：

1.1.1angularjs特性和优点

Angular入门笔记

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

1.1.2与jquery比较

Angular入门笔记

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

1.1.3angularjs能做什么项目

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

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

特点：

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

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

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

2）

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

Angular入门笔记

没有使用angular会提示

Angular入门笔记

1.1.4关于版本的问题

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

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

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

1.2开发第一个angularjs应用

1.2.1例子

实现效果：

Angular入门笔记

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应用

Angular入门笔记

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是双向数据绑定, 而{{}}是单向数据绑定

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

例子：

Angular入门笔记

表达式只能用来显示，不能操作，需要操作的地方就要使用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理解双向数据绑定

Angular入门笔记

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入门笔记

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入门笔记

- 也是一个对象

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

- 通过模块添加控制器：

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

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

- 核心模块： angular.js

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

Angular入门笔记

<!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表达式

Angular入门笔记

- {{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

Angular入门笔记

<!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>

Angular入门笔记

隔行换色

Angular入门笔记

<!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

Angular入门笔记

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

①放空串，类型不对

②放空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

Angular入门笔记

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);
    }
   });
}
});

上一篇： LCD显示器《十万个为什么》问题

下一篇：炖肉放什么调料出香味

Angular入门笔记

1.入门介绍

1.1angularjs是什么？

1.1.1angularjs特性和优点

1.1.2与jquery比较

1.1.3angularjs能做什么项目

1.1.4关于版本的问题

1.2开发第一个angularjs应用

1.2.1例子

1）jquery实现

2）angularjs实现

3）理解第一个angularjs应用

1.2.2webstorm设置

1.2.3引入angularjs

1.2.4使用angularjs

2.四个重要概念

2.1双向数据绑定

2.1.1数据绑定

2.1.2双向数据绑定

2.1.3 ng-init

2.1.4理解双向数据绑定

2.2依赖注入（di，dependency injection）

2.3 mvc模式

2.4 m-v-vm模式

3.三个重要对象

3.1作用域(scope)

3.2控制器(controller)

3.3作用域与控制器

3.3模块(module)

4.两个页面语法

4.1表达式

4.2指令

4.3过滤器

5.练习

练习1

练习2

MySQL5.7.14下载安装图文教程及MySQL数据库语句入门大全

Spring Framework 5.0 入门教程

c#入门之枚举和结构体使用详解(控制台接收字符串以相反的方向输出)

Android开发笔记之图片缓存、手势及OOM分析

超详细的Spring Boot入门笔记（总结）

三十分钟MySQL快速入门(图解)

java设计模式笔记之装饰模式

Python 爬虫学习笔记之正则表达式

Python 爬虫学习笔记之多线程爬虫

Python 爬虫学习笔记之单线程爬虫