首页 > 其他分享 >AngularJs简单使用

AngularJs简单使用

时间:2023-02-27 22:57:51浏览次数:41  
标签:firstName app 简单 AngularJs 使用 scope password angular

官方的中文文档地址https://angular.cn/start

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>angular测试</title>

    </head>

    <body>

        <!--<div ng-app="a" ng-init="firstTime='2023-02-24 15:28:00'">
                    <span ng-bind="firstTime"></span>        
        </div>-->
        
        <!--ng-app标记一个dom节点,让框架会自动加载,标记的这个节点的所有元素都是angularJS的所有者,这里的ng-app只能出在一个,存在多个会报错-->
        <div ng-app="b" ng-controller="qiuxieCtrl">
            <p>名字 : <input type="text" ng-model="name"></p>
            <!--根据输入的数据显示-->
            <h1>Hello {{name}}</h1>
            <!--和某个innerHtml段落绑定-->
            <p ng-bind="name">
        
            </p>


            姓名: <input type="text" ng-model="firstName"><br> 密码: <input type="text" ng-model="password"><br>
            <br> 姓名/密码: {{firstName + "/" + password}}

        </div>
    </body>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script >
        var app = angular.module('b', []);
        app.controller('qiuxieCtrl', function($scope) {
            $scope.firstName = "请输入用户名";
            $scope.password = "请输入用户密码";
        });
    </script>

</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>angular测试</title>
	</head>
	<body ng-app>
		<!--
			以ng-开头表示的是指令
			ng-app告诉angular核心它管理当前标签所包含的整个区域并且会自动创建根作用于对象
			ng-model 将当前输入框的值与谁关联,并作为当前作用域对象的属性
			{{}}显示数据
		-->
		
		<input type="text" ng-model="content" >
		<p>
			您输入的内容是:
			<span>{{content}}</span>
		</p>
	</body>
	 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</html>

  

标签:firstName,app,简单,AngularJs,使用,scope,password,angular
From: https://www.cnblogs.com/q202105271618/p/17149795.html

相关文章

  • Java实现简单薪水计算器相关操作代码
    /***薪水计算器*1.通过键盘输入用户的月薪,每年是几个薪水*2.输出用户年薪*3.输出一行字“如果年薪超过10万,恭喜你超越了90%的国人;如果年薪超过了20万,恭喜你超越了......
  • Java实现简单个人所得税计算器相关操作代码
    /***个税计算器*1.通过键盘输入用户的月薪*2.百度搜素个税计算方法,计算出应缴纳的税款*3.直到键盘输入88,则退出程序(使用break语句退出循环)*应纳税所得额=工资收......
  • 使用构造函数 创建3个商品 放到数组中
    类packagecom.fqs.demo1;publicclassShop{privateStringid;privateStringname;privatedoubleprice;privateintkucun;//空参......
  • 【Cassandra】Cassandra在spring boot中的使用
    1、depedency<dependency><groupId>org.springframework.data</groupId><artifactId>spring-data-cassandra</artifactId></dependency>2、propertiesspring.da......
  • 接口测试工具POSTMAN的使用
    接口测试工具postmanpython------------------------------------作为后端,写好了接口,我们自己要测试通过,再给别人用------------------------------------写的接口,......
  • npm是使用
    常用命令npmviewXXXversions:获取插件在npm上的所有版本开发中遇到的问题误删:npm被误卸载,需要卸载node,在重新安装node,参考:https://blog.csdn.net/huangpb123/ar......
  • Java应用【八】使用网络编程进行 socket 通信
    如果您觉得本博客的内容对您有所帮助或启发,请关注我的博客,以便第一时间获取最新技术文章和教程。同时,也欢迎您在评论区留言,分享想法和建议。谢谢支持!相关阅读:​​Java应用【......
  • Druid(德鲁伊)数据池配置文件详解以及简单的实现
    搭建Druid数据池,需要导入两个包druid-1.1.5.jarmysql-connector-java-5.1.41-bin.jar 首先在src目录下新建一个druid.properties配置文件,然后在这个文件中封装配置信......
  • 【Azure 存储服务】使用REST API操作Azure Storage Table,删除数据(Delete Entity)
    问题描述使用AzureStorageTable的RESTAPI,实现根据过滤条件删除满足条件的数据,调用方法为  DeleteEntity(AzureStorage) 问题实现第一步:通过AzureStroage门......
  • rabbitmq管理界面的使用
    有人问,我是开发,页面对我有用么?当然有用额,通过页面可以验证后台配置和预期的效果是否一致。而且页面的可视化,以及操作性比代码更加方便。文章目录​​queue界面​​​......