一起學Angular

来源:http://www.cnblogs.com/newnj/archive/2017/06/27/7083636.html
-Advertisement-
Play Games

最近想做一款跨平臺(pc\app\pad)的東西玩玩,研究了許多技術: android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程式 除android、ios 本身的枷鎖(系統)其它 的都 可以實現跨平臺,尤其ApiCloud、微信小程式做開發sdk級 ...


最近想做一款跨平臺(pc\app\pad)的東西玩玩,研究了許多技術:

android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程式

除android、ios 本身的枷鎖(系統)其它 的都 可以實現跨平臺,尤其ApiCloud、微信小程式做開發sdk級解決方案很是火熱,但是從技術主權上講太依賴人家的東西,

H5 、bootstrap 在響應式相當優秀,前後端框架基本可以承包 。

當然還有很多 前端框架 如vue.js 等等。

不知道why,目前對angular產生興趣,興趣是最不要臉的行為號召力,比如你對某個漂亮姑娘產生了濃厚的興趣,然後。。。。(~~~開個玩笑)

然後就要去想辦法接近 “她” ~~

我要接近 angular ~~

 

先從收集信息開始 :

她從哪來?

AngularJS[1]  誕生於2009年,由Misko Hevery 等人創建,後為Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有著諸多特性,最為核心的是:MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴註入等等。

她的迷人之處?

AngularJS是為了剋服HTML在構建應用上的不足而設計的。HTML是一門很好的偽靜態文本展示設計的聲明式語言,但要構建WEB應用的話它就顯得乏力了。

通常,我們是通過以下技術來解決靜態網頁技術在構建動態應用上的不足: 類庫 - 類庫是一些函數的集合,它能幫助你寫WEB應用。起主導作用的是你的代碼,由你來決定何時使用類庫。類庫有:jQuery等 框架 - 框架是一種特殊的、已經實現了的WEB應用,你只需要對它填充具體的業務邏輯。這裡框架是起主導作用的,由它來根據具體的應用邏輯來調用你的代碼。框架有:knockout、sproutcore等。 ------好吧,還不夠迷人 AngularJS通過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣,這也會損失一部分靈活性。換句話說,並不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是,至少90%的WEB應用都是CRUD應用。但是要瞭解什麼適合用AngularJS構建,就得瞭解什麼不適合用AngularJS構建。 如游戲,圖形界面編輯器,這種DOM操作很頻繁也很複雜的應用,和CRUD應用就有很大的不同,它們不適合用AngularJS來構建。像這種情況用一些更輕量、簡單的技術如jQuery可能會更好。 ------心動了麽? ----------不得不說,我們所有的互聯網行為無非是一個個的數據點進行CRUD,如購物車加減商品(+ -)、查 機票、車票 、清除 不聯繫的微信好友 、下個訂單------------
  進一步探索:   在<html>標簽里,我們用一個ng-app標識符標明這是一個AngularJS應用。 這個ng-app標識符會使AngularJS自動初始化(auto initialize)你的應用。 我們用<script>標簽來載入AngularJS腳本: <script src="angular-1.1.0.min.js"></script> 通過設置<input>標簽里的ng-model屬性, AngularJS會自動對數據進行雙向綁定。 我們還同時進行了一些簡單的數據驗證: Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required > 這個輸入框的widget看起來很普通,但如果認識到以下幾點那它就不普通了: 當頁面載入完後,AngularJS會依照widget里的聲明的模型名字(qty、cost)生成同名變數。 可以把這些變數認為是MVC設計模式中的M(Model); 註意上面widget里的input有著特殊的能力。 如果你們沒有輸入數據或者輸入的數據無效,這個input輸入框會自動變紅。輸入框的這種新特性,能讓開發者更容易實現CRUD應用里常見的欄位驗證功能。 終於,我們可以來看一下神秘的雙大括弧{{}}了: Total:{{qty *cost |currency}}這個{{表達式}}標記是AngularJS的數據綁定。其中的表達式可以是表達式和過濾器({{ expression | filter }})的組合。 AngularJS提供了過濾器來對輸入輸出數據格式化。 上面的這個例子里,{{}}里的表達式讓AngularJS把從輸入框中獲得的數據相乘,然後把相乘結果格式化成本地貨幣樣式,然後輸出到頁面上。 值得一提的是,我們既沒有調用任何AngularJS的方法,也沒有像用框架一樣去編寫某個具體邏輯,就是完成了上述功能。 這個實現的背後是因為瀏覽器做了比以往生成 靜態頁面更多的工作,讓它能滿足動態WEB應用的需要。 AngularJS使得動態WEB應用的開發門檻降到不需要類庫或者框架的程度。   Angular信奉的是,當組建視圖(UI)同時又要寫軟體邏輯時,聲明式的代碼會比命令式的代碼好得多,儘管命令式的代碼非常適合用來表述業務邏輯。 將DOM操作和應用邏輯解耦是一種非常好的思路,它能大大改善代碼的可調性; 將測試和開發同等看待是一種非常非常好的思路,測試的難度在很大程度上取決於代碼的結構; 將客戶端和伺服器端解耦是一種特別好的做法,它能使兩邊並行開發,並且使兩邊代碼都能實現重用; 如果框架能夠在整個開發流程里都引導著開發者:從設計UI,到編寫業務邏輯,再到測試,那對開發者將是極大的幫助; “化繁為簡,化簡為零”總是好的。 AngularJS能將你從以下的噩夢中解脫出來   

