AngularJs基礎學習指南(1)

来源:http://www.cnblogs.com/zh-helloworld/archive/2017/11/26/zh_helloworld.html
-Advertisement-
Play Games

1.AngularJs指的是angular 1.x框架,Angular一般指的是2和4 2.angularjs是什麼:是一個js框架,幫助我們寫頁面的,是由谷歌公司創建,遵循MIT協議,開源開放 3.angularjs主要應用於增刪改查等數據操作比較頻繁的,比如說購物車,後臺管理系統。然而游戲,圖形 ...


1.AngularJs指的是angular 1.x框架,Angular一般指的是24

2.angularjs是什麼:是一個js框架,幫助我們寫頁面的,是由谷歌公司創建,遵循MIT協議,開源開放

3.angularjs主要應用於增刪改查等數據操作比較頻繁的,比如說購物車,後臺管理系統。然而游戲,圖形界面的編譯器這種頻繁的操作dom模型是不適用的。

4.angularjs的特性:

(1)MVC模式(數據模型,視圖,控制器三部分)

(2)模塊系統

(3)指令系統

(4)依賴註入

(5)數據雙向綁定

5.angularjs的缺點

(1)dom操作支持較弱,當然也可以使用jq

(2)html中過多指令,事件綁定的操作,耦合度較高

6.為什麼需要mvcjs模塊化

(1)代碼規範越來越大,切分職責是大勢所趨

(2)為了復用代碼,很多邏輯都是一樣的,封裝

(3)為了方便後期的維護,修改一塊功能不影響其他功能

7.下麵是一些angularjs的使用語法:

(1)表達式:註意,使用angularjs時,需要先下載引入到項目目錄中

(2)html文件中,寫angularjs的語句時,要在父標簽的外部寫一條指令,用來知名入口文件,ng-app

(3){{1+2}} //3

(4){{1+2}}--{{[1,2,3,4][2]}}--{{{name:’allen’}.name}}--{{2>1?’haha’:’heihei’}}

(5)輸出結果是:3--3--allen--haha

(6)表達式定義變數:

只要賦值了在上面就能使用,不是說一個變數在上面定義,只能在下麵使用,而angularjs定義了變數之後,可以在變數前面使用,類似於變數提升,但又不完全是變數提升,因為這個輸出的就是變數的值,並不是undefined

(7)還有一個問題就是,我們在給一個變數賦值的時候,angularjs會把變數的值,執行一遍然後輸出出來,而實際上我們不想輸出,這時,就有了另外一條指令ng-init在這條指令裡面寫變數就可以在下麵用,註意指令是ng-什麼,這個指令是只能寫在標簽裡面的

(8)其實ng-app是為了定義主模塊的入口,就相當於在這個主模塊裡面寫js代碼。

8.定義主模塊:

var app = angular.module(‘myapp’,[])//第一個參數是模塊名,第二個參數先寫一個空數組

app.controller(‘mycontroller’,function($scope){//第一個參數是控制器名,第二個參數是函數

$scope.name = “二狗子”//註意函數的參數$scope是不可以修改的,叫依賴註入特性

})

<div ng-controller=”mycontroller”>

{name}//這是一個封地,說明是mycontroller這個控制器控制的,是可以訪問數據的

</div>

9.介紹一個指令:ng-bind:阻止花括弧閃現,因為當運行時不會執行這一句,當讀到引入angularjs的代碼的時候,angular會執行這句話,並且把標簽原有的內容隱藏掉,顯示現在

10.有一個依賴註入,是$scope,是作為一個函數的參數進行註入的,但是當項目上線的時候,需要壓縮代碼,會把原本長的參數,壓縮成一個短的字母,所以就不能用了,所以angular想了一個方法,用數組接收一下。

app.controller(“mycontroller”,[‘$http’,’$scope’,function(a,b){

b.name = “二狗”

}])

11.除了$scope這種函數參數不叫服務,別的在函數的參數裡面進行依賴註入的叫做服務,每一個服務都會提供一個功能,比如說:$rootscope作用:往根作用域掛數據,全局的,這是必須有控制器的,還有一種方法也可以實現全局,不用使用控制器

12.app.run(function($rootscope){

$rootscope.tel = ‘1111’

})

註意一種嵌套寫法,子元素可以繼承父元素的變數,但是父元素不可以機車繼承子元素的變數,全局變數都可以使用。


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

-Advertisement-
Play Games
更多相關文章
  • feedparser模塊 1.簡介 feedparser是一個Python的Feed解析庫,可以處理RSS ,CDF,Atom 。使用它我們可從任何 RSS 或 Atom 訂閱源得到標題、鏈接和文章的條目了。 RSS(Really Simple Syndication,簡易信息聚合):是一種描述和同 ...
  • The GNU Compiler Collection (usually shortened to GCC) is a compiler system produced by the GNU Project supporting various programming languages. But ...
  • 1、Java常量的應用 語法:final 常量名 = 值; 舉一個簡單的例子 2、Java數組 Java中操作數組只需要四個步驟: (1)聲明數組 語法:數組類型[ ] 數組名; 或者數組類型 數組名[ ]; (2)分配空間 語法: 數組名 = new 數據類型 [ 數組長度 ]; 也可以直接合併 ...
  • 從0開始搭建自動部署環境(續) 前言 上一篇 "從0開始搭建自動部署環境" 雖然環境搭建起來了,但是配置少了一部分步驟。本來應該寫到上一篇中,但是這樣做篇幅過長了。另外,此篇會使用自動部署一個同步在Github上的Spring Boot項目為例,介紹如何使用該自動部署環境。 配置Global Too ...
  • 不管是java還是.net基礎設施必不可少。 MQ: 如果發現MQ是瓶頸。不管用的是rabbitmq還是kafka,其他的也好。作為生產者要確認超時時間、重試機制、非同步線程池。消費方要做兩件事:發現和解決。發現的主要是通過積壓閾值最快發現問題。解決的方法主要有:短期方案:增大線程數,增加伺服器。長期 ...
  • clipboard.js 可以實現純 JS 的從瀏覽器複製文本到系統剪貼板的功能。 使用方法: 1. 下載 clipboard.js,併在頁面中引入該插件。clipboard.js 下載地址: https://github.com/zenorocha/clipboard.js 2. 需要複製的目標文 ...
  • 原生js表單生成列表實現原理 這裡用到的一些方法有 insertBefore() createElement() appendChild() removeChild() and so on~~ 效果圖如下: ...
  • 【需求】 要實現的需求很簡單,頁面從A -> B,用戶在B觸發操作,將一些數據帶回到A頁面,在網上找了好久也只看到有人問,但總找不到很好答案。要實現的效果圖如下: 【聯想】 在 ios 開發中,頁面跳轉 A -> B -> C,到 C 頁面後,記憶體中一直存儲著 A 和 B 頁面的數據和狀態,通過導航 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...