当前位置: 首页 > news >正文

前端开发工程师——AngularJS

一.表达式和语句

<!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>

http://www.lryc.cn/news/357720.html

相关文章:

  • 【AI算法岗面试八股面经【超全整理】——概率论】
  • vue3 使用vant
  • 网络请求客户端WebClient的使用
  • unity制作app(9)--拍照 相册 上传照片
  • 【busybox记录】【shell指令】mkfifo
  • 使用Jmeter进行性能测试的基本操作方法
  • Linux学习笔记(epoll,IO多路复用)
  • STM32定时器及输出PWM完成呼吸灯
  • 海外仓管理系统费用解析:如何选择高性价比的海外仓系统
  • 深度学习之学习率调度器Scheduler介绍
  • 蓝桥杯-AB路线(详细原创)
  • 计算机字符编码的发展
  • Java(六)——抽象类与接口
  • 【4.vi编辑器使用(下)】
  • 【数据结构】探索树中的奇妙世界
  • 搭建YOLOv10环境 训练+推理+模型评估
  • c++(一)
  • java面试中高频问题----1
  • ABB 控制柜
  • 【错误记录】HarmonyOS 运行报错 ( Failure INSTALL_PARSE_FAILED_USESDK_ERROR )
  • 使用C语言openssl库实现 RSA加密 和 消息验证
  • 海外投放面试手册
  • 第十三章 进程与线程
  • Flink面试整理-对Flink的高级特性如CEP(复杂事件处理)、状态后端选择和调优等有所了解
  • 算法:树状数组
  • Kafka SASL_SSL集群认证
  • 同城交友论坛静态页面app Hbuild
  • spring session+redis存储session,实现用户登录功能,并在拦截器里面判断用户session是否过期,过期就跳转到登录页面
  • Debug-013-el-loading中显示倒计时时间
  • 5月29日,每日信息差