augularJS基础
2017-11-09 14:20
253 查看
---------------------------------------------------------------------------------------------点击事件-----------------------------------------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js"></script>
<script>
var app = angular.module("gaoynApp", []);
//"$scope"---------->anglarJS提供参数
app.controller("demoC", ["$scope", function($scope) {// 数组 参数一 "$scope",实参 ; 参数二:function($scope)
//在作用域上定义函数--->有ng-click调用
$scope.sum = function(a, b) {//a ,b 形参
$scope.result = a + b;
}
}]);
</script>
</head>
<body ng-app="gaoynApp">
<div ng-controller="demoC">
<p>{{result}}</p>
<input type="button" value="计算" ng-click="sum(3,2)" />
</div>
</body>
</html>
、没有引用的使用方法
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--導入anglarjs-->
<script src="lib/angular.min.js"></script>
</head>
<body ng-app>
<!--数据模型层(框中输入的数据作为anglarjs的模型) -->
<input ng-model="abc" />
<p>
<!--视图来展示 数据模型-->
字符串拼接:{{abc+"hello"}}
<!--算术练习-->
算术练习:{{9-2}}
<!--关系运算-->
关系运算: {{9>2}}
</p>
</body>
</html>
---------------------------------------------------------------------------------------引用的使用方法------------------------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js"></script>
</head>
<!--body使用anglar应用-->
<body ng-app="gaoynApp">
<div ng-controller="deomCtrl">
来自于控制器的数据
{{name}}
</div>
<p ng-controller="democtr2">
{{myname}}的爱好为:{{hobby}}
</p>
</body>
<script>
/*定义 应用名()*/
var app= angular.module("gaoynApp",[]);
//controller 控制器的名字; 第2个参数数组类型[$scope(由Anglarjs提供的作用域对象) ]
app.controller("deomCtrl",["$scope",function($scope){
//作用域下面 有个数据name
$scope.name="我的孩子呀,打开你的小眼睛呀!!!!!!";
}]);
//
app.controller("democtr2",["$scope",function($scope){
//数据模型
$scope.myname="高运娜";
$scope.hobby="吃,睡,花钱";
}]);
</script>
</html>
---------------------------------------------------------------------------------------基本指令-----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js"></script>
<script>
var app = angular.module("gaoynApp", []);
//"$scope"---------->anglarJS提供参数
app.controller("demoC", ["$scope", function($scope) {// 数组 参数一 "$scope",实参 ; 参数二:function($scope)
//在作用域上定义函数--->有ng-click调用
$scope.sum = function(a, b) {//a ,b 形参
$scope.result = a + b;
}
}]);
</script>
</head>
<body ng-app="gaoynApp">
<div ng-controller="demoC">
<p>{{result}}</p>
<input type="button" value="计算" ng-click="sum(3,2)" />
</div>
</body>
</html>
、没有引用的使用方法
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--導入anglarjs-->
<script src="lib/angular.min.js"></script>
</head>
<body ng-app>
<!--数据模型层(框中输入的数据作为anglarjs的模型) -->
<input ng-model="abc" />
<p>
<!--视图来展示 数据模型-->
字符串拼接:{{abc+"hello"}}
<!--算术练习-->
算术练习:{{9-2}}
<!--关系运算-->
关系运算: {{9>2}}
</p>
</body>
</html>
---------------------------------------------------------------------------------------引用的使用方法------------------------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js"></script>
</head>
<!--body使用anglar应用-->
<body ng-app="gaoynApp">
<div ng-controller="deomCtrl">
来自于控制器的数据
{{name}}
</div>
<p ng-controller="democtr2">
{{myname}}的爱好为:{{hobby}}
</p>
</body>
<script>
/*定义 应用名()*/
var app= angular.module("gaoynApp",[]);
//controller 控制器的名字; 第2个参数数组类型[$scope(由Anglarjs提供的作用域对象) ]
app.controller("deomCtrl",["$scope",function($scope){
//作用域下面 有个数据name
$scope.name="我的孩子呀,打开你的小眼睛呀!!!!!!";
}]);
//
app.controller("democtr2",["$scope",function($scope){
//数据模型
$scope.myname="高运娜";
$scope.hobby="吃,睡,花钱";
}]);
</script>
</html>
---------------------------------------------------------------------------------------基本指令-----------------------------------------------------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Augularjs-起步详解
- AugularJS从入门到实践(必看篇)
- Augularjs-起步详解
- AngulaJS——学习笔记一
- AugularJs API ,ui grid API
- 推荐10个很棒的AngularJS学习指南
- Extjs之superclass.constructor.call(this)之理解
- servlet+ajax搜索智能提示demo(原生js)
- sort排序
- Javascript的学习心得
- [JSP页面encoding="utf-8"]
- JS获取当前年份，添加到HTML标签 select 的 option里
- js获取按键
- js遍历键值对数组
- js需要注意的地方
- Javascript判断数据类型与真假值隐形转换研究
- 简单的javascript运用
- 指定JSON.toJSONString中实体类属性的输出顺序
- TypeScript-JavaScript类型的超集，它可以编译成纯JavaScript。
- 制作百度地图离线JavaScript API加载本地瓦片地图