使用AngularJS实现一个简单页面

最新推荐文章于 2024-02-07 00:38:51 发布

暮春风

最新推荐文章于 2024-02-07 00:38:51 发布

阅读量7.3k

点赞数 3

文章标签： AngularJS

本文链接：https://blog.youkuaiyun.com/nothing_is_imposible/article/details/50889153

版权

这篇博客介绍了如何使用AngularJS实现一个简单的页面。首先引入angular.js库，然后定义控制器'HelloController'，在HTML中指定ng-app，并通过ng-controller绑定数据，实现了数据的双向绑定，展示了页面的基本功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
   <head>
      <script src="angular.min.js"></script>
   <title>第一个AngularJS程序</title>
   </head>
   <body ng-app="myapp">
      <div ng-controller="HelloController" >
         <h2>你好 ！第一个{{helloTo.title1 +" "+ helloTo.title2}}程序示例（使用对象属性，连接字符串）</h2>
      </div>
      <div ng-controller="HiController">
         <p>我所加的内容：{{helloTo.mycontent}}</p>
         <p>加载数组：{{helloToArr[2]}}</p>
         <li ng-repeat ="arr in helloToArr">
            列表：{{arr}}
         </li>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title1 = "Angular";
            $scope.helloTo.title2 = "JS";
         })
         .controller("HiController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.mycontent = "我从此爱上了Angular！";
            $scope.helloToArr = [1,2,3];
         });
      </script>
   </body>
</html>

实现的效果如图：

步骤：

1.首先引入 angular.js <script src="angular.min.js"></script> 如果没有可以下载压缩版：点击打开链接
2.控制器：在js中添加相应的app名称，如：myapp
angular.module("myapp", [])
.controller("HelloController", function($scope) {
……
});
3.指向AngularJS：在html或body中添加相应的app引用 <body ng-app="myapp">
4.视图：然后就可以实现绑定数据了，可以绑定数组、对象等变量
<div ng-controller="HelloController" >
<h2>你好！第一个{{helloTo.title}}程序示例</h2>
</div>
<div ng-controller="HelloController">
<p>我所加的内容：{{helloTo.mycontent}}</p>
</div>