創(chuàng)建你的第一個(gè)AngularJS應(yīng)用的方法
更新時(shí)間：2015年06月16日 11:47:17 投稿：goldensun
這篇文章主要介紹了創(chuàng)建你的第一個(gè)AngularJS應(yīng)用的方法,AngularJS是一個(gè)非常具有人氣的JavaScript框架,需要的朋友可以參考下
按以下步驟來(lái)創(chuàng)建AngularJS應(yīng)用
第1步：加載框架
作為一個(gè)純粹的JavaScript框架，它可以使用<script>標(biāo)簽來(lái)添加。
<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>
按以下步驟來(lái)運(yùn)行AngularJS應(yīng)用
使用上面提到的三個(gè)步驟在HTML頁(yè)中。
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瀏覽器打開(kāi)textAngularJS.html。請(qǐng)輸入姓名并看到的結(jié)果。
如何讓AngularJS與HTML集成
- ng-app指令指示AngularJS應(yīng)用的開(kāi)始。
- ng-model指令創(chuàng)建一個(gè)名為“name”的模型變量在HTML頁(yè)面中，并有ng-app指令在div內(nèi)使用。
- ng-bind使用模型名稱只要在文本框中用戶輸入的東西顯示在HTML span標(biāo)簽。
- 結(jié)束</ div>標(biāo)記表示AngularJS應(yīng)用程序的結(jié)束。
相關(guān)文章
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)?lái)一篇淺析angularJS中的ui-router和ng-grid模塊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法
這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例
這篇文章主要介紹了AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本篇文章主要介紹了淺談Angular路由復(fù)用策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,通過(guò)bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開(kāi)發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制,結(jié)合實(shí)例形式分析了AngularJS雙向數(shù)據(jù)綁定機(jī)制的原理及實(shí)現(xiàn)方法,以及減少需要重復(fù)開(kāi)發(fā)代碼量的優(yōu)勢(shì),需要的朋友可以參考下2017-01-01
什么是 AngularJS？AngularJS簡(jiǎn)介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡(jiǎn)介,本文講解了AngularJS方方面面的基礎(chǔ)知識(shí),AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言，通過(guò)擴(kuò)展HTML的語(yǔ)法，讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下2014-12-12
Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能,結(jié)合實(shí)例形式分析了AngularJS簡(jiǎn)單控制頁(yè)面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
之前因?yàn)轫?xiàng)目的需求，第一次系統(tǒng)的使用了angular這一優(yōu)秀的js框架，其所擁有的許多優(yōu)秀特性極大的方便了項(xiàng)目的開(kāi)發(fā)，然而在開(kāi)發(fā)中也遇到過(guò)不少的問(wèn)題，趁著最近有時(shí)間給大家總結(jié)一下，這篇文章將會(huì)介紹使用angularjs1結(jié)合百度的圖表插件echart作為例子用以演示。2016-10-10
這篇文章主要介紹了angular4筆記系列之內(nèi)置指令小結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11