前端开发工程师——AngularJS

最新推荐文章于 2024-06-17 16:21:18 发布

南栀北夏ii

最新推荐文章于 2024-06-17 16:21:18 发布

阅读量447

点赞数 2

分类专栏：前端工程师学习文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74421072/article/details/139257166

版权

前端工程师学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.表达式和语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app>
    <!-- ng-app指令： 表示告诉angular它管理当前标签所包含的整个区域，并且会自动创建$rootScope跟作用域对象-->
    <!-- ng-model:表示当前输入框的值与谁关联（属性名：属性值） ，username表示属性名，{{username表示属性值}}他是表达式，获取属性值-->
    <input type="text" ng-model="username">
    <p>您输入的内容是：<span>{{username}}</span></p>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app ng-init="username='tom'">
    <!-- ng-init:用来初始化当前作用域变量 -->
    <!-- ng-model双向数据绑定 -->
    <input type="text" ng-model="username">
    <p>姓名1：<span>{{username}}</span></p><br/>
    <input type="text" ng-model="username">
    <p>姓名2:<span>{{username}}</span></p>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

作用域对象和控制器对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app>
    <!-- 控制器对象 
        用来控制Angular应用数据的实例对象
        ng-controller：用来指定控制器构造函数，Angular会自动new此函数创建控制器对象
        同时还会创建一个新的作用域对象$scope,他是$rootScope的子对象
        在控制器函数中声明$scope形参，Angular会自动将$scope传入
    -->

    <div ng-controller="MyController">
        <input type="text" placeholder="姓" ng-model="firstname">
        <input type="text" placeholder="名" ng-model="lastname">
        <p>输入的姓名为：{{firstname + '-' + lastname}}</p>
        <p>输入的姓名2为：{{getName()}}</p>
    </div>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
    <script>
        function MyController($scope){
            console.log($scope);
            $scope.firstname = 'kobe';
            $scope.lastname = "tom";
            $scope.getName = function(){
                return $scope.firstname + '' + $scope.lastname;
            }
        }
    </script>
</body>
</html>