AngularJS 簡易物件修改入門

来源:http://www.cnblogs.com/KingJaja/archive/2016/10/29/6009887.html
-Advertisement-
Play Games

各位好,今天要來介紹如何簡單的修改網站上AngularJS相關Application的內容 進而做到某些效果。(警告!所有的Web Application都應該在後端加上相關驗證) 透過本篇你可以簡單的瞭解到以下 1.如何查找相關的ng物件 2.如何利用ng.element與ng.injector來 ...


各位好,今天要來介紹如何簡單的修改網站上AngularJS相關Application的內容

進而做到某些效果。(警告!所有的Web Application都應該在後端加上相關驗證)

透過本篇你可以簡單的瞭解到以下

1.如何查找相關的ng物件

2.如何利用ng.element與ng.injector來修改目標內容

我們會用到Firefox上知名的Firebug套件與一個AngScope用來方便我們直接瀏覽網站上AngularJS的結構

請記得要安裝 Smile

image

接下來就是實際拿一個網站做為對象,

首先可以看到這個網站在密碼的欄位上有加上了長度的限制

Showvalide

接下來我們就要試著調整一下這個限制,從下圖可以看到透過AngScope看到Application相關的資訊

當然我們也看到了疑似跟密碼驗證相關的參數設定

2

當然這時候我們就來調整看看 (當然結果是可行的) 下麵是簡單利用firebug與AngScope來進行修改

3

接下來就先介紹如何利用ng.element來進行修改

文件:https://docs.angularjs.org/api/ng/function/angular.element

透過官網的介紹後可以知道angular.element是讓ng能用類似jQuery方式來來簡單操作DOM

但實際上除了操作DOM之外,還可以利用這個指令取得該Element上的$Scope物件 (常寫ng的同學應該對這個物件不陌生),以下就是示範我如何取得$Scope物件後,一樣進行剛剛驗證規則的修改

1

最後就是重頭戲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

4

 

angular.injector甚至還可以直接bind像{{expression}} 的結構在頁面上 , 是不是十分好用呢 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背景 做為一名使用高級語言的程式員,面向對象的設計一直都是體現程式員能力的重要標準之一,所以在我工作兩年後也就是2008年我也開始了對於面向對象設計的學習,主要是拿GOF設計模式來練手,儘管實際項目中沒有真正的使用過。常見的23種設計模式,我從2008一至到2009年將近一年的時間我基本上將這些模式 ...
  • 單例模式一般應用在整個應用中只會存在一個對象。比如應用類,游戲場景類,工具類等。 實現方式: 頭文件 singleton.h: #ifndef _SINGLETON_H_ #define _SINGLETON_H_ class CSingleton{ public: //供外部調用,通過此方法獲取實 ...
  • 一、前言 1.1、什麼是輸入驗證?為什麼需要輸入驗證? 在上一篇文章中,我們學習了數據類型轉換,我們提到了表示層數據處理的兩個方法,也提到了用戶輸入數據需要進行類型轉換才能得到我們想要的數據,那麼,我們怎麼確定類型轉換後的數據,是我們想要的數據呢?這裡有點繞。你可以這樣想:一個成年男子年齡是18歲, ...
  • 以需求用例為基,抽象介面,Case&Coding兩條線並行,服務(M)&消費(VC)分離,單元、介面、功能、集成四層質量管理,自動化集成、測試、交付全程支持。 3個大階段(需求分析階段、研發準備階段、研發測試階段)16個小歷程(*)確定好邊界,明確好對接產物,做好服務管理。 基於SOA架構的TDD測 ...
  • 這個問題是不可迴避的 ...
  • 一、前言 筆者一直覺得,學習一個知識點,你首先要明白,這東西是什麼?有什麼用?這樣你才能瞭解。好了,不說廢話。 1.1、類型轉換為何存在?什麼是類型轉換? 在MVC框架中,都是屬於表示層解決方案,都需要負責收集用戶請求的參數,並且將請求參數傳給應用的控制器組件,但是,這裡有一個問題,客戶端提交的請求 ...
  • 用Sublime Text蠻久了,配置配來配去的,每次換電腦都得重頭再配過,奈何人老了腦子不中用了,得好好整理一些,下次換電腦就有得參考了.. 同事說,他的WebStorm簡直太方便,自身集成了很多方便的工具,不用配置太多 哈哈哈哈但我還是更喜歡用ST 如果要將Sass編譯成css文件,安裝相應的編 ...
  • 當前的應用設計風格趨於Flat扁平化,很多基於BootStrap實現了很多UI非常漂亮的管理界面(Bootstrap admin template)。 此核心文件開源在Github:https://github.com/JackWangCUMT/AdminLTE-Menu-Generate。首先看一 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...