angularjs 快速入門,環境搭建 (一)

2021-10-08 07:39:35 字數 2684 閱讀 2531

angularjs 概念概述

引入angularjs 庫

src=

"">

script

>

>

在html的input中新增ng-model實現雙向繫結

>

>

src=

"">

script

>

head

>

>

>

>

name:label

>

type

="text"

ng-model

="yourname"

placeholder

="enter a name here"

>

>

>

hello }!h1

>

ng-bind

="yourname"

>

h1>

div>

body

>

html

>

ng-model 指令把元素值(比如輸入域的值)繫結到應用程式。

ng-bind 指令把應用程式資料繫結到 html 檢視。

ng-init定義變數,ng-bind / }顯示變數

ng-init

="firstname='john'

">

>

姓名為 ng-bind

="firstname"

>

span

>

p>

}div

>

ng-model實現雙向繫結,即改變變數的值,會立刻在頁面中渲染出來

ng-repeat迴圈遍歷陣列

ng-controller定義控制器,as定義控制器的別名

ng-click用來定義事件,後面的方法要有 「()」

}可以顯示變數,裡面可以是js 表示式

="invoice1"

>

>

src=

"../public/js/angular.min.js"

>

script

>

head

>

>

ng-controller

="invoicecontroller as invoice"

>

>

訂單:b

>

>

數量: type

="number"

ng-model

="invoice.qty"

required

>

} div

>

>

單價: type

="number"

ng-model

="invoice.cost"

required

>

} ng-model

="invoice.incurr"

>

ng-repeat

="c in invoice.currencies"

>

}option

>

select

>

div>

>

>

總價:b

>

>

ng-repeat

="c in invoice.currencies"

>

} ---- }

li>

ul>

class

="btn"

ng-click

="invoice.pay()"

>

支付button

>

div>

div>

body

>

html

>

>

angular.

module

('invoice1',[

]).controller

('invoicecontroller',[

'$scope'

,function

($scope)

;this

.total

=function

total

(outcurr)

;this

.convertcurrency

=function

convertcurrency

(amount, incurr, outcurr)

;this

.pay

=function

pay();

}]);

script

>

ExtJS入門 環境搭建

extjs是一種主要用於建立前端使用者介面,是乙個基本與後台技術無關的前端ajax框架。一 引入類庫檔案 extjs類庫介紹 adapter 負責將裡面提供第三方底層庫 包括ext 自帶的底層庫 對映為ext 所支援的底層庫。build 壓縮後的ext 全部原始碼 裡面分類存放 docs api 幫...

vue入門環境搭建

最近,vue.js越來越火。在這樣的大浪潮下,我也開始進入vue的學習行列中,在網上也搜了很多教程,按著教程來做,也總會出現這樣那樣的問題 坑啊,由於網上那些教程都是vue.js 1.x版本的,現在用vue.js 的構建工具都已經公升級到2.0版本了 經過了一段時間的摸索和看官方的教程和api,才了...

Pig入門 環境搭建

pig入門 環境搭建 本文介紹在linux redhat hadoop2.2.0 jdk1.7的環境下安裝pig 0.14.0.二 安裝及配置 1 解壓至安裝目錄 比如 tar zxvf pig 0.14.0.tar.gz c itcast 2 配置 編輯 bash profile檔案 新增 exp...