zoukankan      html  css  js  c++  java
  • angularJS入门小Demo【简单测试js代码的方法】

    1、首先建立一个文件夹 demo,

    2、在其中建立一个文本文档,改名为 demo-1.html,

    3、把html中要引入的 js 文件拷贝到 demo目录下,

    4、然后用 Notepadd++ 编辑刚才建立的文件 demo-1.html

    <html>
        <head>
            <title>angularJS入门小demo-1 表达式</title>
            <script src="angular.min.js"></script>
        </head>
        
        <!-- ng-app 是一个angularJS指令意思是加载angularJS引擎
            只有加载了这个引擎,代码中其他用到angularJS的中语法的地方才有效
        -->
        <body ng-app>
        <!-- angularJS表达式的语法 就是两个嵌套的大括号,就像el表达式用${}一样 -->
            {{100+100}}
        </body>
    
    </html>

    5、在文件夹中 双击 demo-1.html 文件,会自动用浏览器打开,效果如下:

     ==========================

    demo2 双向绑定:

    <html>
        <head>
            <title>angularJS入门小demo-2 双向绑定</title>
            <script src="angular.min.js"></script>
        </head>
        
        <!-- ng-app 是一个angularJS指令意思是加载angularJS引擎
            只有加载了这个引擎,代码中其他用到angularJS的中语法的地方才有效
        -->
        <body ng-app>
        <!-- 现在学习第二个指令:绑定 ng-model 
        下面 ng-model="name" 这个name就是我们自定义的在 angularJS 中的一个变量
        这样当前文本框中的内容就和变量 name 进行双向绑定了。
        -->
            请输入姓名:<input ng-model="name">
            <!-- 绑定完变量就可以用 angularJs表达式显示这个变量 -->
            {{name}}
        </body>
    
    </html>

    效果就是我在文本框中输入什么,同时后面就显示什么。

    =====

    我们再绑定一个文本框:

    <html>
        <head>
            <title>angularJS入门小demo-2 双向绑定</title>
            <script src="angular.min.js"></script>
        </head>
        
        <!-- ng-app 是一个angularJS指令意思是加载angularJS引擎
            只有加载了这个引擎,代码中其他用到angularJS的中语法的地方才有效
        -->
        <body ng-app>
        <!-- 现在学习第二个指令:绑定 ng-model 
        下面 ng-model="name" 这个name就是我们自定义的在 angularJS 中的一个变量
        这样当前文本框中的内容就和变量 name 进行双向绑定了。
        -->
            请输入姓名:<input ng-model="name">
            <!-- 绑定完变量就可以用 angularJs表达式显示这个变量 -->
            <input ng-model="name">
            <!-- 我们将两个文本框都绑定到一个变量name上 -->
            {{name}}
        </body>
    
    </html>

    效果就是,这3个地方,只要我们任意修改一个,另外两个也会跟着变,这就是 双向绑定。

    ==========

    下面学习初始化指令

    如果你想在页面运行起来后,对一些变量进行赋值,或者请求一些逻辑后给变量初始化、赋值时就可以在初始化指令中操作

    <html>
        <head>
            <title>angularJS入门小demo-3 初始化指令</title>
            <script src="angular.min.js"></script>
        </head>
    <!-- 初始化指令:给变量name赋初始化值 注意:里面要用单引号 -->
        <body ng-app ng-init="name='陈大海'">
            请输入姓名:<input ng-model="name">
            {{name}}
        </body>
    
    </html>

    =====

    下面讲控制器:我们要做两个值相加

    angularJS讲究模块化编程,比如 它自己的 核心模块就是  ng 模块,所以我们自定义的代码也要搞一个单独的 script 标签,然后在里面定义我们自己的模块,再在我们自定义的模块里面编码

    定义模块的方法如下:

    var app = angular.module(); 通过module()方法来构建模块,这个方法有两个参数,第一个参数就是你自定义的模块的名称,第二个参数是一个中括号数组,这个数组里面放的是其他模块,如果你这个模块用到了其他模块,就需要在这里把其他模块引入进来。

    <html>
        <head>
            <title>angularJS入门小demo-4 控制器</title>
            <script src="angular.min.js"></script>
            <script>
                //建立模块
                var app = angular.module("myApp",[]);
                //然后通过模块来创建控制器
                <!-- 调用模块的controller方法,参数1是自定义的控制器的名称,            参数2就是方法即控制器真正的内容 -->
                <!-- $scope 就是控制层与视图层之间交换数据的桥梁在scope中可以放变量也可以放方法    放进去之后在视图层就能用变量或方法进行绑定操作   -->
                app.controller("myController",function($scope){
                    //在scope中定义一个方法 $scope是一个angular中内置的对象
                    $scope.add=function(){
                    //在控制层取视图层中的东西需要加上$scope前缀
                        //return $scope.x+$scope.y; //这个结果是字符串相加
                        return parseInt($scope.x)+parseInt($scope.y);
                    }
                    
                    <!-- 这个方法就是个普通的js方法,它只能在当前控制层中使用 相当于java里的 private 修饰的方法 -->
                    add2=function(){}
                    <!-- 而上面的 $scope.add 方法相当于java里面被public修饰的方法,它还可以在其对应的视图层中直接使用 -->
                    
                });
            </script>
        </head>
        
        <!-- 这个ng-app的值要和上面建立模块中的第一个参数一样
            也就是说我在代码里要操作的就是 body 这个模块
        -->
        <!-- 在上面模块中创建了一个控制器,在这里的html标签中也要指定当前html节点视图属于哪个控制器 用ng-controller指令 -->
        <body ng-app="myApp" ng-controller="myController">
            <!-- 创建两个目标标签 -->
            第一个数:<input ng-model="x"> 第二个数:<input ng-model="y">
            <!-- 我们现在要算x和y的和 可以用表达式来写,但是当业务特别复杂时表达式就不适合了,所以我们现在在控制器中写 -->
            <!-- {{x+y}} -->
            <!-- 这里使用控制层中定义的方法 -->
            {{add()}}
        </body>
    
    </html>

     

    效果就是 后面的值是前面两个之和。

    =====

  • 相关阅读:
    MyImages
    【优惠&正版】超级硬盘数据恢复软件(SuperRecovery)7.1正版注册码(39元一机终身授权,支持最新版)
    【2020年4月24日】TTradmin v2.3.2 简单好用的临时远程协助软件
    Radmin Center 1.54 测试版
    VS2015 编译原版 tightvnc 2.8.27 源码
    Centos 安装 Go 编译环境
    GHO文件安装到Vmware的两种姿势
    Radmin Server v3.5.2.1 汉化破解绿色版,完整版+精简版【20190505更新】
    系统服务监视、系统服务守护 ServiceMonitor
    API Monitor v2.0 Alpha-r13 (32+64) 汉化版
  • 原文地址:https://www.cnblogs.com/libin6505/p/9968064.html
Copyright © 2011-2022 走看看