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>
效果就是 后面的值是前面两个之和。
=====
angularJS入门小Demo【简单测试js代码的方法】的更多相关文章
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
- 一些简单的Js代码的封装
1 function getById(id) { 2 3 } 4 5 function getAttr(el, k) { 6 7 } 8 9 function setAttr(el, k, v) { ...
- easyui中设置开始日期只能选择比结束日期小的日期,js代码获取日期的值
$("#start_date").datebox({ onSelect: function (beginDate) { $('#end_date').datebox().dateb ...
- FastDFS简单入门小demo
图片上传 需要引入 FastDFS 相关的jar包,但是这个jar没有在中央仓库,所以还得需要找到这个jar手动安装到自己的本地仓库才能使用. 需要一个配置文件 fdfs_client.conf ...
- gulp安装+一个超简单入门小demo
gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...
- 两段简单的JS代码防止SQL注入
1.URL地址防注入: //过滤URL非法SQL字符var sUrl=location.search.toLowerCase();var sQuery=sUrl.substring(sUrl.inde ...
- facebook页面种简单测试js调用flash开放的js接口的方法
无意间折腾出来的,此方法很triky,但是很简单有效. 背景说明: facebook种内嵌的iframe无法直接访问. 解决方法: chrome浏览器为例 1.右键查看iframe源代码,此时进入if ...
- 1.Django入门小Demo
1.Django安装 (1)前提:已安装python环境 (2)打开命令行输入:pip install Django==2.1.3 (3)打开Pycharm,在File--Setting--Proje ...
随机推荐
- 各种对list,string操作函数的总结
#encoding=utf-8#reverse,用来反转lista=['aa','bb','cc']a.reverse()print a#['cc', 'bb', 'aa']#不能直接print a. ...
- 【cookie接口】- jmeter - (请求提示no cookie)
1.虽然 请求成功 响应码 200 ,但是 返回code 1 ,表示接口不成功 2.加入 空的cookie 管理器就可以了 返回 code 0 注意:状态码 200 只是表示请求是成功的 , ...
- CodeForces 838B Diverging Directions 兼【20180808模拟测试】t3
描述 给你一个图,一共有 N 个点,2*N-2 条有向边. 边目录按两部分给出 1. 开始的 n-1 条边描述了一颗以 1 号点为根的生成树,即每个点都可以由 1 号点到达. 2. 接下来的 N-1 ...
- linux NULL 的定义
#undef NULL #if defined(__cplusplus) #define NULL 0 #else #define NULL ((void *)0) #endif
- 告别加载dll 出错开机加载项大揭秘
提到开机加载(load)项,大家不要以为就是系统启动(run)项.最简单的例子是,杀毒软件或者用户手动删除病毒文件后,注册表中的自动加载信息仍在,登陆系统时就会提示"加载*dll出错,系统找 ...
- 机器学习-线性回归LinearRegression
概述 今天要说一下机器学习中大多数书籍第一个讲的(有的可能是KNN)模型-线性回归.说起线性回归,首先要介绍一下机器学习中的两个常见的问题:回归任务和分类任务.那什么是回归任务和分类任务呢?简单的来说 ...
- Sublime Text 插件之:MarkDown
Sublime Text 插件之:MarkDown 喜欢写文档的同学应该离不开 MarkDown ,ST(Sublime Text)的插件 Markdown Preview 就支持实时在浏览器中预览p ...
- 感谢信——Alpha版
作为Thunder团队的leader,当时担任组长,说实话,确实是头脑一热,可后来,在确定选题时,看着大家都有自己的想法,看着大家都那么踊跃,而我因为性格的原因,总是难以做决定,导致选题这件事就开了几 ...
- 从零讲JAVA ,给你一条 清晰地学习道路!该学什么就学什么!!
1.计算机基础: 1.1数据机构基础: 主要学习:1.向量,链表,栈,队列和堆,词典.熟悉2.树,二叉搜索树.熟悉3.图,有向图,无向图,基本概念4.二叉搜索A,B,C类熟练,9大排序熟悉.5.树的前 ...
- LintCode-67.二叉树的中序遍历
二叉树的中序遍历 给出一棵二叉树,返回其中序遍历. 样例 给出一棵二叉树 {1,#,2,3}, 返回 [1,3,2]. 挑战 你能使用非递归实现么? 标签 递归 二叉树 二叉树遍历 code /** ...