angular 與 jquery

共同點(diǎn)

• 都是一個前端的JS文件而已

不同點(diǎn)：

• angular 是一個框架

  • 我們寫的代碼由框架調(diào)用，我們必須要按照特定的規(guī)則編寫代碼

• jquery是一個庫

  • 我們調(diào)用庫預(yù)制的方法或?qū)ο髮?shí)現(xiàn)我們想要功能

• 在思想上：+jquery提高了操作DOM的開發(fā)效率

  • angular 幾乎沒有任何DOM操作（不是沒有，只是不用我們自己操作）

  • angular 內(nèi)置一個類似jqLite的東西angular.element()

  • angular 不提倡DOM操作

什么是AngularJS

• 一個前端框架，提供一種極大減少DOM操作的編程方式，在前端頁面中引入了傳統(tǒng)在后臺開發(fā)中使用的一些思想，增強(qiáng)代碼的結(jié)構(gòu)和可維護(hù)性

• 一個功能非常完備的前端框架，通過增強(qiáng)HTML的方式提供一種便捷開發(fā)Web應(yīng)用程序的方式

• 其核心特點(diǎn)就是幾乎無任何DOM操作，讓開發(fā)人員的精力和時間全部集中于業(yè)務(wù)

依賴注入

• 沒事你不要來找我，有事我會去找你。

• 原理 框架在調(diào)用方法的過程中通過獲取到傳遞的參數(shù)，然后框架內(nèi)部將方法toString處理以后， 再通過正則表達(dá)式將其獲取到然后依次實(shí)例化。

模塊

• 如何進(jìn)行多模塊開發(fā)

  • 多模塊的開發(fā)通常是指多個Module模塊開發(fā)，

• 多模塊其他使用方式（不推薦）

  • 1.和其他的一樣創(chuàng)建多個module模塊

  • 2.設(shè)置不同的id通過id綁定：< div id="app3">

  • 3通過bootstrap綁定模塊：angular.bootstrap(app3,["otherApp"]);

• 多模塊使用

  • 一個參數(shù)是尋找模塊 angular.module('需要尋找的模塊名稱')

  • 兩個參數(shù)是添加模塊 angular.module('模塊名稱',['依賴的模塊']);

• 如何劃分模塊

  • 1.根據(jù)當(dāng)前需要開發(fā)的應(yīng)用程序的組成劃分需要多少模塊，比如：

    • 注冊模塊

    • 登錄模塊

    • 用戶列表頁模塊

    • 用戶詳細(xì)頁模塊

• 2.根據(jù)文件類型的不同來劃分

  比如：

  • 所有的控制器

    • 所有的服務(wù)

    • 所有的指令

控制器

• 控制器的作用

  • 初始化屬性

  • 暴露屬性或者行為

  • 監(jiān)視數(shù)據(jù)變化 $scope.name='';

    $scope.$watch('name',function (newVal,oldVal) {console.log(newVal);console.log(oldVal); })//如果是監(jiān)視對象，后面多添加一個參數(shù)true

• 控制器代碼壓縮問題

  • 當(dāng)代碼進(jìn)行js壓縮時候controller里面的內(nèi)容會被當(dāng)成變量替換掉，為了防止這個問題發(fā)生在controller中出現(xiàn) controller('myCtrl',['?scope){}])

• 控制器的多種寫法

  • 1.標(biāo)準(zhǔn)寫法 app.controller('myCtrl',function(){})

  • fuction寫在外面（寫在外面不能被壓縮） function otherCtrl($scope) { $scope.name='123';}app.controller('myCtrl',otherCtrl)

• fuction寫在外面（寫在外面不能被壓縮）function otherCtrl(otherscope) { otherscope.name='123'; } otherCtrl.?scope'];//這里對方法添加$inject app.controller('myCtrl',otherCtrl)

• 4在controller內(nèi)部使用依賴注入 app.controller('myCtrl',function ?scope,$injector) {

  $injector.invoke(function ($log) {$log.info(123);})

  })

• 5 早期使用 （angular-1.2.29版本） function myController($scope) {

  $scope.name="angular早期使用";

  }

• 6 面向?qū)ο蠓椒ㄊ褂?/span>

  • 1.控制器的function不寫改為引用function app.controller('myCtrl',demoCtrl);

    • 2.創(chuàng)建一個面向?qū)ο蟮膄unction ` function demoCtrl() {

      this.name='123'; } `

    • 3.使用的時候添加 as scope ng-controller="myCtrl as scope"

Angular服務(wù)

• 什么是服務(wù)

  • 在 AngularJS 中，服務(wù)是一個函數(shù)或?qū)ο?#xff0c;可在你的 AngularJS 應(yīng)用中使用。AngularJS 內(nèi)建了30 多個服務(wù)。

  • Angular主要用到的服務(wù)

  • $scope：作用域，用來負(fù)責(zé)連接View和Controller，也就是MVVM中的ViewModel相當(dāng)于橋梁一樣。

  • $rootScope

  • $location

  • $window

  • $log

  • $interval和setInterval區(qū)別 在數(shù)據(jù)變換過程中有時候angular監(jiān)視不到數(shù)據(jù)變化:

    setInterval(function () {$scope.time=new Date();console.log($scope.time);$scope.$apply();//告訴angular進(jìn)行數(shù)據(jù)更新 },1000) //但是如果說使用 $interval這種angular的服務(wù)有時候服務(wù)內(nèi)部就幫我們完成了這種數(shù)據(jù)更新

• 創(chuàng)建服務(wù) 通過module創(chuàng)建： service、factory

  • service創(chuàng)建：app.service('myService',function () { this.name='myService'; });

  • factory創(chuàng)建: app.factory('myFactory',function () { return {

    name:'myFactory',

    } });

指令

• ng-bind

• ng-bind-html

• ng-repeat

• ng-class

• ng-if

• ng-hide

• ng-show

• ng-switch

• ng-src

• ng-href

• ng-focus

• ng-blur

• ng-dblclick

MVVM設(shè)計(jì)模式

• 什么是MVVM設(shè)計(jì)模式

  • Model（模型）

  • View （視圖）

  • ViewModel （視圖模型）

  • 由上面三個部分組成其中ViewModel就是$scope起到橋梁的作用將Model和View聯(lián)系起來

  • MVVM模式是Model-View-ViewMode（模型-視圖-視圖模型）模式的簡稱，其最早出現(xiàn)在微軟的WPF和Silverlight框架中，使用ViewModel（視圖模型）來實(shí)現(xiàn)View和Model的粘合，同時讓View和Model的進(jìn)一步分離。方便美工和程序員職能分離。

• MVVM本質(zhì)

  • 其本質(zhì)就是為了代碼模塊化

    • 模塊化的好處是邏輯清晰、維護(hù)方便但是同時也會增加代碼量和開發(fā)成本

angular的特性

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

• 指令系統(tǒng)

• MVVM設(shè)計(jì)模式

• 多模塊化開發(fā)

• 依賴注入

轉(zhuǎn)載于:https://www.cnblogs.com/bici/p/6058675.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Angular模块/服务/MVVM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。