創(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é)果。
如何讓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é)束。
相關(guān)文章
AngularJS定時器的使用與移除操作方法【interval與timeout】
這篇文章主要介紹了AngularJS定時器的使用與移除操作方法,結(jié)合實例形式分析了AngularJS中interval與timeout方法的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了詳解Angular6 熱加載配置方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angular19 自定義表單控件的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法
這篇文章主要介紹了AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法,分析了問題的原因及AngularJS設(shè)置禁止IE對ajax緩存的實現(xiàn)方法,需要的朋友可以參考下2016-08-08
本文將要分析的是經(jīng)常用到的路由中間件 -- koa-router，詳細(xì)的介紹了koa-router概述和實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要介紹了淺談angular.js跨域post解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
angula中使用iframe點擊后不執(zhí)行變更檢測的問題
這篇文章主要介紹了angula中使用iframe點擊后不執(zhí)行變更檢測問題，本文給大家分享解決方案，通過實例代碼給的大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
AngularJS基礎(chǔ) ng-keydown 指令簡單示例
本文主要介紹AngularJS ng-keydown 指令,在這里幫大家整理了ng-keydown 指令的基礎(chǔ)資料,并附有代碼,有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了基于AngularJS實現(xiàn)的工資計算器,結(jié)合具體實例形式分析了AngularJS數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
Angular項目中使用scss文件的一些技巧小結(jié)
SCSS是Sass 3引入新的語法,其語法完全兼容 CSS3,并且繼承了Sass的強(qiáng)大功能,下面這篇文章主要給大家介紹了關(guān)于Angular項目中使用scss文件的一些技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05