AngularJS 表達式

編輯 AngularJS 表達式寫在雙大括弧內:{{ expression }}。[2]  AngularJS 表達式把數據綁定到 HTML,這與ng-bind指令有異曲同工之妙。 AngularJS 將在表達式書寫的位置"輸出"數據。 AngularJS 表達式很像JavaScript 表達式:它們可以包含文字、運算符和變數。 實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}     初步認識了angular ,等待約下次~~~要一起麽~~~     V-V   
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、普通的二三級菜單 2、變成水平方向 3、彈簧式 菜單製作的方式多種多樣,這次先給大家分享這幾種,如大家有好的建議和菜單效果,可以在下方回覆給我,大家共同學習一下。 ...
  • 變形分類 縮放 使用scale方法來實現文字或圖像的縮放,在參數中指定縮放倍率。例如“scale(0.5)”,表示縮小50 傾斜 使用skew方法來實現文字或圖像的縮放,在參數中指定水平方向的傾斜角度與垂直方向的傾斜角度,若只有一個數值,則為水平方向的傾斜角度,單位為deg。 註:rotate表示的 ...
  • a. js對象都是關聯數組 b. inherit();返回一個繼承自原型對象p的屬性的新對象 對象的方法: 創建(create) 設置(set) 查找(query) 刪除(delete) 檢測(test)和枚舉(enumerate) 創建對象的方法: 對象直接量 關鍵字new es5中的Object ...
  • 每周定時執行,遍歷 Firebase 資料庫,刪除過期的節點: ...
  • 首先講開髮網頁三種技術:html,css,javascript。html負責網頁的結構,css站在沒學角度對網頁進行美化,javascript負責網頁交互,站在用戶體驗角度設計網頁交互效果 而我們所學的html是一種超文本標記語言。何謂超文本?超文本就是指文本、圖片、鏈接、音樂、程式等等一些可以表示 ...
  • 1、先看有間距的佈局效果: 2、少說多做,直接看代碼(代碼中有註釋) ...
  • 什麼是盒子模型? 網頁中的任何一個標簽都相當於是一個盒子模型,而所有的盒子模型都存在五個必要的屬性:width,height,padding,border,margin. 那麼在一個網頁中如何計算一個盒子模型實際所占的寬度呢???? 例如:<style>div {width:300px;paddin ...
  • 它們一樣是因為:都是滑鼠落上去的時候觸發的。它們不一樣是因為:onmousemove是javascript裡面的,他可以觸發js命令,但是hover做不到,hover只是css樣式的類,只能定義樣式。比如說滑鼠落上去實現一個彈出視窗的操作,就要用onmousemove,用hover的css定義是沒辦 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...