快捷導(dǎo)航

AngularJs每天學(xué)習(xí)之總體介紹

更新時(shí)間：2017年08月07日 15:28:19 作者：愛拼才會贏-Martin

這篇文章主要為大家詳細(xì)介紹了Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

1、基本概念：

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

2、版本

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

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

3、核心特性

MVC（或MVVM）設(shè)計(jì)思想：

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

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

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

模塊化和依賴注入

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

指令系統(tǒng)

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

4、擅長領(lǐng)域

1）單頁面應(yīng)用程序Single Page Application（SPA）
2）CRUD程序

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

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

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

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

6、模塊（module）

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

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

模塊的使用：在需要的地方（html某個(gè)標(biāo)簽上）添加ng-app

使用模塊的好處：

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

7、在應(yīng)用中使用AngularJs

1）在應(yīng)用中使用Angular時(shí)首先在頁面中引用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）在應(yīng)用Angular范圍的html元素上添加ng-app模塊，需要添加控制器的話加ng-controller，這個(gè)不一定是在body元素上，可以任意元素上，這個(gè)就是表明使用Angular的應(yīng)用邊界。

<body ng-app="myapp" ng-controller="myCtrl">
 <!-- 1、表達(dá)式綁定 -->
 <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>
 //模塊定義
 // 第一個(gè)參數(shù)：應(yīng)用名稱，第二個(gè)參數(shù)：應(yīng)用依賴模塊
 var app = angular.module('myapp', ['ngSanitize']);
 
 // 控制器定義
 // 第一參數(shù)： 控制器名稱， 第二個(gè)參數(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>

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

到時(shí)候給大家把源代碼分享到GitHub上面，大家可以下載。

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

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

您可能感興趣的文章: