angularjs的hello world程序

最新推荐文章于 2020-07-19 09:04:21 发布

andeyeluguo

最新推荐文章于 2020-07-19 09:04:21 发布

阅读量315

点赞数

分类专栏： angularJS

本文链接：https://blog.youkuaiyun.com/andeyeluguo/article/details/77748692

版权

angularJS 专栏收录该内容

1 篇文章

订阅专栏

angularjs的hello world程序如下

1.第一程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

ng-app含义表示这个div受angularjs支配，好像一个无形的大手在操纵

ng-model表示将input的值这个绑定到了{{name}}这个区域

2.第二程序

hello word2程序为

<div ng-app="" ng-init="firstName='John'">
 
<p>姓名为 <span ng-bind="firstName"></span></p>
 {{5+4}}
</div>

ng-init初始化一些变量

ng-bind将变量绑定

{{}}内可以写一些计算表达式

3.第三程序

<div ng-app="myApp" ng-controller="myCtrl"> //定义myApp程序，引用控制器

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);   //
app.controller('myCtrl', function($scope) { //定义控制器
    $scope.firstName= "zhao";
    $scope.lastName= "dezan";
});
</script>

</body>
</html>

注意

1. 数据绑定的思想ng-model表示数据的绑定

2. $scope是连接阴阳两界的纽带

[1] angularjs简介