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. python里pickle模块

    Pickle模块用于将复杂的文件转化为二进制的文件 pickle模块一般是在源代码里面含有较大的字典或者列表等复杂文件时,我们如果将文件直接写在源代码里面,这样会使得代码很冗余,并且源代码文件所占空间 ...

  2. Python的包（Packages）

    包,Package,是一种Python模块的集合,从文件组织形式上看,包就是一个文件夹,里面放着各种模块(.py文件),也可以有子文件夹(子包).包名构建了一个Python模块的命名空间.比如,模块名 ...

  3. [CF106C]Buns

    面包师Lavrenty打算用馅料做几个面包,然后把它们卖掉. Lavrenty有\(n\)克面团和\(m\)种不同的馅料.馅料种类的下标从\(1到m\),他知道他的第\(i\)种馅料剩下\(a_i\) ...

  4. lintcode: Missing String

    Missing String  描述: Given two strings, you have to find the missing string. Have you met this questi ...

  5. 下落的树叶 （The Falling Leaves UVA - 699）

    题目描述: 原题:https://vjudge.net/problem/UVA-699 题目思路: 1.依旧二叉树的DFS 2.建树过程中开个数组统计 //紫书源代码WA AC代码: #include ...

  6. openstack多region介绍与实践---转

    概念介绍 所谓openstack多region,就是多套openstack共享一个keystone和horizon.每个区域一套openstack环境,可以分布在不同的地理位置,只要网络可达就行.个人 ...

  7. 怎么用js精确判断li已经在ul存在过了?

    <ul class="memory_messagelist" id="memory_messagelist"> <li><span ...

  8. cookie，localstorge，sessionstorge三者总结

    相同点:都是客户端存储东西的: 不同: 1大小,cookie最小;locastorge最大 2 cookie设置好会在header头里面自动带的:但是ls和ss不会:ls同个浏览下不同网页(非跨域)都 ...

  9. 2017秋-软件工程第四次作业（2）-结对使用TDD框架完成单元测试

    第一次接触“单元测试”这个要求,我和队友学习了一些示例后开始操作.如下展示一些建立单元测试的过程.Step1:右键单击[解决方案]->左键单击[添加(D)]->[新建项目(N)]. Ste ...

  10. Java容器之List接口

    List 接口: 1. List 接口是 Collection 的子接口,实现 List 接口的容器类中的元素是有顺序的,而且可以重复: 2. List 容器中的元素都对应一个整数型的序号记载其在容器 ...