關于AngularJS學習整理---核心特性

2024-04-27 15:10:15

字體：大中小

來源：轉載

供稿：網友

接觸、學習AngularJS已經三個多月了，隨著學習的深入，有些東西剛開始不明白，現在開始慢慢明白起來。于是，開始整理這幾個月的學習成果。要不又要忘了。。。

　初學Angular，是看到慕課網大漠窮秋老師教程學的，以下內容是參考教程，還有自己的整理寫的，如有相似之處，莫怪莫怪。。。

步入正題。學習Angular，首先得了解、熟知、掌握它的四大核心特性。

　　一、MVC模式

Model（模型）：是應用程序中用于處理應用程序數據邏輯的部分，通常模型對象負責在數據庫中存取數據。

View（視圖）: 用戶看到并與之交互的界面 ,相當于html元素組成的頁面。

Controller（控制器）：是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。

MVC好處：職責清晰，代碼模塊化，它能為應用程序處理很多不同的視圖，可以復用。后期維護方便。

AngularJS的MVC是借助$scope(作用域)實現的。

二、模塊化與依賴注入

Angular 應用，可以說一切都是從模塊開始的，下分五大模塊，如圖：

分別對應的是路由、過濾、指令、服務、控制器。

引入方法：

<!doctype html><html ng-app="myapp">    <head>        <meta charset="utf-8">    </head>    <body>            <script>            //[]內可以依賴angular內置模塊，或者自定義模塊注入，在路由、指令、服務中使用。具體的還得靠自己實踐后明白。            var Myapp = angular.module('myapp',['ngRoute']);            //控制器            Myapp.controller('name', function(){                            });            //指令            Myapp.directive('name', ['', function(){                // Runs during compile                return {                    // name: '',                    // PRiority: 1,                    // terminal: true,                    // scope: {}, // {} = isolate, true = child, false/undefined = no change                    // controller: function($scope, $element, $attrs, $transclude) {},                    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements                    // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment                    // template: '',                    // templateUrl: '',                    // replace: true,                    // transclude: true,                    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),                    link: function($scope, iElm, iAttrs, controller) {                                            }                };            }]);        </script>    </body></html>
三、指令
指令是Angular 中最有意味的一種特性，也是難點。先初步熟悉下，下幾篇文章具體詳解。<!doctype html><html ng-app="MyModule">	<head>		<meta charset="utf-8">	</head>	<body>		<hello></hello>		<div hello></div>		<div class="hello"></div>		<!-- directive:hello -->		<div></div>		<script>			var MyApp = angular.module('MyModule',[]);			MyApp.directive("hello", function() {			    return {			        restrict: 'AEMC',			        template: '<div>Hi everyone!</div>',			        replace: true			    }			});		</script>	</body></html>
四、雙向數據綁定
先看一下單向數據綁定。
它的處理流程是這樣的，首先呢，寫好模板加上從服務器調取的數據結合在一起，通過數據綁定機制生成一段html標簽，然后把這段標簽顯示出來。
它的缺點：html標簽一旦生成，就無法改變，要是改變其中元素，或者新的數據更新，又要重新再來一遍把它替換掉，浪費時間，占用運行內存。
再看雙向數據綁定。
它的想法是這樣的，視圖和數據是對應的，當視圖上面的內容發生變化時，數據模型也跟著變化；當數據模型發生變化時，視圖也跟著變化。
雙向數據綁定經常應用的場景，表單的應用。。。。。。。。
 
核心特性整理完了，有點水，接下來是五大模塊。。。敬請期待！嘿嘿嘿嘿