<!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 的一些基本指令
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章