您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

　　第一天，简单了解了其中中一些基本概念

　　1、angularjs的解释

　　　　angularjs是Google旗下的一个前端js框架，其与html、css、js配合使用，从而使得web开发更加的简单快捷。

　　　　angularjs有4大特性：MVC、模块化、指令系统、双向数据绑定。在学习过程中也是围绕这几点进行系统的学习。

　　2、angularjs创建一个页面的简单特性

　　　　a.首先要引用angularjs类库

　　　　b.在html页面要标注ng-app属性，该标注表示所在范围内的DOM结构才收angularjs所控制

　　　　c.数据绑定模块的默认格式为{{参数名称}}，当然这个格式是可以自定义设置的

　　　　d.第DOM标签添加angular属性时，都是以ng-开始

　　　　e.angular框架中数据模型数据的变更会动态的绑定显示到view中

　　　　f.angular框架外的js修改数据模型的变化不会动态的绑定显示到view中，需要借助$apply手动更新

　　　　f.Scope提供$watch方法监视Model的变化

　　　　g.Scope提供$apply方法传播Model的变化

　　3、创建一个简单angularjs页面实现数据绑定

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp">

    <div ng-controller="myContro">

        <div>名字：<input type="text" ng-model="name" placeholder="请输入姓名" /></div>

        <div>你输入的姓名为：【{{name}}】请核对</div>

        <div ng-click="clear()">清空输入</div>

    </div>

</body>

</html>

<script src="../Scripts/angular.js"></script>

<script type="text/javascript">

    var myApp = angular.module("myApp", []);

    myApp.controller("myContro", function ($scope) {

        //// 清空输入函数

        $scope.clear = function () {

            $scope.name = "";

        }

        //// 2s后直接给name赋值，但是试图不会实时更新

        setTimeout(function () {

                $scope.name = "开始输入";

        }, 2000);

        //// 10s后给name赋值，并手动

        setTimeout(function () {

            $scope.$apply(function () {

                $scope.name = "输入结束";

            });

        }, 10000);

        //// $watch监控模型name中字的改变

        $scope.$watch("name", function (newValue, oldValue) {

            if (newValue != oldValue) {

                console.log("name值又发生了改变：改变前的值：【" + oldValue + "】、改变后的值【" + newValue + "】");

            }

        });

    });

</script>

　　4、模块

　　　　为了代码的高效，整洁，提高代码的可重用性、可读性，angular引入了模块的概念module,简单的里面，模块就是讲页面代码分割成不同的独立模块。

　　　　一个应用可以包含多个模块，各个模块包含其核心的逻辑代码，不同模块间相互独立。一个ng-app代表一个模块。

　　　　AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数， 第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。 angular.module('myApp', []);

　　5、作用域

　　　　angular作用域是其最主要核心特征之一，通过$scope来表示。作用如下：

　　　　　　a.应用的作用域是和应用的数据模型相关联的

　　　　　　b.同时作用域也是表达式执行的上下文。

　　　　　　c.$scope 对象是定义应用业务逻辑、控制器方法和视图属性的地方。

　　　　　　d.作用域是视图和控制器之间的胶水

　　　　　　e.$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

　　　　　　g.$scope也有父子级之分，和面向对象的类的继承一样，子级的$scope继承父级的$scope,其中跟$scope表示为：$rootScope

　　　　　　h.提供观察者以监视数据模型的变化

　　　　　　i.可以将数据模型的变化通知给整个应用，甚至是系统外的组件

　　　　　　j.可以进行嵌套，隔离业务功能和数据

　　　　　　k.给表达式提供运算时所需的执行环境

　　6、控制器

　　　　控制器的关键词为ng-controller,其作用还是讲页面逻辑根据功能模块分割中更小模块。

　　　　控制器是可以嵌套的，作用域也是嵌套的

　　　　定义使用方式如下：

　　　　var app = angular.module('模块名称', []);

　　　　app.controller('控制器名称', function($scope) {

　　　　　　控制器内的业务逻辑代码...

　　　　 });

　　　7、表达式

　　　　angular的表达式主要学习两个表达式：解析达式，关键词（ $parse）、插值字符串表达式，关键词（ $interpolate）

　　　　a.解析达式，关键词（ $parse），其结果是一个函数，也就是执行一个逻辑运算表达式

　　　　特征：解析异常不会抛出异常

　　　　代码实例：

　　　　　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        表达式：<input type="text" ng-model="expression" placeholder="请输入表达式"/>

    </div>

    <div>

        <input type="button" value="开始运算" ng-click="calculat()"/>

    </div>

    <div>表达式运算结果：{{reult}}</div>

