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>
复制代码

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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 @   不忘初心2021  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  AngularJs双向数据绑定
·  angularJs模块对象，常用指令
·  Angularjs——初识AngularJS
·  ng-app指令下的DOM XSS | AngularJS 表达式
·  Angular学习截图01
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手