<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script>
/*自己定义一个 应用名()*/
var app= angular.module("MyApp",[]);//前面的是名字，后面是数据类型 --数组
//controller 控制器的名字; 第2个参数数组类型[$scope(由Anglarjs提供的作用域对象) ]
app.controller("MyDeom",["$scope",function($scope){
//作用域下面 有个数据name
$scope.name="这就是我输入的内容!!!!!!";
}]);
//
app.controller("MyTwoDeom",["$scope",function($scope){
//数据模型
$scope.myname="我的我的我的-----";
$scope.hobby="吃,睡,花钱";
}]);
//计算
app.controller("ThreeDeom",["$scope",function($scope){
$scope.sum = function(a,b){
$scope.result = a+b;
}
}]);
//替换
app.controller("FourDeom",["$scope",function($scope){
//声明变量数组---->放入到视图html
$scope.datas=["苹果","香蕉","西红柿","葡萄"];
$scope.stus=[{name:'张三',age:13,sex:"男"},{name:'美丽',age:19,sex:"女"}];
}]);
//全局变量 三个参数的
app.controller("FiveDeom",["$scope","$rootScope",function($scope,$rootScope){
$rootScope.name="我是全局变量";
}]);
app.controller("SixDeom",["$scope","$rootScope",function($scope,$rootScope){
$scope.username=$rootScope.name;
}]);
</script>
</head>
<!--ng-app 定义angular js 的使用范围-- 这里是说定义angular js在这个div生效-;;引用的是自己定义的名字-->
<body ng-app="MyApp">
<!--数据模型层(框中输入的数据作为anglarjs的模型) -->
<input ng-model="abc" />
<p>
<!--视图来展示 数据模型-->
字符串拼接:{{"hello,,"+abc}}<br />
<!--算术练习-->
算术练习:{{9-2}}<br />
<!--关系运算-->
关系运算: {{9>2}}
</p>
<!--来自于控制器的数据-->
<div ng-controller="MyDeom">
来自于控制器的数据::::::::
{{name}}
</div>
<p ng-controller="MyTwoDeom">
{{myname}}的爱好为:{{hobby}}
</p>
<!--声明变量-->
<div>
<!--声明变量,并赋值--><!--就是init声明name，后面是name的值-->
<p ng-init="name='声明变量,并赋值'">
{{name}}
</p>
<!--声明变量,并赋值-->
<ul ng-init="stu={name:'张三',age:13,sex:'男'}">
<li>{{stu.name}}</li>
<li>{{stu.age}}</li>
<li>{{stu.sex}}</li>
</ul>
</div>
<!--计算-->
<div ng-controller="ThreeDeom">
<p>计算的值是=={{result}}</p>
<input type="button" value="计算" ng-click="sum(2,3)" />
</div>
<!--替换-->
<div ng-controller="FourDeom">
<ul>
<!--把datas通过in替换成a--><!--{{$index}}是序号-->
<li ng-repeat="a in datas">{{$index}} {{ a}}</li>
</ul>
人员信息
<ul>
<li ng-repeat="stu in stus">
编号:{{$index +1}} 姓名:{{stu.name}}年龄:{{stu.age}} 性别:{{stu.sex}}
</li>
</ul>
宠物列表
<ul ng-init="dogs=[{name:'小江子',age:3}]">
<li ng-repeat="stu in dogs">
<!--ng-bind绑定 把年龄绑定到span标签-->
编号:{{$index +1}} 姓名:{{stu.name}}年龄:<span ng-bind="stu.age"></span>
</li>
</ul>
</div>
<!--隐藏和显示-->
<div>
<p ng-show="1">当值为true时显示(show=1或show=true)，为false时不显示（hide=0显示或hide=false）</p>
<p ng-hide="false">当值为true时显示（hide=1不显示或hide=true），为false时不显示(show=0或show=false)</p>
</div>
<!--全局变量-->
<div>
<!--在控制器FiveDeom中调用 name变量 -->
<ul ng-controller="FiveDeom">
<li>{{name}}</li>
</ul>
<!--在控制器SixDeom中调用 全局name变量-->
<ul ng-controller="SixDeom">
<li>{{name}}</li> <!--SixDeom中是否有name?-->
<li>{{username}}</li> <!--SixDeom中是否有name?-->
</ul>
</div>
</body>
</html>
Anglar js 的一些基本指令
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章