創(chuàng)建你的第一個AngularJS應(yīng)用的方法

更新時間：2015年06月16日 11:47:17 投稿：goldensun

這篇文章主要介紹了創(chuàng)建你的第一個AngularJS應(yīng)用的方法,AngularJS是一個非常具有人氣的JavaScript框架,需要的朋友可以參考下

按以下步驟來創(chuàng)建AngularJS應(yīng)用
第1步：加載框架

作為一個純粹的JavaScript框架，它可以使用<script>標(biāo)簽來添加。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

第2步：使用ng-app指令定義AngularJS應(yīng)用

<div ng-app="">
...
</div>

第3步：用 ng-model指令定義的模式名稱

<p>Enter your Name: <input type="text" ng-model="name"></p>

第4步：用ng-bind指令將上述模型中的值綁定定義

<p>Hello <span ng-bind="name"></span>!</p>

按以下步驟來運(yùn)行AngularJS應(yīng)用

使用上面提到的三個步驟在HTML頁中。
testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

輸出

在Web瀏覽器打開textAngularJS.html。請輸入姓名并看到的結(jié)果。

2015616114947849.png (611×329)

如何讓AngularJS與HTML集成

ng-app指令指示AngularJS應(yīng)用的開始。
ng-model指令創(chuàng)建一個名為“name”的模型變量在HTML頁面中，并有ng-app指令在div內(nèi)使用。
ng-bind使用模型名稱只要在文本框中用戶輸入的東西顯示在HTML span標(biāo)簽。
結(jié)束</ div>標(biāo)記表示AngularJS應(yīng)用程序的結(jié)束。

您可能感興趣的文章:

AngularJS

相關(guān)文章

淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法
這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例
這篇文章主要介紹了AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
淺談Angular路由復(fù)用策略
本篇文章主要介紹了淺談Angular路由復(fù)用策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
angularJS與bootstrap結(jié)合實(shí)現(xiàn)動態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章
2015-10-10
AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制,結(jié)合實(shí)例形式分析了AngularJS雙向數(shù)據(jù)綁定機(jī)制的原理及實(shí)現(xiàn)方法,以及減少需要重復(fù)開發(fā)代碼量的優(yōu)勢,需要的朋友可以參考下
2017-01-01
什么是 AngularJS？AngularJS簡介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡介,本文講解了AngularJS方方面面的基礎(chǔ)知識,AngularJS 是一個為動態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下
2014-12-12
Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能,結(jié)合實(shí)例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
AngularJS中如何使用echart插件示例詳解
之前因?yàn)轫?xiàng)目的需求，第一次系統(tǒng)的使用了angular這一優(yōu)秀的js框架，其所擁有的許多優(yōu)秀特性極大的方便了項(xiàng)目的開發(fā)，然而在開發(fā)中也遇到過不少的問題，趁著最近有時間給大家總結(jié)一下，這篇文章將會介紹使用angularjs1結(jié)合百度的圖表插件echart作為例子用以演示。
2016-10-10
angular4筆記系列之內(nèi)置指令小結(jié)
這篇文章主要介紹了angular4筆記系列之內(nèi)置指令小結(jié),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11