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>
效果就是 后面的值是前面两个之和。
=====