[前端]AngularJS 簡易物件修改入門
各位好,今天要來介紹如何簡單的修改網站上AngularJS相關Application的內容
進而做到某些效果。(警告!所有的Web Application都應該在後端加上相關驗證)
透過本篇你可以簡單的了解到以下
1.如何查找相關的ng物件
2.如何利用ng.element與ng.injector來修改目標內容
我們會用到Firefox上知名的Firebug套件與一個AngScope用來方便我們直接瀏覽網站上AngularJS的結構
請記得要安裝
接下來就是實際拿一個網站做為對象,
首先可以看到這個網站在密碼的欄位上有加上了長度的限制
接下來我們就要試著調整一下這個限制,從下圖可以看到透過AngScope看到Application相關的資訊
當然我們也看到了疑似跟密碼驗證相關的參數設定
當然這時候我們就來調整看看 (當然結果是可行的) 下面是簡單利用firebug與AngScope來進行修改
接下來就先介紹如何利用ng.element來進行修改
文件:https://docs.angularjs.org/api/ng/function/angular.element
透過官網的介紹後可以知道angular.element是讓ng能用類似jQuery方式來來簡單操作DOM
但實際上除了操作DOM之外,還可以利用這個指令取得該Element上的$Scope物件 (常寫ng的同學應該對這個物件不陌生),以下就是示範我如何取得$Scope物件後,一樣進行剛剛驗證規則的修改
最後就是重頭戲injector了
https://code.angularjs.org/1.5.6/docs/api/ng/function/angular.injector
injector非常方便,除了可以取到我們常用的$Scope之外,還可以進行相關套件的注入,就像你一開始在寫Angular時的var app = angular.module('Oberto', ['ngMaterial', 'ngSanitize']) 一樣 .
下面展示了我如何利用injector獲取了這個網站用到的ng其中一個服務angularFileUpload
angular.injector甚至還可以直接bind像{{expression}} 的結構在頁面上 , 是不是十分好用呢
[前端]AngularJS 簡易物件修改入門的更多相关文章
- Delphi APP 開發入門(三)簡易計算機
Delphi APP 開發入門(三)簡易計算機 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數:68 ...
- Delphi APP 開發入門(四)簡易手電筒
Delphi APP 開發入門(四)簡易手電筒 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數:32 ...
- Delphi APP 開發入門(五)GPS 定位功能
Delphi APP 開發入門(五)GPS 定位功能 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數 ...
- GOOGLE搜索從入門到精通V4.0
1,前言2,摘要3,如何使用本文4,Google簡介5,搜索入門6,初階搜索 6.1,搜索結果要求包含兩個及兩個以上關鍵字 6.2,搜索結果要求不包含某些特定資訊 6.3,搜索結果至少包含多個關鍵字中 ...
- 依賴注入入門——Unity(二)
參考博客文章http://www.cnblogs.com/kebixisimba/category/130432.html http://www.cnblogs.com/qqlin/tag/Unity ...
- 前端angularjs+requirejs+dhtmlx 后端asp.net webapi
享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi 一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...
- Flask從入門到入土(三)——模板
模板是一個包含響應文本的文件,其中包含佔位變量表示的動態部分,其具體值只是請求上下文中才能知道.使用真實值替換變量,再返回最終得到的響應字符串,這一過程稱爲渲染.爲了渲染模板,Flask使用了一個名爲 ...
- Windows PowerShell 入門(3)-スクリプト編
これまでの記事 Windows PowerShell 入門(1)-基本操作編 Windows PowerShell 入門(2)-基本操作編 2 対象読者 Windows PowerShellでコマンド ...
- Windows PowerShell 入門(2)-基本操作編 2
前回に引き続きMicrosoftが提供している新しいシェル.Windows Power Shellの基本操作方法を学びます.基本操作編第2弾の今回は.パイプの使用方法を中心としたコマンドレットの操作方 ...
随机推荐
- Nginx如何进行配置优化?
在日常工作的时候,搭建配置Nginx的时候,我们都会做相应的优化,那一般需要做的配置优化有哪些呢?可能有些小伙伴一听到要进行优化,内心难免有些慌. 今天咱们聊聊Nginx进行常规配置优化,这里需要注意 ...
- [LeetCode] New 21 Game 新二十一点游戏
Alice plays the following game, loosely based on the card game "21". Alice starts with 0 p ...
- R语言S3类的理解与构建
R语言类 R语言的类有S3类和S4类,S3类用的比较广,创建简单粗糙但是灵活,而S4类比较精细,具有跟C++一样严格的结构.这里我们主要讲S3类. S3类的结构 S3类内部是一个list,append ...
- aarch64的架构:unrecognized command line option '-mfpu=neon'
不用添加这个'-mfpu=neon'的编译器选项了,因为这个架构下neon是默认启动的. 参考: https://lists.linaro.org/pipermail/linaro-toolchain ...
- unittest中的测试固件
运行下面的两段代码,看看有什么不同? 第一段: import unittest from selenium import webdriver class F2(unittest.TestCase): ...
- 阿里面试题,深入理解Java类加载机制
类的生命周期 包括以下 7 个阶段: 加载(Loading) 验证(Verification) 准备(Preparation) 解析(Resolution) 初始化(Initialization) 使 ...
- MYSQL手册
原文出处:http://www.cnblogs.com/gaofei-1/p/7152875.html MySQL配置文件 MySQL软件使用的配置文件名为my.ini,在安装目录下. MySQL常用 ...
- HTTP 400 错误 - 请求无效 (Bad request)
在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里: 原因:1)前端提交数据的字段名称或者是字段类型和 ...
- [Swift]LeetCode42. 接雨水 | Trapping Rain Water
Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...
- [Swift]LeetCode132. 分割回文串 II | Palindrome Partitioning II
Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...