前端开发工程师——AngularJS

embedded/2024/9/25 23:24:21/

一.表达式和语句

<!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.ppmy.cn/embedded/43278.html

相关文章

央视网视频下载和花屏问题处理

央视网(www.cctv.com)视频下载往往是花屏的&#xff0c;如何处理呢&#xff1f; 如果您是IT技术开发者&#xff0c;那么您可以通过下面步骤自己实现。 用chrome浏览器&#xff0c;F2打开开发者工具&#xff0c;找到当前页面的network 然后找一个接口&#xff1a;https://vdn.a…

57. UE5 RPG 处理AI敌人转向以及拾取物品的问题

在上一篇文章中&#xff0c;我们实现了使用AI行为树控制敌人进行移动&#xff0c;它们可以一直跟随玩家&#xff0c;虽然现在还未实现攻击。但在移动过程中&#xff0c;我发现了有两个问题&#xff0c;第一个是敌人转向的时候很僵硬&#xff0c;可以说是瞬间转向的&#xff0c;…

Git原理及常用命令小结——实用版(ing......)、Git设置用户名邮箱

Git基本认识 Git把数据看作是对小型文件系统的一组快照&#xff0c;每次提交更新&#xff0c;或在Git中保存项目状态时&#xff0c;Git主要对当时的全部文件制作一个快照并保存这个快照的索引。同时&#xff0c;为了提高效率&#xff0c;如果文件没有被修改&#xff0c;Git不再…

【软考高项】- 2024.05.25 第一批考情介绍

一、选择题 1、信息化融合包含内容&#xff0c;产品&#xff0c;产业&#xff0c;等。 2、it内部审计 3、排列活动的数据表现工具 4、费用现值法 5、数据安全法 6、专利&#xff0c;外观设计&#xff0c;实用新型 7、有好几个过程定义和作用。 8、甲乙两公司&#xff0…

Java 8 HashMap源码解析

一、引言 HashMap是Java集合框架中最重要的类之一&#xff0c;它基于哈希表实现&#xff0c;提供了快速的插入和查找操作。在Java 8中&#xff0c;HashMap得到了一些改进&#xff0c;包括引入了红黑树&#xff08;在链表长度超过一定阈值时&#xff09;来优化查找和插入性能。…

香橙派AI Pro测评--ROS及激光SLAM

文章目录 前言一、外形与质感二、软件测评1. 系统界面2. ROS安装3. ROS节点测试4. SLAM算法测试 总结 前言 今天刚收到了官方寄来的“香橙派 AI Pro”开发板&#xff0c;这篇文章将会对香橙派 AI Pro的外形、质感、运行速度进行一个测评&#xff0c;然后我会在这个开发板上安装…

Golang | Leetcode Golang题解之第102题二叉树的层序遍历

题目&#xff1a; 题解&#xff1a; func levelOrder(root *TreeNode) [][]int {ret : [][]int{}if root nil {return ret}q : []*TreeNode{root}for i : 0; len(q) > 0; i {ret append(ret, []int{})p : []*TreeNode{}for j : 0; j < len(q); j {node : q[j]ret[i] …

Java基础:桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09;主要用于将抽象部分与其实现部分分离&#xff0c;使它们可以独立变化。这种模式通过创建一个抽象类和实现了该抽象类的具体类之间的桥梁来实现这一目的&#xff0c;从而让抽象类和它的实现可以以组合的方式耦合&#xff0c;而不…