前端开发工程师——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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/657956.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI播客下载:Acquired podcast每个公司都有一个故事

"Acquired Podcast" 是一档专注于深度解析科技行业和企业发展历程的播客节目&#xff0c;由Ben Gilbert和David Rosenthal主持。其口号是&#xff1a;Every company has a story.《Acquired》每一集都围绕一个特定的主题或公司进行讨论。它以独特的视角和深入的分析&…

FFmpeg编解码的那些事(1)

看了网上很多ffmpeg的编解码的文章和代码&#xff0c;发现有很多文章和代码都过时了&#xff0c;主要还是ffmpeg有很多接口都已经发生变化了。 这里简单说一下&#xff0c;什么是编码和解码。 1.视频编码 对于视频来说&#xff0c;可以理解为多张&#xff08;rgb或者yuv&…

Numba 的 CUDA 示例(1/4):踏上并行之旅

按照本系列从头开始使用 Python 学习 CUDA 编程 介绍 GPU&#xff08;图形处理单元&#xff09;&#xff0c;顾名思义&#xff0c;最初是为计算机图形学开发的。从那时起&#xff0c;它们几乎在每个需要高计算吞吐量的领域都无处不在。这一进步得益于 GPGPU&#xff08;通用 G…

从零开始学React--环境搭建

React官网 快速入门 – React 中文文档 1.搭建环境 下载nodejs,双击安装 nodejs下载地址 更新npm npm install -g npm 设置npm源&#xff0c;加快下载速度 npm config set registry https://registry.npmmirror.com 创建一个react应用 npx create-react-app react-ba…

React-组件基础使用

组件是什么 概念&#xff1a;一个组件就是用户界面的一部分&#xff0c;它可以有自己的逻辑和外观&#xff0c;组件之间可以互相嵌套&#xff0c;也可以复用多次 组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用 React组件 在React中&#xff0c;一个组件就是首…

Rocksdb原理简介

100编程书屋_孔夫子旧书网 Rocksdb作为当下nosql中性能的代表被各个存储组件&#xff08;mysql、tikv、pmdk、bluestore&#xff09;作为存储引擎底座&#xff0c;其基于LSM tree的核心存储结构&#xff08;将随机写通过数据结构转化为顺序写&#xff09;来提供高性能的写吞吐时…

读人工智能时代与人类未来笔记17_人类未来

1. 人类未来 1.1. 在印刷读物出现之前&#xff0c;中世纪的欧洲人主要通过社区传统获取知识 1.1.1. 通过参与收割和季节轮作积累民间智慧 1.1.2. 在礼拜场所践行信仰并遵守圣礼 1.1.3. 加入行业公会&#xff0c;学习技术&…

重置服务器之后 SSH 登录报错:REMOTE HOST IDENTIFICATION HAS CHANGED!

问题原因&#xff1a; 报错是由于远程的主机的公钥发生了变化导致的。ssh服务是通过公钥和私钥来进行连接的&#xff0c;它会把每个曾经访问过计算机或服务器的公钥&#xff08;public key&#xff09;&#xff0c;记录在~/.ssh/known_hosts 中&#xff0c;当下次访问曾经访问…

量子密钥分发系统基础器件(一):光纤干涉仪

干涉仪的基本原理是利用波的叠加来获得波的相位信息&#xff0c;从而获取实验中所关心的物理量。光纤干涉仪是由光学干涉仪发展而来的&#xff0c;利用光纤实现光的干涉&#xff0c;由于光纤取代透镜系统构成的光路具有柔软、形状可随意变化、传输距离远等特点&#xff0c;当前…

MouseBoost Pro for Mac v3.4.7 鼠标右键助手 安装教程【支持M芯片】

MouseBoost Pro for Mac v3.4.7 鼠标右键助手 安装教程【支持M芯片】 原文地址&#xff1a;https://blog.csdn.net/weixin_48311847/article/details/139201501

