使用JavaScript的AngularJS庫(kù)編寫(xiě)hello world的方法

更新時(shí)間：2015年06月23日 09:10:34 投稿：goldensun

這篇文章主要介紹了使用JavaScript的AngularJS庫(kù)編寫(xiě)hello world的方法,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下

本文展示了AngularJS框架實(shí)現(xiàn)的hello world代碼示例.

如下是一些你在看Hello World 示例和接下來(lái)的代碼示例時(shí)需要重點(diǎn)關(guān)注的方面.

ng-app, ng-controller, ng-model 指令
帶有兩個(gè)大括弧的模板

步驟 1: 在<Head>部分包含Angular Javascript

將下面的代碼包含入 <head></head> 中，以引入 Angularjs javascript 文件. 可以用如下寫(xiě)法從 Google 管理的庫(kù) 獲得最新的代碼.

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

步驟 2: 將 ng-app 指令應(yīng)用到 <Html> 元素

如下將ng-app指令應(yīng)用到 <html> 元素. 可以選擇給app指定名稱. 它可以被簡(jiǎn)單的寫(xiě)作<html ng-app>. 這一指令被用來(lái)標(biāo)記Angular會(huì)識(shí)別作為我們應(yīng)用程序的根元素的html元素. 這給了應(yīng)用程序開(kāi)發(fā)者告訴Angular整個(gè)html頁(yè)面或者只是其中一部分應(yīng)該作為Angular應(yīng)用程序來(lái)對(duì)待的自由.

<html ng-app="helloApp">

步驟 3: 將 ng-controller 指令應(yīng)用到 <Body> 元素

將 ng-controller 指令應(yīng)用到 <Body> 元素. controller 指令可以被應(yīng)用在任何元素上，比如div。在下面的代碼中，, “HelloCtrl” 是控制器的名稱，可以被放在<head>元素處<script></script>中的控制器代碼引用.

<body ng-controller="HelloCtrl">

步驟 4: 將ng-model指令應(yīng)用到輸入元素

可以使用ng-model指令將輸入同模型綁定在一起.

<input type="text" name="name" ng-model="name"/>

步驟 5: 編寫(xiě)模板代碼

下面是展示名稱為“name”的模型的模型值的模板代碼. 注意名稱為“name”的模型被綁定到了步驟四中的輸入上.

Hello {{name}}! How are you doing today?

步驟 6: 在<Script>中創(chuàng)建控制器代碼

向下面這樣在script元素中創(chuàng)建控制器代碼. 在下面的代碼中， “helloApp”是在<html>元素中使用ng-app指令定義了的模塊的名稱. 接下來(lái)的一行代碼展示了用在<body>元素中使用ng-controller指令定義的名稱“HelloCtrl”創(chuàng)建一個(gè)控制器. 控制器 “HelloCtrl”被注冊(cè)到了這個(gè)模塊——“helloApp”. 最后一行代碼展示將模型同 $scope 對(duì)象關(guān)聯(lián)了起來(lái)

<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>

完整的代碼請(qǐng)看這里。

您可能感興趣的文章:

AngularJS

相關(guān)文章

Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過(guò)程及示例代碼，文中通過(guò)示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來(lái)看看。
2016-10-10
簡(jiǎn)單實(shí)現(xiàn)AngularJS輪播圖效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)AngularJS輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
angular.js指令中的controller、compile與link函數(shù)的不同之處
最近一位大神問(wèn)了我angular.js指令中的controller、compile與link函數(shù)的不同，想了想居然回答不出來(lái)，所以必須要深入的探究下，下面這篇文章主要介紹了關(guān)于angular.js指令中的controller、compile與link函數(shù)的不同之處，需要的朋友可以參考下。
2017-05-05
AngularJS初始化過(guò)程分析(引導(dǎo)程序)
這篇文章主要介紹了AngularJS初始化過(guò)程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過(guò)程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下
2014-12-12
在Angular中實(shí)現(xiàn)一個(gè)級(jí)聯(lián)效果的下拉框的示例代碼
這篇文章主要介紹了在Angular中實(shí)現(xiàn)一個(gè)級(jí)聯(lián)效果的下拉框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Angular實(shí)現(xiàn)form自動(dòng)布局
這篇文章主要介紹了Angular實(shí)現(xiàn)form自動(dòng)布局的相關(guān)資料，以代碼片段的形式分析了Angular實(shí)現(xiàn)form自動(dòng)布局的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2016-01-01
AngularJS中的過(guò)濾器使用詳解
這篇文章主要介紹了AngularJS中的過(guò)濾器使用詳解,過(guò)濾器是AngularJS中處理文本的一個(gè)非常有用的功能,需要的朋友可以參考下
2015-06-06
對(duì)angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法詳解
這篇文章主要介紹了Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了基于directive自定義指令實(shí)現(xiàn)attribute繼承的具體步驟與相關(guān)技巧,需要的朋友可以參考下
2016-08-08
解決angularjs前后端分離調(diào)用接口傳遞中文時(shí)中文亂碼的問(wèn)題
今天小編就為大家分享一篇解決angularjs前后端分離調(diào)用接口傳遞中文時(shí)中文亂碼的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08