當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

angular入门

發(fā)布時(shí)間：2025/3/20 编程问答 22 豆豆

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

一、angular入門

1.雙邊數(shù)據(jù)綁定

2.模塊

3.Controller

4.表達(dá)式（Expression）

5.內(nèi)置服務(wù)

二、常用內(nèi)置指令

1.ng-app指令

2.ng-repeat 指令

3.ng-class指令

4.ng-show/ng-hide 指令

5.ng-link/ng-src 指令

一、angular入門

1.雙邊數(shù)據(jù)綁定

<div ng-app> <h1>使用angular實(shí)現(xiàn)雙邊數(shù)據(jù)綁定</h1> <p><input type="text" placeholder="請(qǐng)輸入你的姓名" ng-model="user.name"></p> <p>hello<strong>{{user.name}}</strong></p> </div> <script src="js/angular.js"></script>

運(yùn)行流程：

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

2.模塊

劃分應(yīng)用程序結(jié)構(gòu)
我們可以通過angular.module創(chuàng)建一個(gè)模塊
angular.module方法傳遞兩個(gè)參數(shù)才是創(chuàng)建模塊，一個(gè)參數(shù)是獲取模塊

<div ng-app="myApp" ng-controller="DemoController"><h1>使用angular實(shí)現(xiàn)雙邊數(shù)據(jù)綁定</h1><p><input type="text" placeholder="請(qǐng)輸入你的姓名" 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>//注冊(cè)模塊，通過module函數(shù)//第一個(gè)參數(shù)：這個(gè)模塊的名字//第二個(gè)參數(shù)：這個(gè)模塊所依賴的模塊，如果什么都不依賴也需要穿空數(shù)組//返回剛剛創(chuàng)建的模塊var app = angular.module("myApp",[]);//創(chuàng)建一個(gè)控制器，該控制器屬于myApp模塊//控制器函數(shù)的參數(shù)：$scopeapp.controller("DemoController",function ($scope) {//當(dāng)控制器執(zhí)行時(shí)會(huì)自動(dòng)執(zhí)行里面的函數(shù)$scope.user={};$scope.user.name='張三';//$scope不僅僅可以往視圖中暴露數(shù)據(jù)，還可以暴露行為$scope.show=function () {alert($scope.user.name);}}); </script>

3.Controller

調(diào)度邏輯的集合

控制器的三種主要職責(zé)：
- 為應(yīng)用中的模型設(shè)置初始狀態(tài)
- 通過$scope對(duì)象把數(shù)據(jù)模型或函數(shù)行為暴露給視圖
- 監(jiān)視模型的變化，做出相應(yīng)的動(dòng)作

$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>// 創(chuàng)建一個(gè)模塊var myModule=angular.module("myModule",[]);// 為這個(gè)模塊創(chuàng)建一個(gè)控制器myModule.controller("loginController",['$scope',function ($scope) {// 數(shù)據(jù)$scope.user={username:"",password:""}; ?// 行為數(shù)據(jù)$scope.login=function () {// 因?yàn)閿?shù)據(jù)的變化時(shí)雙向的同步，所以界面上的值變化會(huì)同步到$scope.user上console.log($scope.user);} ?// 請(qǐng)輸入用戶名輸入格式不合法$scope.message = '請(qǐng)輸入用戶名'; ?// 官方的API中提供了一個(gè)$scope.$watch方法，$scope.$watch('user.username', function(now, old) {// 當(dāng)user.username發(fā)生變化時(shí)觸發(fā)這個(gè)函數(shù)if (now) {if (now.length < 7) {$scope.message = '輸入格式不合法';} else {$scope.message = '';}} else {$scope.message = '請(qǐng)輸入用戶名';}});}]) </script>

4.表達(dá)式（Expression）

作用：

? 使用?表達(dá)式?把數(shù)據(jù)綁定到 HTML。

語法：

? 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}。

比較：

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

AngularJS表達(dá)式很像JavaScript表達(dá)式

它們可以包含文字、運(yùn)算符和變量

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

數(shù)字 {{ 100 + 100 }} 字符串 {{ 'hello' + 'angular' }} 對(duì)象 {{ zhangsan.name }} 數(shù)組 {{ students[10] }}

5.內(nèi)置服務(wù)

我們的數(shù)據(jù)一般都是從后端獲取的，那么如何獲取數(shù)據(jù)呢？我們一般使用內(nèi)置服務(wù)$http 來實(shí)現(xiàn)。
下面模擬從后端獲取數(shù)據(jù)

<body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table><tr><td>姓名</td><td>數(shù)學(xué)</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} ]

二、常用內(nèi)置指令

1.ng-app指令

ng-app指令用來標(biāo)明一個(gè)AngularJS應(yīng)用程序
標(biāo)記在一個(gè)AngularJS的作用范圍的根對(duì)象上
系統(tǒng)執(zhí)行時(shí)會(huì)自動(dòng)的執(zhí)行根對(duì)象范圍內(nèi)的其他指令
可以在同一個(gè)頁面創(chuàng)建多個(gè)ng-app節(jié)點(diǎn)(不推薦)
創(chuàng)建多個(gè)ng-app節(jié)點(diǎn)時(shí),默認(rèn)只能執(zhí)行第一個(gè)，后面的需要自己手動(dòng)引導(dǎo) augular.bootstrap()
標(biāo)記的范圍盡可能小，可以提高性能

<body ng-app="myModule"> <div ng-controller="myController1"><input type="button" value="點(diǎn)擊1" ng-click="fun1()"/> </div> ? <div ng-controller="myController2"><input type="button" value="點(diǎn)擊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放到一個(gè)大模塊中var myModule=angular.module("myModule",['myModule1','myModule2']);</script>

2.ng-repeat 指令

ng-repeat指令用來編譯一個(gè)數(shù)組重復(fù)創(chuàng)建當(dāng)前元素

3.ng-class指令

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

遍歷名字且查詢變紅

4.ng-show/ng-hide 指令

ng-show/ng-hide指令會(huì)根據(jù)屬性值去確定是否展示當(dāng)前元素，例如ng-show=false則不會(huì)展示該元素

<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指令用于解決當(dāng)鏈接類型的數(shù)據(jù)綁定時(shí)造成的加載BUG

總結(jié)

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

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

上一篇： dubbo配置（一）
下一篇：在IntelliJ IDEA中使用git