电源模块测试系统怎么测试输入电压范围?

在现代电子设备中&#xff0c;电源模块的性能直接影响着整个系统的稳定性和效率。其中&#xff0c;电源输入电压范围是指电源能够接受的输入电压的最小值和最大值&#xff0c;它是确保电源正常工作的重要参数。为了提高测试效率和精度&#xff0c;自动化的测试方法逐渐取代了传…

《软件方法(下)》8.3.4.6 DDD话语“聚合”中的伪创新(1)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 8.3 建模步骤C-2 识别类的关系 8.3.4 识别关联关系 8.3.4.6 DDD话语“聚合”中的伪创新 DDD话语中也有“聚合”。Eric Evans的“Domain-Driven Design: Tackling Complexity in the…

04--SpringBoot热部署与日志

1、热部署 1.1 引言 为了进一步提高开发效率&#xff0c;SpringBoot为我们提供了全部项目热部署&#xff0c;日后在开发过程中修改了部分代码或者相关配置文件之后&#xff0c;不需要再重启服务使其生效。在项目中开启了全局热部署之后&#xff0c;只需要在修改之后等待几秒钟…

气密检测中泄漏率的质量流量与体积流量的转换

对于R-134a等制冷剂&#xff0c;泄漏率通常表示为质量流量&#xff08;每年的逸出质量&#xff09;而不是体积流量&#xff08;特定时间段内给定压力下的逸出质量&#xff09;。因此&#xff0c;通过制冷剂的年泄漏量来定义泄漏级别&#xff0c;常用的单位为g/a。以某款车型为例…

Github 2024-05-29 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-29统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目3PHP项目1PHP:流行的Web开发脚本语言 创建周期:4710 天开发语言:C, PHP协议类型:OtherStar数量:37340 个Fork数量:7657 次…

从 0 手撸一个 pytorch

背景介绍 最近抽空看了下 Andrej Karpathy 的视频教程 building micrograd&#xff0c;教程的质量很高。教程不需要任何前置机器学习基础&#xff0c;只需要有高中水平的数学基础即可。整个教程从 0 到 1 手撸了一个类 pytorch 的机器学习库 micrograd&#xff0c;核心代码不到…

SAP PP学习笔记 - 错误 CX_SLD_API_EXCEPTION - Job dump is not fully saved (too big)

我这个错误是跑完MRP&#xff0c;然后在MD04查看在库/所有量一览&#xff0c; 点计划手配&#xff08;Planned order 计划订单&#xff09;生成 制造指图&#xff08;Production order 生产订单&#xff09;&#xff0c; 到目前这几步都OK&#xff0c;然后在制造指图界面点保…

Linux之sshpass命令

介绍 sshpass是一个工具&#xff0c;用于通过SSH连接到远程服务器时自动输入密码。它允许您在命令行中指定密码&#xff0c;以便在建立SSH连接时自动进行身份验证。 安装 # 以centos为例 yum install sshpass -y 使用方法 sshpass [-f filename | -d num | -p password | …

C++笔试强训day35

目录 1.奇数位丢弃 2.求和 3.计算字符串的编辑距离 1.奇数位丢弃 链接https://www.nowcoder.com/practice/196141ecd6eb401da3111748d30e9141?tpId128&tqId33775&ru/exam/oj 数据量不大&#xff0c;可以直接进行模拟&#xff1a; #include <iostream> #incl…

MQTT 5.0 报文解析 06:AUTH

欢迎阅读 MQTT 5.0 报文系列 的最后一篇文章。在上一篇中&#xff0c;我们已经介绍了 MQTT 5.0 的 DISCONNECT 报文。现在&#xff0c;我们将介绍 MQTT 中的最后一个控制报文&#xff1a;AUTH。 MQTT 5.0 引入了增强认证特性&#xff0c;它使 MQTT 除了简单密码认证和 Token 认…