AugularJS從入門到實(shí)踐(必看篇)

前言

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、洞頭網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為洞頭等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

前端

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

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

例如：

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

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

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

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

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

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

①【AngularJS 常用指令】

②【AngularJS 的 mvc 】
　

1、AngularJS 常用指令

【常用指令】

1.na-app:聲明angularjs所管轄的區(qū)域，一般寫在body或者HTML上原則一個一面只寫一個

2.ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。

3.ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。

①<div id="div" ng-bind="name"></div>
②<div>{{name}}</div>

4.ng-init 指令初始化 AngularJS 應(yīng)用程序變量。

5.表達(dá)式：{{}}綁定表達(dá)式，可以包含數(shù)字、運(yùn)算符和變量。但表達(dá)式在網(wǎng)頁加載瞬間會看到{{}},所以可以用ng-bind=”代替

【基本感念】

指令：AngularJS中，通過擴(kuò)展HTML的屬性提供功能 ↓↓↓↓（菜鳥教程中的原話）

AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。

ng-app 指令初始化一個 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ā)送請求，controller接收到請求后轉(zhuǎn)發(fā)給對應(yīng)的model處理，medle處理完成后返回結(jié)果給controller，并在view成反饋給用戶。

創(chuàng)建一個angular模塊，即ng-app所綁定的部分，需要傳遞兩個參數(shù)：

① 模塊名稱，即ng-app所需要綁定的名稱。ng-app="myApp"；

② 數(shù)組：需要注入的模塊名稱，不需要可為空。

var app = angular.module("myApp",[]);

在Angular模塊上，創(chuàng)建一個控制器Controller，需要傳遞兩個參數(shù)稱。

① ng-controller="myCtrl"

② controller的構(gòu)造函數(shù)：構(gòu)造函數(shù)可以傳入多個參數(shù)，包括$scope/$roatScope以及各種系統(tǒng)內(nèi)置對象

【angularJS中的作用域】

①$scope：局部作用域，聲明在$scope上的屬性和方法，只能在當(dāng)前Controller中使用；

②$rootScope：根作用域，聲明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何區(qū)域使用（無論是否同意controller，或是否在controller包含范圍中）。

>>> 若沒有使用$scope 聲明變量，而直接在html中使用ng-model綁定的變量作用域?yàn)椋?/p>

1.如果ng-model在某個ng-controller中，則此變量會默認(rèn)綁定到當(dāng)前Controller的$scope上

2.如果ng-model沒有在任何一個ng-controller中，則此變量將綁定在$rootScope上。

效果圖如下：

AugularJS從入門到實(shí)踐(必看篇)

代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .div1{
        width: 300px;
        height: 100px;
        background-color: #00BFFF;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
      <div ng-bind="classes" class="div1"></div>
      <div ng-bind="classes.name" class="div1"></div>
      <div ng-bind="classes.age" class="div1"></div>
      <div ng-bind="classes.sex" class="div1"></div>
      
    </div>
    <div ng-controller="myCtrl1">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
    
    </div>
      
  </body>
  <script language="JavaScript" src="angular-1.5.6/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module("myApp",[]);  
    app.controller("myCtrl",function($scope){
      $scope.name = "帥哥" ;
      $scope.age = "18歲";
      $scope.classes = {
          name:"張三",
          age:"16歲",
          sex:"男"
        
      };
      
    });
    
    app.controller("myCtrl1",function($rootScope){
      $rootScope.name = "hahaha" ;
          });
    
  </script>
</html>

以上這篇AugularJS從入門到實(shí)踐(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：AugularJS從入門到實(shí)踐(必看篇)
標(biāo)題來源：http://bm7419.com/article2/pccioc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、微信公眾號、外貿(mào)建站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容