会员登录 - 用户注册 - 设为首页 - 加入收藏 - 网站地图 如何对自己尚不熟悉AngularJS的情况下对代码进行调试!

如何对自己尚不熟悉AngularJS的情况下对代码进行调试

时间:2025-11-05 11:40:43 来源:益强数据堂 作者:系统运维 阅读:657次

【.com快译】如果大家对AngularJS还不熟悉,何对那么可能会在初步创建Web应用时对很多问题感到担心。自己而且尽管这可能已经是尚不熟悉我们所能用到的上手难度***的Web开发框架之一,但大家仍然需要了解一部分重要技巧,的代码调试从而更为轻松地搞定适应过程。情况另外,下对即使是进行技术水平***的Web开发人员也都拥有相当长的AngularJS使用经验。然而,何对只要我们顺利掌握了这些技巧与技能,自己大家完全能够以尽可能简单的尚不熟悉方式打造出自己***实用性与卓越性的Web应用。

我们首先要做的的代码调试就是投入时间来学习这些技能与技巧,并最终将其无缝化接入我们的情况实际使用。下面就一起来了解该如何踏出***步:

学习并理解与scope相关的下对一切

这一点之所以如此重要,是进行因为Angular.js当中的一切都是围绕着scope所展开。在使用指令与控制器时,何对Angular.js会创建一套scope结构。我们需要学习如何隔离scope以及特定位置的亿华云计算scope值。大家可以利用.scope方法来访问Angular.js当中每个元素的scope。Angular.js scope其实非常有趣,但前提是大家已经透彻理解了关于它的一切。

下面来看一些非常实用的scope技巧:

 $($0).scope() 这段代码可以帮助大家轻松查看与特定元素相关联的scope及其全部属性。 继承自父scope的属性将不会显示,但如果大家需要查看,则可以随时输入其名称。 要搜索父scope的各属性,使用$($0).scope().$parent代码。 $($0).scope().$root这段代码旨在查看root代码的各属性。 如果大家已经以隔离scope的方式高亮一条指令,则可以利用$($0).isolateScope()查看其属性。 如果我们在某隔离scope内高亮某项元素,则可利用$($0).scope()代码显示哪些可用。

关于scope的一切表面上看似乎都不容易理解,不过其实际难度并不高。大家只需要深入掌握其中的几项要点。而且如果大家在面对特定需求时不知道该怎么做,那么多加尝试绝对没有坏处。通过这种方式,我们能够轻松了解何时该进行怎样的源码下载操作,那么整个开发过程也将变得更加简单。

轻松使用Breakpoint

console.log或者调试器可以算是使用说明,其能够帮助我们对JavaScript代码进行随时调试。它们非常实用,但并不是必须使用。在这类场景下,大家必须了解关于breakpoint的一切——目前每一款主流浏览器的检查工具中都有提供。

 在breakpoint的帮助下,大家将无需查阅整个循环即可找到自己需要的位置。

检查变量来自何处

创建并使用一款利用Angular.js编写而成的Web应用非常简单,但该应用可能随着时间推移而需要持续演进。在这种情况下,我们可能很难明确了解模板中的某些变量到底来自何处。如果仅仅是某隔离scope当中的一条指令,那么大家肯定能够轻松找到答案。但在面对着复杂的指令与控制器结构时,我们无疑需要更聪明的方式来追踪变量来源。

下面是具体实际方式:

找到使用该变量的元素,香港云服务器而后检查其scope。 检查其值,例如利用$($0).scope().foo代码,其中属性被称为“foo”。 如果其值已经被定义,大家即可据此得出答案,因为该属性肯定是来自定义层的控制器或者指令。而如果该值尚未被定义,则可以尝试DOM中的其它层。只需重复这一过程,答案最终必能显现。

弄清某些元素为何不会显示出来

有时候,大家会发现自己的使用ng-if、ng-switch或者ng-views进行搜索或者检查时,某些元素不会被显示出来。这是因为此类指令会以状态或者自身所使用路径为基础从DOM处整体添加或者移除其内容。只要使用ng-show即可解决问题,其能够通过隐藏是否可见的方式对这些元素进行显示与隐藏。

在Angular.js当中,注释将与元素保持在同一位置。

找寻控制器以处理页面中的特定部分

很多朋友肯定绝对这项任务无甚难度,但必须强调的是,相当一部分开发人员早已将其忘在脑后。要想找到负责处理页面内特定部分的控制器,DOM当中的ng-controller属性将能够帮上大忙。

对很多人来说,从一套规模庞大的HTML页面当中找寻属性绝非易事。不过这其中是有简便方法的; 点击对象元素,而后运行$($0).attr(‘ng-controller’)。如果没有返回任何结果,那么我们需要点击父scope并再试一次。

