日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

angular入门

發布時間：2025/3/20 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 angular入门 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄

一、angular入門

1.雙邊數據綁定

2.模塊

3.Controller

4.表達式（Expression）

5.內置服務

二、常用內置指令

1.ng-app指令

2.ng-repeat 指令

3.ng-class指令

4.ng-show/ng-hide 指令

5.ng-link/ng-src 指令

一、angular入門

1.雙邊數據綁定

<!-- 所有需要angular管理的代碼必須包裹在一個ng-app指令的元素中 --> <div ng-app> <h1>使用angular實現雙邊數據綁定</h1> <p><input type="text" placeholder="請輸入你的姓名" ng-model="user.name"></p> <p>hello<strong>{{user.name}}</strong></p> </div> <script src="js/angular.js"></script>

運行流程：

1.當網頁加載完畢，AngularJS 自動開始執行 2.HTML 頁面中 ng-xxx 的屬性稱之為指令（Directive） 3.ng-app 指令告訴 AngularJS，<div> 元素是AngularJS 應用程序管理的邊界 4.ng-model 指令把文本框的值綁定到變量 name 上 5.{{ name }} 表達式就是把應用程序變量 name 綁定到某個段落的 innerHTML

2.模塊

  • 劃分應用程序結構

  • 我們可以通過angular.module創建一個模塊

  • angular.module方法傳遞兩個參數才是創建模塊，一個參數是獲取模塊

<div ng-app="myApp" ng-controller="DemoController"><h1>使用angular實現雙邊數據綁定</h1><p><input type="text" placeholder="請輸入你的姓名" ng-model="user.name"></p><p>hello<strong>{{user.name}}</strong></p><input type="button" ng-click="show()"/> </div> ? <script src="js/angular.js"></script> <script>//注冊模塊，通過module函數//第一個參數：這個模塊的名字//第二個參數：這個模塊所依賴的模塊，如果什么都不依賴也需要穿空數組//返回剛剛創建的模塊var app = angular.module("myApp",[]);//創建一個控制器，該控制器屬于myApp模塊//控制器函數的參數：$scopeapp.controller("DemoController",function ($scope) {//當控制器執行時會自動執行里面的函數$scope.user={};$scope.user.name='張三';//$scope不僅僅可以往視圖中暴露數據，還可以暴露行為$scope.show=function () {alert($scope.user.name);}}); </script>

3.Controller

  • 調度邏輯的集合

  • 控制器的三種主要職責：

    • 為應用中的模型設置初始狀態

    • 通過$scope對象把數據模型或函數行為暴露給視圖

    • 監視模型的變化，做出相應的動作

$watch演示：

<body ng-app="myModule" ng-controller="loginController"> 用戶名:<input type="text" ng-model="user.username"><br/> 密碼:<input type="password" ng-model="user.password"><br/> 登陸:<input type="button" ?value="登陸" ng-click="login()"><br/> ? <div>{{message}}</div> <script src="js/angular.js"></script> <script>// 創建一個模塊var myModule=angular.module("myModule",[]);// 為這個模塊創建一個控制器myModule.controller("loginController",['$scope',function ($scope) {// 數據$scope.user={username:"",password:""}; ?// 行為數據$scope.login=function () {// 因為數據的變化時雙向的同步，所以界面上的值變化會同步到$scope.user上console.log($scope.user);} ?// 請輸入用戶名 輸入格式不合法$scope.message = '請輸入用戶名'; ?// 官方的API中提供了一個$scope.$watch方法，$scope.$watch('user.username', function(now, old) {// 當user.username發生變化時觸發這個函數if (now) {if (now.length < 7) {$scope.message = '輸入格式不合法';} else {$scope.message = '';}} else {$scope.message = '請輸入用戶名';}});}]) </script>

4.表達式（Expression）

  • 作用：

    ? 使用?表達式?把數據綁定到 HTML。

  • 語法：

    ? 表達式寫在雙大括號內：{{ expression }}。

  • 比較：

    ? 表達式作用類似于ng-bind指令建議更多的使用指令

  • AngularJS表達式很像JavaScript表達式

  • 它們可以包含文字、運算符和變量

  • 如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}

數字 {{ 100 + 100 }} 字符串 {{ 'hello' + 'angular' }} 對象 {{ zhangsan.name }} 數組 {{ students[10] }}

