AngularJs简单使用

官方的中文文档地址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>

  

posted @ 2023-02-27 22:45  不忘初心2021  阅读(13)  评论(0编辑  收藏  举报