jQuery在这方面也有着重要作用,要想找到与当前位置距离很近的某控制器,大家可以使用以下代码:

$($0).closest(‘[ng-controller]’).attr(‘ng-controller’)

理解digest周期

$digest在Angular.js当中负责触发变更。如果没有特定代理或者对象制定程序,Angular.js将不会在各对象的属性发生变更时接收由其发出的通知内容。有鉴于此,digest周期的作用是检查各观察程序并表达其任何变更。也就是说,在运行digest的条件下,Angular.js将随时了解当前发生的事件。

而一旦发生了某些Angular.js未能识别到的事件,例如一条控制台指令,那么接下来什么都不会发生,Angular也不会自动启动digest。在这时,大家必须手动执行digest,从而获得相关更新。

与任何其它编程语言一样,Angular.js在使用过程中还有有点难度的。但只要能够掌握其中的技巧与窍门,那么这种难题绝不会持续太久,而这一点对于每一位下定决心打算学习Angular.js并利用其进行应用程序开发的朋友而言都非常重要。

原文标题:How to Debug Unfamiliar AngularJS Code

【译稿,合作站点转载请注明原文译者和出处为.com】

(责任编辑:IT科技类资讯)

最新内容
推荐内容
  • 一、文件/文件夹管理 cd .. 回当前目录的上一级目录 mv 路经/文件 /经/文件移动相对路经下的文件到绝对路经下 二、系统管理 fdisk fdisk -l 查看系统分区信息 Useradd 创建一个新的用户 service [servicename] start/stop/restart 系统服务控制操作 uname -a 查看内核版本 reboot Init 6 重启LINUX系统 三、打包/解压 tar -c 创建包 –x 释放包 -v 显示命令过程 –z 代表压缩包 四、make编译 make 编译 五、apt命令 apt-cache search package 搜索包 查看软件xxx安装内容 查找软件 查询软件xxx依赖哪些包 查询软件xxx被哪些包依赖 增加一个光盘源 系统升级 清除所以删除包的残余配置文件 编译时缺少h文件的自动处理 查看安装软件时下载包的临时存放目录 备份当前系统安装的所有包的列表 从上面备份的安装包的列表文件恢复所有包 清理旧版本的软件缓存 清理所有软件缓存 删除系统不再使用的孤立软件 查看包在服务器上面的地址 系统 查看Ubuntu版本 查看内核加载的模块 查看PCI设备 查看USB设备 查看网卡状态 查看CPU信息 显示当前硬件信息 硬盘 查看IDE硬盘信息 查看STAT硬盘信息 查看硬盘剩余空间 查看目录占用空间 优盘没法卸载 内存 进程 强制中止一个进程(在上面进程中止不成功的时候使用) 图形方式中止一个程序 查看当前进程的实时状况 查看进程打开的文件 ADSL 配置 ADSL ADSL手工拨号 激活 ADSL 断开 ADSL 查看拨号日志 如何设置动态域名 网络 查看当前IP地址 查看当前外网的IP地址 查看当前监听80端口的程序 查看当前网卡的物理地址 立即让网络支持nat 查看路由信息 手工增加删除一条路由 修改网卡MAC地址的方法 统计当前IP连接的个数 统计当前20000个IP包中大于100个IP包的IP地址 屏蔽IPV6 服务 删除一个服务 临时重启一个服务 临时关闭一个服务 临时启动一个服务 设置 修改用户资料 给apt设置代理 修改系统登录信息 中文 批量转换src目录下的所有文件内容由GBK到UTF8 转换文件内容由GBK到UTF8 转换 mp3 标签编码 控制台下显示中文 文件 查看文件类型 显示xxx文件倒数6行的内容 让tail不停地读地最新的内容 查看文件中间的第五行(含)到第10行(含)的内容 查找包含xxx字符串的文件 全盘搜索文件(桌面可视化) 查找关于xxx的命令 通过ssh传输文件 查看某个文件被哪些应用程序读写 把所有文件的后辍由rm改为rmvb 把所有文件名中的大写改为小写 删除特殊文件名的文件,如文件名:–help.txt 查看当前目录的子目录 将当前目录下最近30天访问过的文件移动到上级back目录 将当前目录下最近2小时到8小时之内的文件显示出来 删除修改时间在30天之前的所有文件 查找guest用户的以avi或者rm结尾的文件并删除掉 查找的不以java和xml结尾,并7天没有使用的文件删除掉 统计当前文件个数 统计当前目录个数 显示当前目录下2006-01-01的文件名 FTP filezilla无法列出中文目录? 本地中文界面 解压缩 解压缩 xxx.tar.bz2 压缩aaa bbb目录为xxx.tar.gz 压缩aaa bbb目录为xxx.tar.bz2 解压缩 RAR 文件 Nautilus 显示地址栏 特殊 URI 地址 查看已安装字体 程序 日期和时间 设置日期 设置时间 将时间写入CMOS 读取CMOS时间 从服务器上同步时间 控制台 不同控制台间切换 指定控制台切换 控制台下滚屏 控制台抓图 数据库 从mysql中导出和导入数据 忘了mysql的root口令怎么办 修改mysql的root口令 其它 如何删除Totem电影播放机的播放历史记录 如何更换gnome程序的快捷键 vim 如何显示彩色字符 如何在命令行删除在会话设置的启动程序 如何提高wine的反应速度 #chgrp #chmod #chown Ubuntu命令行下修改网络配置 2. 为网卡配置静态IP地址 用下面的命令使网络设置生效: 3. 设定第二个IP地址(虚拟IP地址) 4. 设置主机名称(hostname) 5. 配置DNS 安装AMP服务 修改 MySql 密码 apache2的操作命令 Ubuntu 7.10 更换软件源、更新系统 # Ubuntu.cn99.com 更新服务器(江苏省常州市电信,推荐电信用户使用。) 这样便更新以及升级了系统。 桌面汉化: 安装解码器、flashplayer、java虚拟机、微软字体 FireFox 中安装 FlashPlayer 插件 回答(y/n/q)  n/q 安装媒体播放器 另外需要一个w32codecs文件,是用来支持那些私有媒体格式的解码器,源里已经没有w32codecs了,我们可以从这里下载那个后缀为.deb的安装 mplayer调试(视频、字幕) 安装下载工具(多线程下载、BT下载、电驴) 字体更换 apt下载的deb包清理 安装rar压缩、解压工具 启用root(最高权限)帐户 安装QQ 显卡驱动安装 beryl的安装 如何设定/改变/启用 root 使用者的密码  为了启用 root 帐号 (也就是 设置一个口令) 使用: 当你使用完毕后屏蔽 root 帐号 使用: 如何在终端机模式下切换到 root 身份  安装VNC server 安装MS字体 vim配置 2) vim中文在线帮助 3) 启用本地配置 VIM version 7.1 (说明文档)   history文件中需要记录的行数  在处理未保存或只读文件的时候,弹出确认  与windows共享剪贴板  侦测文件类型  载入文件类型插件  为特定文件类型载入相关缩进文件  保存全局变量  带有如下符号的单词不要被换行分割  语法高亮  高亮字符,让其不受100列限制  状态行颜色 “  不要生成swap文件,当buffer被丢弃的时候隐藏它  字符间插入的像素行数目  增强模式中的命令行自动完成操作  在状态行上显示光标所在位置的行号和列号  命令行(在状态行下)的高度,默认为1,这里是2  使回格键(backspace)正常处理indent, eol, start等  允许backspace和光标键跨越行边界  可以在buffer的任何地方使用鼠标(类似office中在工作区双击鼠标定位)  启动的时候不显示那个援助索马里儿童的提示  通过使用: commands命令,告诉我们文件的哪一行被改变过  不让vim发出讨厌的滴滴声  在被分割的窗口间显示空白,便于阅读 “  匹配括号高亮的时间(单位是十分之一秒)  在搜索的时候忽略大小写  不要高亮被搜索的句子(phrases)  在搜索时,输入的词句的逐字符高亮(类似firefox的搜索)  输入:set list命令是应该显示些啥?  光标移动到buffer的顶部和底部时保持3行距离  不要闪烁  我的状态行显示的内容(包括文件类型和解码)  总是显示状态行 “  继承前一行的缩进方式,特别适用于多行注释  为C程序提供自动缩进  使用C样式的缩进  制表符为4  统一缩进为4  不要用空格代替制表符  不要换行  在行和段开始处使用制表符 “  在右侧显示窗口  压缩方式  假如只有一个buffer,kill窗口也kill掉buffer  不要关闭其他文件的tags  不要显示折叠树 “ if has(autocmd) autocmd FileType xml,html,c,cs,java,perl,shell,bash,cpp,python,vim,php,ruby set number autocmd FileType xml,html vmap
  • 富士康H55主板的性能与特点(了解富士康H55主板的一流技术与卓越性能)
  • 探究笔记本显卡126的性能表现(解析显卡126的关键特点及优势)
  • EOSM10相机的卓越表现与优点(探索EOSM10相机的画质、便携性和易用性)
  • 1.到QQ官方网站下载文件。64位的要下载tar.gz包2.直接解压就可使用。3.界面简洁。
  • 净水之家净水器(让家庭饮水更健康,净水之家净水器是您的最佳选择)
热点内容