5.內置服務

  • 我們的數據一般都是從后端獲取的，那么如何獲取數據呢？我們一般使用內置服務$http 來實現。

  • 下面模擬從后端獲取數據

<!-- 頁面初始化時執行findAll()方法 --> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table><tr><td>姓名</td><td>數學</td><td>語文</td></tr><tr ng-repeat="entity in list"><td>{{entity.name}}</td><td>{{entity.shuxue}}</td><td>{{entity.yuwen}}</td></tr> </table> ? ? <script src="js/angular.js"></script> <script>var app=angular.module('myApp',[]);//定義控制器app.controller('myController',function($scope,$http){$scope.findAll=function(){//$http.get('data.json').success(function(response){$scope.list=response;})}}); ? </script>

data.json

[{"name":"張三","shuxue":100,"yuwen":93},{"name":"李四","shuxue":88,"yuwen":87},{"name":"王五","shuxue":77,"yuwen":56},{"name":"趙六","shuxue":67,"yuwen":86} ]

二、常用內置指令

1.ng-app指令

  • ng-app指令用來標明一個AngularJS應用程序

  • 標記在一個AngularJS的作用范圍的根對象上

  • 系統執行時會自動的執行根對象范圍內的其他指令

  • 可以在同一個頁面創建多個ng-app節點(不推薦)

  • 創建多個ng-app節點時,默認只能執行第一個，后面的需要自己手動引導 augular.bootstrap()

  • 標記的范圍盡可能小，可以提高性能

<!-- 引入含有兩個小模塊的myModule模塊 --> <body ng-app="myModule"> <div ng-controller="myController1"><input type="button" value="點擊1" ng-click="fun1()"/> </div> ? <div ng-controller="myController2"><input type="button" value="點擊2" ng-click="fun2()"/> </div> ? <script src="js/angular.js"></script> <script>//模塊1var myModule1=angular.module("myModule1",[]);myModule1.controller("myController1",['$scope',function ($scope) {$scope.fun1=function () {console.log(111);}}]);//模塊2var myModule2=angular.module("myModule2",[]);myModule2.controller("myController2",['$scope',function ($scope) {$scope.fun2=function () {console.log(222);}}]);//將模塊1和模塊2放到一個大模塊中var myModule=angular.module("myModule",['myModule1','myModule2']);</script>

2.ng-repeat 指令

  • ng-repeat指令用來編譯一個數組重復創建當前元素

3.ng-class指令

  • ng-class指令可以設置一個鍵值對，用于決定是否添加一個特定的類名，鍵為class名，值為bool類型表示是否添加該類名

<style>.red{color:red;}.green{color:green;}</style> ? <body ng-app="myModule"> ? <ul ng-controller="listController"><!-- 展示數據，并且隔行變色 --><li ng-repeat="item in date" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}"><strong>{{item.name}}</strong><span>{{item.age}}</span></li> </ul> ? ? <script src="js/angular.js"></script> <script>var myModule=angular.module("myModule",[]);myModule.controller("listController",['$scope',function ($scope) {$scope.date=[];for(var i=0;i<10;i++){$scope.date[$scope.date.length]={id:i,name:'張三'+i,age:20+i};}}]) </script>

遍歷名字且查詢變紅

<style>.red{color:red;}.green{color:green;} </style> ? <body ng-app="myModule"> <!-- 將輸入框輸入的元素綁定到ng-class中，實現查詢以startName開頭的名字的功能 --> <input type="text" ng-model="startName"> <ul ng-controller="myController"><!-- 若要遍歷的元素有重復，需要加上track by $index,保證唯一 --><li ng-repeat="name in names track by $index" ng-class="{red:name.startsWith(startName)}">{{name}}</li> </ul> ? <script src="js/angular.js"></script> <script> ?var module=angular.module("myModule",[]); ?module.controller("myController",['$scope',function ($scope) {$scope.names=['張三','李四','王五','趙六','張三'];}]) </script>

4.ng-show/ng-hide 指令

  • ng-show/ng-hide指令會根據屬性值去確定是否展示當前元素，例如ng-show=false則不會展示該元素

<ul class="messages"><li ng-repeat="item in messages track by $index" ng-show="item.read">{{item.content}}</li> </ul>

5.ng-link/ng-src 指令

  • ng-link/ng-src指令用于解決當鏈接類型的數據綁定時造成的加載BUG

總結

以上是生活随笔為你收集整理的angular入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。