欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs每天學習之總體介紹

 更新時間:2017年08月07日 15:28:19   作者:愛拼才會贏-Martin  
這篇文章主要為大家詳細介紹了Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容,具有一定的參考價值,感興趣的小伙伴們可以參考一下

這周末在家呆了兩天,正好中午閑暇時間繼續(xù)分享Angularjs相關(guān),今天主要分享Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容,下面直接進入主題。

1、基本概念:

  AngularJS是為了克服HTML在構(gòu)建應用上的不足而設(shè)計的。HTML是一門很好的偽靜態(tài)文本展示設(shè)計的聲明式語言,但要構(gòu)建WEB應用的話它就顯得乏力了。所以我做了一些工作(你也可以覺得是小花招)來讓瀏覽器做我想要的事,通常,我們是通過以下技術(shù)來解決靜態(tài)網(wǎng)頁技術(shù)在構(gòu)建動態(tài)應用上的不足。

2、版本

  angualrjs1.x:目前比較穩(wěn)定版本。
  angularjs2.x:基于typescript編寫,他在1.x基礎(chǔ)上改動很大,偏向于移動端的開發(fā),ES6標準編寫
  angularjs4.x 最新版本

目前版本2.x不是在1.x的基礎(chǔ)上升級的,基本上說是顛覆性的,目前開始兩個版本來維護,2.x開始把1.x版本基本上重新架構(gòu),并優(yōu)化了大量的東西,并更提倡組件化變成,這方面跟Vue,React類似。

3、核心特性

MVC(或MVVM)設(shè)計思想:

       很多人會想Angularjs是前端MVC框架,我認為MVC只是一個設(shè)計思想,我認為可以說有MVVM的影子在里面,因為MVVM是在MVC的基礎(chǔ)上升級的,加了數(shù)據(jù)雙向綁定功能,不過這只是我個人意見,請大神們指正。

 雙向數(shù)據(jù)綁定:

  數(shù)據(jù)雙向綁定不是AngularJs提出的,是很早就有的,有微軟的WPF中運用MVVM思想、前端框架Knockoutjs都有數(shù)據(jù)雙向綁定概念。

模塊化和依賴注入

  模塊化和依賴注入是AngularJs的核心內(nèi)容,也是Angular的亮點。

指令系統(tǒng)

        指令體統(tǒng)也是Angular的核心,指令系統(tǒng)分內(nèi)置指令和自定義指令,其中我認為自定義指令的功能很強大,能實現(xiàn)很多強大的功能,細節(jié)到講解指令時詳細講解。

4、擅長領(lǐng)域

    1)單頁面應用程序Single Page Application(SPA)
    2)CRUD程序

      有可能有些園友有可能對單頁面應用不是很理解,簡單舉一個例子,比如我們傳統(tǒng)的通過Iframe框架的屬于多頁面應用MPA,多頁面應用的弊端為多次加載多個頁面,單頁面應用都通過Html段來加載或者切換方式。這里對MPA,SPA不做過多的介紹,大家可以百度一下就理解。

  AngularJs適合于CRUD的應用系統(tǒng),不適合于頁面頻繁交互的應用或者圖形化頁面及游戲類系統(tǒng)不適合該框架。

5、AngularJs應用構(gòu)成

   任何一個ng應用都是由控制器、服務、指令、路由、過濾器等模塊類型構(gòu)成,下面要我用一個圖表示關(guān)系:

6、模塊(module)

      在AngularJS中module是一個核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等。

模塊的創(chuàng)建方式:angular.module(‘myApp',[]);

模塊的使用:在需要的地方(html某個標簽上)添加ng-app

使用模塊的好處:

     1)保持全局命名空間的清潔;
     2)編寫測試代碼更容易;
     3)易于在不同的應用程序之間復用代碼。
    4)使用聲明的方式,讓人更加容易理解。

7、在應用中使用AngularJs

1)在應用中使用Angular時首先在頁面中引用angular框架的js庫代碼。

