AngularJS入門-(3)hello world

第1步:加載框架

 <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

第2步:使用ng-app指令定義AngularJS應用

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

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

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

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

<h1>Hello {{name}}</h1>

實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script></head>
<body>

<!--ng-app 指令告訴 AngularJS,<div> 元素是 AngularJS 應用程序 的"所有者"。-->
<div ng-app="">
 <!--  ng-model 指令把輸入域的值綁定到應用程序變量 name。-->
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章