各位好,今天要來介紹如何簡單的修改網站上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 簡易物件修改入門的更多相关文章

  1. Delphi APP 開發入門(三)簡易計算機

    Delphi APP 開發入門(三)簡易計算機 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數:68 ...

  2. Delphi APP 開發入門(四)簡易手電筒

    Delphi APP 開發入門(四)簡易手電筒 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數:32 ...

  3. Delphi APP 開發入門(五)GPS 定位功能

    Delphi APP 開發入門(五)GPS 定位功能 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數 ...

  4. GOOGLE搜索從入門到精通V4.0

    1,前言2,摘要3,如何使用本文4,Google簡介5,搜索入門6,初階搜索 6.1,搜索結果要求包含兩個及兩個以上關鍵字 6.2,搜索結果要求不包含某些特定資訊 6.3,搜索結果至少包含多個關鍵字中 ...

  5. 依賴注入入門——Unity(二)

    參考博客文章http://www.cnblogs.com/kebixisimba/category/130432.html http://www.cnblogs.com/qqlin/tag/Unity ...

  6. 前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi   一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...

  7. Flask從入門到入土(三)——模板

    模板是一個包含響應文本的文件,其中包含佔位變量表示的動態部分,其具體值只是請求上下文中才能知道.使用真實值替換變量,再返回最終得到的響應字符串,這一過程稱爲渲染.爲了渲染模板,Flask使用了一個名爲 ...

  8. Windows PowerShell 入門(3)-スクリプト編

    これまでの記事 Windows PowerShell 入門(1)-基本操作編 Windows PowerShell 入門(2)-基本操作編 2 対象読者 Windows PowerShellでコマンド ...

  9. Windows PowerShell 入門(2)-基本操作編 2

    前回に引き続きMicrosoftが提供している新しいシェル.Windows Power Shellの基本操作方法を学びます.基本操作編第2弾の今回は.パイプの使用方法を中心としたコマンドレットの操作方 ...

随机推荐

  1. CSS面试细节整理(二)

    5.css盒模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式

  2. 元组Tuple的使用

    在方法中有多个值返回,返回值封装成对象又不方便,可以用 out 返回或ref返回, 这里介绍元组,也可以作为多个返回值的使用,最多携带8个返回值 Task.Factory.StartNew<Tu ...

  3. 香港,将军澳,TKO,服务器,运维,机房,云清洗

    目前香港到大陆速度最快.最稳定线路之一. 线路也是唯一华南华北一样快速的线路,是100%的“双线”,不存在其他香港线路网通访问比电信慢的问题. (香港)将军澳TKO机房网络速度快捷,机房内部环境配有意 ...

  4. Mesos源码分析(11): Mesos-Master接收到launchTasks消息

    根据Mesos源码分析(6): Mesos Master的初始化中的代码分析,当Mesos-Master接收到launchTask消息的时候,会调用Master::launchTasks函数.   v ...

  5. #Java学习之路——基础阶段(第五篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  6. [Swift]LeetCode216. 组合总和 III | Combination Sum III

    Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...

  7. [Swift]LeetCode738. 单调递增的数字 | Monotone Increasing Digits

    Given a non-negative integer N, find the largest number that is less than or equal to Nwith monotone ...

  8. [Swift]LeetCode905. 按奇偶排序数组 | Sort Array By Parity

    Given an array A of non-negative integers, return an array consisting of all the even elements of A, ...

  9. 10.Git分支-分支管理(git branch命令)、分支开发工作流

    1.分支管理  git branch 不仅可以创建和删除分支,还可以做一些其他工作. 1.不带参数的 git branch ,得到本地仓库当前的分支列表.并且会显示,当期所在的分支,也就是HEAD所指 ...

  10. BBS论坛(四)

    4.1.cms登录页面csrf保护 (1)Perfect_bbs.py from flask_wtf import CSRFProtect CSRFProtect(app) 添加csrf保护后,现在再 ...