<head>
 <meta charset="UTF-8">
 <title>首頁</title>
 <!--引用AngularJs庫 -->
 <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
 
</head>

2)在應用Angular范圍的html元素上添加ng-app模塊,需要添加控制器的話加ng-controller,這個不一定是在body元素上,可以任意元素上,這個就是表明使用Angular的應用邊界。

<body ng-app="myapp" ng-controller="myCtrl">
 <!-- 1、表達式綁定 -->
 <h1>{{expression}}</h1>
 <!-- 2、指令綁定-->
 <h2>{{ngmodel}}</h2>
 <input type="text" ng-model="ngmodel">
 <!-- 3、ng-bind綁定-->
 <h3 ng-bind="ngbind"></h3>
 <h3 class="ng-bind:ngbind"></h3>
 <!-- 4、ng-bind-html綁定-->
 <h4 ng-bind-html="htmlbind"></h4>
 <!-- 5、ng-bind-template -->
 <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

3、添加js代碼,并定義模塊及控制器等內(nèi)容

<script>
 //模塊定義
 // 第一個參數(shù):應用名稱,第二個參數(shù):應用依賴模塊
 var app = angular.module('myapp', ['ngSanitize']);
 
 // 控制器定義
 // 第一參數(shù): 控制器名稱, 第二個參數(shù): 匿名函數(shù), 傳入作用域,并在作用域上添加額外功能
 app.controller('myCtrl', function($scope) {
  $scope.expression = "hello expression";
  $scope.ngbind = "hello ng-bind";
  $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
  $scope.subCtrl = "hello subCtrl";
 
 });
 
</script>


從以上代碼段可以看出怎么定義模塊及控制器的方法,并每個參數(shù)的意義都寫了注釋,大家可以看一下。

到時候給大家把源代碼分享到GitHub上面,大家可以下載。

今天就給大家分享怎么多的內(nèi)容吧,下次把數(shù)據(jù)綁定和控制器相關(guān)內(nèi)容分享給大家,在此感謝大家的支持,并有什么不妥之處歡迎大家指正!

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS基于MVC的復雜操作實例講解

    AngularJS基于MVC的復雜操作實例講解

    下面小編就為大家分享一篇AngularJS基于MVC的復雜操作實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • angularjs中回車鍵觸發(fā)某一事件的方法

    angularjs中回車鍵觸發(fā)某一事件的方法

    下面小編就為大家?guī)硪黄猘ngularjs中回車鍵觸發(fā)某一事件的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • AngularJS 打開新的標簽頁實現(xiàn)代碼

    AngularJS 打開新的標簽頁實現(xiàn)代碼

    本文通過實例代碼給大家介紹了angularJS 打開新的標簽頁方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-09-09
  • Angular2數(shù)據(jù)綁定詳解

    Angular2數(shù)據(jù)綁定詳解

    本篇文章主要介紹了Angular2數(shù)據(jù)綁定的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • Angular工具方法學習

    Angular工具方法學習

    這篇文章主要為大家詳細介紹了Angular工具方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • AngularJS延遲加載html template

    AngularJS延遲加載html template

    這篇文章主要介紹了AngularJS延遲加載html template 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-07-07
  • Angular實現(xiàn)較為復雜的表格過濾,刪除功能示例

    Angular實現(xiàn)較為復雜的表格過濾,刪除功能示例

    這篇文章主要介紹了Angular實現(xiàn)較為復雜的表格過濾,刪除功能,結(jié)合實例形式分析了AngularJS針對表格的排序、查詢匹配、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • Angular如何由模板生成DOM樹的方法

    Angular如何由模板生成DOM樹的方法

    這篇文章主要介紹了Angular如何由模板生成DOM樹的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • AngularJS 讓人愛不釋手的八種功能

    AngularJS 讓人愛不釋手的八種功能

    AngularJS 讓人愛不釋手的八種功能,想知道AngularJS哪八種功能讓人喜歡就快點看下本文吧
    2016-03-03
  • Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能

    Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能

    這篇文章主要介紹了Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-12-12

最新評論