</body>

</html>

<script src="../Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope, $parse) {

        $scope.expression = "";

        $scope.reult = "";

        $scope.calculat = function () {

            $scope.reult = $parse($scope.expression)($scope);

        }

    });

</script>

　　　　b.插值字符串表达式，关键词（ $interpolate）

　　　　　　简单理解就是格式化字符串，通过{{站位字符串名称}}对字符串解析站位，然后通过关键词$interpolate返回的函数对站位字符串名称赋值，得到最终的字符串。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        表达式：<input type="text" ng-model="name" placeholder="请输入名称" />

    </div>

    <div>

        <input type="text"  multiple="" ng-model="textValue"/>

    </div>

    <div>预览：{{reviewReult}}</div>

</body>

</html>

<script src="../Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope, $interpolate) {

        $scope.name = "";

        $scope.textValue = "";

        $scope.reviewReult = "";

        $scope.reviewReultTemp = "{{name}},您好,{{textValue}}";

        var template = $interpolate($scope.reviewReultTemp);

        $scope.$watch("name", function (newValue, oldValue, ) {

            if (newValue != oldValue) {

                $scope.reviewReult = template({ name: $scope.name, textValue: $scope.textValue});

            }

        });

    });

</script>

今天就到此为止，明天我们继续，加油！

angularjs学习第一天笔记的更多相关文章

  1. Elasticsearch7.X 入门学习第一课笔记----基本概念

    原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...

  2. AngularJS学习第一课

    AngularJS2与AngularJS1有很大的不同. AngularJS2支持ECMAScript6,为了提升性能,支持移动化开发(安卓.ios平台),因此升级为AngularJS 2,Angul ...

  3. html学习第一天笔记

    语义化,让你的网页更好的被搜索引擎理解在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认 ...

  4. iOS阶段学习第一天笔记（Mac终端的操作）

    前言部分 原本从事的是.NET开发,一直在要不要转iOS 中犹豫徘徊,经过复杂的内心挣扎终于鼓起勇气辞职脱产学习iOS;希望通过四个月的 学习后能够拿到理想的薪资.以下是学习过程中的学习笔记,为了方便 ...

  5. AngularJs学习第一课 Hello World

    首先先介绍一下:AngularJS是干什么的. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了 ...

  6. angularjs学习第八天笔记（指令作用域研究）

    您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...

  7. angularjs学习第二天笔记---过滤器

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  8. html学习第一天笔记——第七章节

    第7章 CSS样式基本知识<span style="color:blue"> </span>嵌入式css样式,写在当前的文件中[**********]嵌入式 ...

  9. html学习第一天笔记——第六章节

    <input type="reset" value="重置"> 使用重置按钮,重置表单信息<input type="submit&q ...

随机推荐

  1. .Net桌面程序自动更新NAppUpdate

    自动更新介绍 我们做了程序,不免会有版本升级,这就需要程序有自动版本升级的功能.应用程序自动更新是由客户端应用程序自身负责从一个已知服务器下载并安装更新,用户唯一需要进行干预的是决定是否愿意现在或以后 ...

  2. 【文文殿下】P3737 [HAOI2014]遥感监测

    题解 显然可以把每个观测点,认为是x轴上的一段区间.问题就转换为了:对于x轴上的若干个区间,选取尽可能少的点,使得所有区间都有至少一个点. 这是一个相当经典的贪心问题. 代码如下: #include& ...

  3. Bs4 BeautifulSoup取值

    原文网址:https://blog.csdn.net/u010244522/article/details/79627073 从网页获取HTML数据后,获取对应标签.属性的值 取值方法主要有以下几种: ...

  4. springboot常用注解

    @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration注解.其中@ComponentScan让 ...

  5. Power Designer将表字段注释转换为模型

    选择工具——Execute Commands——Edit /Run Script 将代码粘贴到此处,然后执行.即成功加入注释 Option Explicit ValidationMode = True ...

  6. 微信小程序实现给循环列表点击添加类（单项和多项）

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  7. Python（27）--文件相关处理的应用（增、删、改、查）

    文件名为message,文件内容如下: global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 info default ...

  8. js缓存问题，修改js后代码不生效

    问题描述 最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因 如果在用户之前 ...

  9. ajex 相关参数

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  10. HuLu机器学习问题与解答系列(1-8)

    声明:本系列文章转载自微信公众号HULU,本人只是搬运工,仅供学习,如有不妥,后续告知删除. 嗨,欢迎回来,希望你能保持定期回顾的好习惯噢!下面是Hulu机器学习问题与解答系列的前8篇内容,点击主题名 ...