當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS从入门到实践（一）

發(fā)布時(shí)間：2024/4/17 javascript 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS从入门到实践（一）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? 前 ?言

?前端?

　 ? AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。（引用百度百科）

AngularJS使用了不同的方法，它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷。AngularJS通過使用我們稱為指令(directives)的結(jié)構(gòu)，讓瀏覽器能夠識(shí)別新的語法。（引用百度百科）例如：

使用雙大括號(hào){{}}語法進(jìn)行數(shù)據(jù)綁定；

使用DOM控制結(jié)構(gòu)來實(shí)現(xiàn)迭代或者隱藏DOM片段；

支持表單和表單的驗(yàn)證；

能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上；

能將HTML分組成可重用的組件。

本篇學(xué)習(xí)主要有兩個(gè)部分：

? ①【AngularJS 常用指令】
? ②【AngularJS? 的? mvc 】
　

　　　　　　　　　　

1、AngularJS 常用指令

【常用指令】
　　1.na-app:聲明angularjs所管轄的區(qū)域，一般寫在body或者HTML上原則一個(gè)一面只寫一個(gè)
?? ??? ?
?? ??? ?<body ng-app=""> </body>
?? ??? ?2.ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
?? ??? ??? ?
?? ??? ?<input type="text"? id="input" ng-model="name"/>
?? ??? ?3.ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。
?? ??? ?
?? ??? ??? ?①<div id="div" ng-bind="name"></div>
?? ??? ??? ?②<div>{{name}}</div>
?? ??? ?4.ng-init 指令初始化 AngularJS 應(yīng)用程序變量。
?? ??? ??? ?<body ng-app="" ng-init="name=123"></body>
?? ??? ??? ?
?? ??? ?5.表達(dá)式：{{}}綁定表達(dá)式，可以包含數(shù)字、運(yùn)算符和變量。但表達(dá)式在網(wǎng)頁加載瞬間會(huì)看到{{}},所以可以用ng-bind=”代替
?? ??? ?{{5+""+5+',Angular'}}

【基本感念】
指令：AngularJS中，通過擴(kuò)展HTML的屬性提供功能? ↓↓↓↓（菜鳥教程中的原話）
?? ??? ??? ?AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。

?? ??? ??? ?ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。
?? ??? ??? ?
?? ??? ??? ?ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
?? ??? ??? ?
?? ??? ??? ?ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。?????
?? ????

2、AngularJS? 的? mvc

【mvc三層框架】

?? ??? ??? ?1、 Model（模型）：應(yīng)用程序中處于處理屬性局的部分。（保存或修改數(shù)據(jù)到數(shù)據(jù)庫、變量等）。AugularJS中的Model特征的是：數(shù)據(jù)
?? ??? ???　　 ?view（視圖）：用戶看到的而用于顯示數(shù)據(jù)的頁面
?? ??? ??? 　　?controller（控制器）：應(yīng)用程序中處理用戶交互的部分。負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并項(xiàng)目性發(fā)送數(shù)據(jù)。

?? ??? ??? ?2、工作原理：用戶從視圖層發(fā)送請(qǐng)求，controller接收到請(qǐng)求后轉(zhuǎn)發(fā)給對(duì)應(yīng)的model處理，medle處理完成后返回結(jié)果給controller，并在view成反饋給用戶。
?? ????
　　創(chuàng)建一個(gè)angular模塊，即ng-app所綁定的部分，需要傳遞兩個(gè)參數(shù)：
?? ??? ??? ?① 模塊名稱，即ng-app所需要綁定的名稱。ng-app="myApp"；
?? ??? ??? ?② 數(shù)組：需要注入的模塊名稱，不需要可為空。
?? ????
?? ??? ?var app = angular.module("myApp",[]);
?? ????
?? ??? ? 在Angular模塊上，創(chuàng)建一個(gè)控制器Controller，需要傳遞兩個(gè)參數(shù)稱。 ?
?? ??? ? ① ng-controller="myCtrl"
?? ??? ? ② controller的構(gòu)造函數(shù)：構(gòu)造函數(shù)可以傳入多個(gè)參數(shù)，包括$scope/$roatScope以及各種系統(tǒng)內(nèi)置對(duì)象
?? ??? ?
?? ??? ?【angularJS中的作用域】
?? ??? ?①$scope：局部作用域，聲明在$scope上的屬性和方法，只能在當(dāng)前Controller中使用；
?? ??? ?②$rootScope：根作用域，聲明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何區(qū)域使用（無論是否同意controller，或是否在controller包含范圍中）。
?? ??? ?>>> 若沒有使用$scope 聲明變量，而直接在html中使用ng-model綁定的變量作用域?yàn)?#xff1a;
?? ??? ?1.如果ng-model在某個(gè)ng-controller中，則此變量會(huì)默認(rèn)綁定到當(dāng)前Controller的$scope上
?? ??? ?2.如果ng-model沒有在任何一個(gè)ng-controller中，則此變量將綁定在$rootScope上。

效果圖如下：

代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .div1{ 8 width: 300px; 9 height: 100px; 10 background-color: #00BFFF; 11 } 12 </style> 13 </head> 14 <body ng-app="myApp"> 15 <div ng-controller="myCtrl"> 16 <input type="text" ng-model="name"/> 17 <div ng-bind="name" class="div1"></div> 18 <div ng-bind="age" class="div1"></div> 19 <div ng-bind="classes" class="div1"></div> 20 <div ng-bind="classes.name" class="div1"></div> 21 <div ng-bind="classes.age" class="div1"></div> 22 <div ng-bind="classes.sex" class="div1"></div> 23 24 </div> 25 <div ng-controller="myCtrl1"> 26 <input type="text" ng-model="name"/> 27 <div ng-bind="name" class="div1"></div> 28 <div ng-bind="age" class="div1"></div> 29 30 </div> 31 32 </body> 33 <script language="JavaScript" src="angular-1.5.6/angular.js"></script> 34 <script type="text/javascript"> 35 var app = angular.module("myApp",[]); 36 app.controller("myCtrl",function($scope){ 37 $scope.name = "帥哥" ; 38 $scope.age = "18歲"; 39 $scope.classes = { 40 name:"張三", 41 age:"16歲", 42 sex:"男" 43 44 }; 45 46 }); 47 48 app.controller("myCtrl1",function($rootScope){ 49 $rootScope.name = "hahaha" ; 50 }); 51 52 </script> 53 </html>

學(xué)習(xí)時(shí)候的筆記，可能會(huì)有一些錯(cuò)誤的地方，歡迎各位的批評(píng)指點(diǎn)。

反思，復(fù)盤，每天收獲一點(diǎn)---------------------期待更好的自己

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

總結(jié)

以上是生活随笔為你收集整理的AngularJS从入门到实践（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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