當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angular模块/服务/MVVM

發(fā)布時間：2025/3/18 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 Angular模块/服务/MVVM 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

angular 是一個框架
- 我們寫的代碼由框架調(diào)用，我們必須要按照特定的規(guī)則編寫代碼
jquery是一個庫
- 我們調(diào)用庫預制的方法或?qū)ο髮崿F(xiàn)我們想要功能
在思想上：+jquery提高了操作DOM的開發(fā)效率
- angular 幾乎沒有任何DOM操作（不是沒有，只是不用我們自己操作）
- angular 內(nèi)置一個類似jqLite的東西angular.element()
- angular 不提倡DOM操作

一個前端框架，提供一種極大減少DOM操作的編程方式，在前端頁面中引入了傳統(tǒng)在后臺開發(fā)中使用的一些思想，增強代碼的結(jié)構(gòu)和可維護性
一個功能非常完備的前端框架，通過增強HTML的方式提供一種便捷開發(fā)Web應用程序的方式
其核心特點就是幾乎無任何DOM操作，讓開發(fā)人員的精力和時間全部集中于業(yè)務

沒事你不要來找我，有事我會去找你。
原理框架在調(diào)用方法的過程中通過獲取到傳遞的參數(shù)，然后框架內(nèi)部將方法toString處理以后，再通過正則表達式將其獲取到然后依次實例化。

如何進行多模塊開發(fā)
- 多模塊的開發(fā)通常是指多個Module模塊開發(fā)，
多模塊其他使用方式（不推薦）
- 1.和其他的一樣創(chuàng)建多個module模塊
- 2.設置不同的id通過id綁定：< div id="app3">
- 3通過bootstrap綁定模塊：angular.bootstrap(app3,["otherApp"]);
多模塊使用
- 一個參數(shù)是尋找模塊 angular.module('需要尋找的模塊名稱')
- 兩個參數(shù)是添加模塊 angular.module('模塊名稱',['依賴的模塊']);
如何劃分模塊
- 1.根據(jù)當前需要開發(fā)的應用程序的組成劃分需要多少模塊，比如：
  - 注冊模塊
  - 登錄模塊
  - 用戶列表頁模塊
  - 用戶詳細頁模塊

控制器的作用
- 初始化屬性
- 暴露屬性或者行為
- 監(jiān)視數(shù)據(jù)變化 $scope.name='';
  $scope.$watch('name',function (newVal,oldVal) {console.log(newVal);console.log(oldVal); })//如果是監(jiān)視對象，后面多添加一個參數(shù)true
控制器代碼壓縮問題
- 當代碼進行js壓縮時候controller里面的內(nèi)容會被當成變量替換掉，為了防止這個問題發(fā)生在controller中出現(xiàn) controller('myCtrl',['
控制器的多種寫法
- 1.標準寫法 app.controller('myCtrl',function(){})
- fuction寫在外面（寫在外面不能被壓縮） function otherCtrl($scope) { $scope.name='123';}app.controller('myCtrl',otherCtrl)

fuction寫在外面（寫在外面不能被壓縮）function otherCtrl(otherscope) { otherscope.name='123'; } otherCtrl.
4在controller內(nèi)部使用依賴注入 app.controller('myCtrl',function
$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"

什么是服務
- 在 AngularJS 中，服務是一個函數(shù)或?qū)ο?#xff0c;可在你的 AngularJS 應用中使用。AngularJS 內(nèi)建了30 多個服務。
- Angular主要用到的服務
- $scope：作用域，用來負責連接View和Controller，也就是MVVM中的ViewModel相當于橋梁一樣。
- $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進行數(shù)據(jù)更新 },1000) //但是如果說使用 $interval這種angular的服務有時候服務內(nèi)部就幫我們完成了這種數(shù)據(jù)更新
創(chuàng)建服務通過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',
  } });

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

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

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

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