<h1>創(chuàng)建模塊</h1>
<body ng-app='app' ng-controller='xmgController'>
ng-app='app' 'app'名稱可以隨意設(shè)置
var app = angular.module('app',[]); 和括號里的第一個參數(shù)一樣就可以
<!--
ng-app 是應(yīng)用程序 只有一個
ng-controller 控制器 可以有多個
{{title}} 插值語法 綁定
-->
<p>{{xmg}}</p>
<script src="angular.js"></script>
導(dǎo)入angular
<script>
// 1.創(chuàng)建模塊
/*
第一個參數(shù)是要創(chuàng)建模塊的名稱
第二個參數(shù)是否注入依賴,如沒有就傳入 []
*/
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
/**
* 第一個參數(shù) 要創(chuàng)建控制器的名稱
* 第二個參數(shù) 數(shù)組 注入依賴
* $scope 是一個對象 是一個模型
*/
app.controller('xmgController',['$scope',function ($scope) {
$scope.xmg = 'dafdadadasdf';
}]);
// 3.綁定模塊
// 4.綁定控制器
</script>
<>
<h1>關(guān)于指令</h1>
以ng開頭的就是指令
其實(shí)指令就是給html標(biāo)簽添加了一些屬性這些屬性對html并沒有任何意義
但是對angular來說是有特殊含義的,我們稱為指令
<body ng-app='app' ng-controller='xmgController'>
<!--
ng-show true顯示 false 不顯示
ng-hide true不顯示 false 顯示
ng-if true顯示 false 不顯示
if和show 的區(qū)別是if隱藏了就等于不存在了
ng-if true 在dom中添加元素 false 從dom中移除元素 如果只展示一次需要用這個
ng-click 事件
ng-repeat 遍歷 你要重復(fù)誰,就在誰身上綁定
-->
<p ng-show='false'>{{name}}</p>
<p ng-hide='false'>{{name}}</p>
<p ng-if='false'>qweq</p>
<button ng-click='xx("da",1)'>點(diǎn)我啊</button>
//( )括號里可以傳兩個參數(shù)
<ul>
//
ng-repeat 遍歷 你要重復(fù)誰,就在誰身上綁定
<li ng-repeat='(key,value) in course'>{{key}}------ {{value}}</li>
//ng-repeat='(key,value) in course' key和value名字可以隨意取但是位置不能換,第一個是索引第二個是值
例如: $scope.course = ['html5','java','ui','ios']; key是指的數(shù)組里的每一個值的索引,
value指的是數(shù)組的值也就是 html5這些值
</ul>
<script src="angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.name = 'hello';
$scope.xx = function (regs,regs1) {
alert(regs + regs1);
//默認(rèn)吧兩個參數(shù)拼接在一起
}
$scope.course = ['html5','java','ui','ios'];
}])
// 3.綁定模塊
// 4.綁定控制器
</script>
ng-src指令
<body ng-app='app' ng-controller='xmgController'>
<button ng-click='click()'>加載圖片</button>
<!---->
<script src="angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.msg = 'xmg1';
$scope.mySrc = '';
$scope.click = function () {
$scope.mySrc = 'http://www.kedo.gov.cn/upload/resources/image/2017/02/17/143646.jpg';
}
}]);
</script>
ng-class
body ng-app='app' ng-controller='xmgController'>
<button ng-click='click()'>字體放大/縮小</button>
<!--<div class='fs50'>123132132</div>-->
<div ng-class='{fs50:isStyle,red:false}'>123132132</div>
<script src="angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.isStyle = true;
$scope.click = function () {
$scope.isStyle = !$scope.isStyle;
}
}]);
</script>
ng-include 引入外部模板
<body ng-app='app' ng-controller='xmgController'>
<!--
ng-include 引入外部模板 后面跟上模板路徑 這個路徑需要綁定在模型中
一個html不允許隨意讀取文件
為了安全考慮
angular 怎么做到
因?yàn)樗J(rèn)開啟了一個服務(wù)器,
Ajax可以讀取文件
-->
<div class="head" ng-include='xx'>
</div>
<div class="content" ng-include='content'></div>
<div class="footer" ng-include='footer'></div>
<script src="angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.xx = 'head.html';
$scope.content = 'content.html';
$scope.footer = 'footer.html';
這三個html文件是在同路徑下創(chuàng)建的
}]);
</script>
ng-switch
<body ng-app='app' ng-controller='xmgController'>
<ul ng-switch='type'>
控制器中type的值是ul所以只會顯示ul
<li ng-switch-default='html5'>html5</li>
<li ng-switch-when='java'>java</li>
<li ng-switch-when='ui'>ui</li>
</ul>
<script src="angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.type = 'ui';
}]);
下面是jquery寫法因?yàn)橛梅ㄒ粯幽贸鰜肀容^
/*switch (3){
case 1:
代碼1
break;
case 2:
代碼2
break;
default:
代碼n
break;
如果代碼1滿足switch就顯示代碼1,不滿足就執(zhí)行下一個
}*/
</script>
ng-click 點(diǎn)擊事件指令
<body ng-app='app' ng-controller='xmgController'>
<!--
1.ng-click="事件的名稱 ()調(diào)用函數(shù)" ()可以傳遞參數(shù)
$event
-->
<button ng-click='click($event)'>點(diǎn)擊</button>
//傳入$event是為了防止默認(rèn)事件
<!--<button ng-mousedown=''>點(diǎn)擊</button>-->
<script src="angular.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.click = function (e) {
console.log(e);
//e是接收防止默認(rèn)事件的參數(shù)
}
}]);
</script>
<h1>自定義指令
<html lang="en" ng-app="app" ng-controller="zjController">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.xmg{*/
/*background-color: #C81623;*/
/*}*/
</style>
</head>
<body>
<!--<xmg></xmg>--> <!--E元素的形式-->
<!--<div xmg></div>--><!--A屬性的形式-->
<!--<div class="xmg"></div>--><!--C類的形式-->
<!--類的形式在css中也可以使用-->
<!--<div class="xmg"></div>-->
<!-- directive:xmg --><!--M注釋的形式他必須在template后面加上 replace:true 才會出現(xiàn)-->
<script src="angular.js"></script>
<script>
var app = angular.module('app',[])
app.controller('zjController',['scope',function ($scope) {
}]);
//自定義指令
app.directive('xmg',function () {
//注意點(diǎn):app.directive('xmg',function ()這個'xmg'代表名稱如果xmgDir這樣的駝峰名稱在標(biāo)簽中需要寫成<xmg-dir></xmg-dir>
//在一個回調(diào)函數(shù)中
return{
restrict:'EAMC',
//常用EA
//定義指令的類型,不分先后順序
// E(元素)
// A(屬性)
// C(class類)
// M(注釋)
template:'<h1>w sh</h1>',
//template還有另一種寫法templateUrl:文件地址或者外部模板. html文件默認(rèn)開啟了一個服務(wù)器才能讀取到文件
replace:true
//替換原標(biāo)簽
}
})
</script>
<h1>內(nèi)置過濾器
<body ng-app="app" ng-controller="zjController">
<!--1.currency 貨幣格式化 接受2個參數(shù) 第一個參數(shù)是要自定義的貨幣符號
第二個參數(shù) 保留幾位小數(shù) 四舍五入-->
<p>{{price | currency}}</p>
<p>{{price | currency:'￥'}}</p>
<p>{{price | currency:'￥@@@@':1}}</p>
<!--uppercase 小寫變大寫-->
<p>{{str | uppercase}}</p>
<!--lowercase 轉(zhuǎn)化小寫-->
<p>{{str2 | lowercase}}</p>
<!--number 保留幾位小數(shù) 對字符串也可以 四舍五入-->
<p>{{num | number:2}}</p>
<!--date 日期格式化 接受一個參數(shù) 格式化日期的 yyyy-MM-dd HH:mm:ss 中間的--可以換成年月日或者斜杠-->
<p>{{myDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<!--json 將js對象轉(zhuǎn)換層json字符串 開發(fā)中不常用-->
<p>{{per | json}}</p>
<!--截取limitTo 參數(shù) 截取幾個 如果傳負(fù)數(shù)代表從后面截取-->
<p>{{course | limitTo:1}}</p>
<!--filter 篩選 模糊篩選 傳個h就會把有h的刪選出來-->
<p>{{course | filter:'html'}}</p>
<!--小案例在輸入框中輸入字母會刪選出對應(yīng)的值-->
<input type="text" ng-model='search'>
<p>{{course | filter:search}}</p>
<!--1,2,3 升序 false--><!--3,2,1 降序 true-->
<!--第一個參數(shù)是要排序的字段, 如果是數(shù)組傳空字符串 ''第二個參數(shù)是升序或降序-->
<p>{{score | orderBy:'':false}}</p>
<p>{{stu | orderBy:'name':false}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('zjController',['$scope',function ($scope) {
//過濾器就是格式化數(shù)據(jù)
$scope.price = 10;
// 當(dāng)數(shù)字有小數(shù)時就可以用第二個參數(shù)了
$scope.str = 'abcde';
$scope.str2 ='ABCDE';
$scope.num = '456.789';
$scope.myDate = new Date();
$scope.per = {
name:'zs', age:'11'
}
$scope.course = ['html','css','js']
$scope.score = [100,50,59.9,80];
$scope.stu = [
{name:'zs1',age:18},
{name:'zs2',age:19},
{name:'zs3',age:8},
{name:'zs4',age:38}
];
}]);
</script>
<h1>自定義過濾器 filter
3.自定義過濾器
過濾器本質(zhì)是一個方法
第一個參數(shù)是過濾器的名稱
第二個參數(shù)是一個函數(shù) 函數(shù)里面需要再返回一個函數(shù) 函數(shù)默認(rèn)的參數(shù)是左邊的值
在函數(shù)里面返回什么值就代表顯示什么值
<body ng-controller="xmgController" ng-app="app">
<p>{{20 | money}}</p>
<p>{{20 | myCurrency:'@@'}}</p>
<!--''里面不傳值等于null -->
<p>{{ msg | firstUppcase}}</p>
<!--msg加''就是自己,沒加就是參數(shù)形式 $scope.msg = 'xmg';-->
<script src="angular-1.5.8.js"></script>
<script>
// 1.創(chuàng)建模塊
var app = angular.module('app',[]);
// 2.創(chuàng)建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.msg = 'xmg';
}]);
// 3.自定義過濾器
app.filter('money',function () {
return function (a) {
return "￥" + a + '元';
}
});
app.filter('myCurrency',function () {
return function (input,args) {
if (args == undefined){
return '$' + input;
}else {
return args + input;
//input是20 ,args是##
}
}
});
app.filter('firstUppcase',function () {
return function (input) {
return input[0].toUpperCase() + input.slice(1);
}
})
</script>
<h1> * 控制器的作用域
* 1.子集中沒有屬性就去父級中查找,如果父級中沒有屬性就不顯示
* 2.父級中沒有屬性不能去子集中查找
