【JS-task10】

前端如歌部署代码?

分享人:火建强

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在平时的编码中,我们总会想着有什么方法能够简化我们的工作流程,让我们只专心于业务逻辑和数据的处理,而angularjs 就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法,今天着重跟大家讨论一下这 几个方法

2.知识剖析

$scope

$scope在angularjs中,你可以把它理解成作用域,每个不同的controller,都具有它不同的作用域,所以controller不同,他们的scope是不同的。 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:{{carname}}

var app =angular.module('myApp', []);
                    app.controller('myCtrl',function($scope) {
                    $scope.carname ="Volvo";
                    });
当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。 视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。 如果我们想象js那样,做一个全局变量该怎么办呢?这就要说 到rootScope了。

$rootScope

$rootScope就相当于一个全局作用域,所以我们保存在其中的东西是全局性的,在任一controller之中都能够使用 scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。 用rootscope定义的值,可以在各个controller中使用。

$watch

相信使用过angularjs的同学都知道,ng中有个比较重要的特点,叫做双向绑定,那么这个双向绑定是如何实现的呢?

前端如何部署代码?

分享人:火建强

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

日历在网页中的应用有很多,比如说后台的搜索功能,备忘录功能等等。要实现日历功能,有很多插件可以实现, 利用angular实现相关的日历功能的插件也就只有几个,比如说ui-jquery,angular-datepicker,ui-bootstrap等等, 这些都可以实现部分功能的日历插件;但是说到好用的话,我个人觉得还是angular-datepicker要好用一些, 因为这个插件的demo简单易懂,很多种情况都考虑到了,比如说时区、设定日历的最大最小值,日期格式, 起始时间和终止时间,都有相对应的demo,这样就更加直观,清晰易懂。

2.知识剖析

在这个日历插件中,有以下相关属性。

1.时区:一般都是用date-picker timezone属性来表示;timezone有以下值'Europe/London','Asia/Hong_Kong','America/Vancouver'

2.日期格式date-time format属性,格式可以自行设定,插件属性值有 "MMMM YYYY", "DD MMM YYYY", "ddd MMM DD YYYY", "D MMM YYYY HH:mm", "lll",

3.date-time min-date,max-date属性:用于表示最大日期和最小日期;

4.view:日期/时间的默认选择级别;属性值有year、month、date、hours、minutes

3.常见问题

如何实现设置开始日期和结束日期


4.解决方案

5.编码实战

6.扩展思考

如何修改日历的样式,比如说把英文(默认)修改为中文日历?

这时候就需要使用webstorm的全局查找功能了(不要使用cdn加载js文件,否则会出现找不到的情况,也就无法修改样式), 通过全局查找找到相关单词之后,然后修改成中文就行了

7.参考文献

来源: github g00fy- / angular- datepicker

8.更多讨论

讨论时间到,欢迎大家提问!
你们还用过哪些angular日历插件?

鸣谢

感谢大家观看

By 火建强

当我们在创建出scope下的一个新属性的时候,ng就会主动为我们新属性加上$watch这个方法,这个方法会监听我们 的数据变化,当数据变化之后,就立即把view和scope上数据同步。 $watch(watchExpression, listener, objectEquality); watchExpression,需要监控的表达式 function(newValue,oldValue, scope) objectEquality,是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

$state

在ajax技术发展普及之后,因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点,一个新技术应运而生:路由,$state就是路由中的一项服务。

3.常见问题

Angular这个框架要怎么去学习

4.解决方案

如果你写惯了jQuery手工操作DOM的代码, 刚开始的时候会对angular的代码风格非常不适应。 angular对于js基础不够好的新手确实比较困难,尽量多想一想directive,provider,filter是什么,想通了就知道angular是什么,该怎么写了,在这之前建议花几天时间把js基础先看一遍 简单说就是要先去理解他的原理,工作机制,想一想为什么会有这个东西,怎么工作

5.编码实战

6.拓展思考

$http是什么?怎么用? $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

7.参考文献

参考1:angularJS中的$watch方法监听作用域
参考2:AngularJS Scope(作用域)

8.更多讨论

感谢大家观看

BY : 火建强