AngularJS 简单语法

最新推荐文章于 2020-12-08 16:13:03 发布

yaoyuan-yy

最新推荐文章于 2020-12-08 16:13:03 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/YYecust/article/details/52238511

本文通过实例详细介绍了AngularJS的基本特性和使用方法，包括双向绑定、依赖注入等关键概念，并展示了如何利用AngularJS创建简单的应用。

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

AngularJS的特性有双向绑定和依赖注入，下面几个例子就来展示这些特性
在VSC中，输入!+TAB就可以生成一个基本的HTML页面，然后是引入angular.js
我在一本书上看到是加在Body之前引入最好，那就这样吧

双括号语法

在双括号中的JS可以运行，如以下代码

$ cat 1.index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-controller="myCtrl">
    {{1 + 1}}
    </div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function() {

            })
    </script>
</body>
</html>

打开浏览器，会显示2
说明执行了1+1
由于代码相似，以下仅给出body元素之间的代码

$scope

$scope意为作用域，可以对controller中的元素进行操作
将1+1改为a，同时修改controller

<div ng-controller="myCtrl">
    {{a}}
    </div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function($scope) {
                $scope.a = 'My First Angular App';
            })
    </script>

打开浏览器，发现显示了
My First Angular App
可见变量a被解析了

注意到function参数表中多了一个$scope,
函数体中使用了$scope 这就是依赖注入

模型与双向绑定

模型model对应数据
以下这个例子，是AngularJS中最著名的

    <div ng-controller="myCtrl">
        <input type="text" ng-model="a">
        {{a}}
    </div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function($scope) {
            })
    </script>

这样在input中输入什么，下方就会显示什么，所谓双向绑定

ng-repeat

ng-repeat可以实现一个foreach，语法为
ng-repeat”对象 in 对象数组”
{{对象}}
如以下代码

    <div ng-controller="myCtrl">
      <div ng-repeat="name in names">
        <p>{{name}}
      </div>
    </div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function($scope) {
              $scope.names = ['a','b','c','d','e']
            })
    </script>

ng-click

ng-click可绑定一个函数，当有点击事件时则调用函数

  <div ng-controller="myCtrl">
    <button ng-click="click()">Say Hello</button>
    {{a}}
  </div>
  <script src="node_modules/angular/angular.js"> </script>
  <script>
    angular.module('myApp', [])
      .controller('myCtrl', function($scope) {
        $scope.click = function() {
        $scope.a = 'Hello';
      }
    })
  </script>