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>

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

=====

angularJS入门小Demo【简单测试js代码的方法】的更多相关文章

  1. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  2. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  3. 一些简单的Js代码的封装

    1 function getById(id) { 2 3 } 4 5 function getAttr(el, k) { 6 7 } 8 9 function setAttr(el, k, v) { ...

  4. easyui中设置开始日期只能选择比结束日期小的日期，js代码获取日期的值

    $("#start_date").datebox({ onSelect: function (beginDate) { $('#end_date').datebox().dateb ...

  5. FastDFS简单入门小demo

    图片上传 需要引入 FastDFS 相关的jar包,但是这个jar没有在中央仓库,所以还得需要找到这个jar手动安装到自己的本地仓库才能使用. 需要一个配置文件   fdfs_client.conf ...

  6. gulp安装+一个超简单入门小demo

    gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...

  7. 两段简单的JS代码防止SQL注入

    1.URL地址防注入: //过滤URL非法SQL字符var sUrl=location.search.toLowerCase();var sQuery=sUrl.substring(sUrl.inde ...

  8. facebook页面种简单测试js调用flash开放的js接口的方法

    无意间折腾出来的,此方法很triky,但是很简单有效. 背景说明: facebook种内嵌的iframe无法直接访问. 解决方法: chrome浏览器为例 1.右键查看iframe源代码,此时进入if ...

  9. 1.Django入门小Demo

    1.Django安装 (1)前提:已安装python环境 (2)打开命令行输入:pip install Django==2.1.3 (3)打开Pycharm,在File--Setting--Proje ...

随机推荐

  1. Win10系统XWware虚拟机安装Linux系统（Ubuntu）最新版教程

    XWware虚拟机安装Linux系统(Ubuntu)教程 一.下载并安装VMware虚拟机 借助VMware Workstation Pro, 我们可以在同一台Windows或Linux PC上同时运 ...

  2. 第3章 TCP协议详解

    第3章 TCP协议详解 3.1 TCP服务的特点 传输协议主要有两个:TCP协议和UDP协议,TCP协议相对于UDP协议的特点是 面向连接使用TCP协议通信的双方必须先建立连接,完成数据交换后,通信双 ...

  3. Python全栈 正则表达式（re模块正则接口全方位详解）

    re模块是Python的标准库模块 模块正则接口的整体模式 re.compile 返回regetx对象 finditer fullmatch match search 返回 match对象 match ...

  4. 397. Longest Continuous Increasing Subsequence

    Description Give an integer array,find the longest increasing continuous subsequence in this array. ...

  5. Firefox-css-hack

    先记下:之后研究.试了一下,新版本FF-32.0效果不错,低版本还没测试. @-moz-document url-prefix() { .container { ... }}

  6. 【Linux 运维】 Centos7.x 系统修复模式

    一.linux的运行级别: 运行级别就是来确定系统启动时到底启动那个服务. linux默认有7个运行级别: 0 关机 1 单用户模式,用于系统修复 2 不完全的命令模式,不含NFS服务 3 完全的命令 ...

  7. Thunder团队第二周 - Scrum会议3

    Scrum会议3 小组名称:Thunder 项目名称:爱阅app Scrum Master:代秋彤 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传 ...

  8. C++基础和STL，Effective C++笔记

    这个作者总结的c++基础,特别好. 可以看看. http://blog.csdn.net/tham_/article/details/51169792

  9. java日期格式处理

    继承关系:java.lang.Object->java.text.Format->java.text.DateForm->java.text.SimpleDateFormat 日期代 ...

  10. iOS- Swift实现UITableView的常见操作

    1.前言   Swift在这就不多介绍了,想必大家都已皆知. 离Swift面世也过了有一个多月的时间. 在闲暇时间我用Swift实现了UITableView的一些常见操作. 基本都是可以用上的,今天在 ...