<h1>创建模块</h1>
<body ng-app='app' ng-controller='xmgController'>
ng-app='app' 'app'名称可以随意设置
var app = angular.module('app',[]); 和括号里的第一个参数一样就可以
<!--
ng-app 是应用程序 只有一个
ng-controller 控制器 可以有多个
{{title}} 插值语法 绑定
-->
<p>{{xmg}}</p>
<script src="angular.js"></script>
导入angular
<script>
// 1.创建模块
/*
第一个参数是要创建模块的名称
第二个参数是否注入依赖,如没有就传入 []
*/
var app = angular.module('app',[]);
// 2.创建控制器
/**
* 第一个参数 要创建控制器的名称
* 第二个参数 数组 注入依赖
* $scope 是一个对象 是一个模型
*/
app.controller('xmgController',['$scope',function ($scope) {
$scope.xmg = 'dafdadadasdf';
}]);
// 3.绑定模块
// 4.绑定控制器
</script>
<>
<h1>关于指令</h1>
以ng开头的就是指令
其实指令就是给html标签添加了一些属性这些属性对html并没有任何意义
但是对angular来说是有特殊含义的,我们称为指令
<body ng-app='app' ng-controller='xmgController'>
<!--
ng-show true显示 false 不显示
ng-hide true不显示 false 显示
ng-if true显示 false 不显示
if和show 的区别是if隐藏了就等于不存在了
ng-if true 在dom中添加元素 false 从dom中移除元素 如果只展示一次需要用这个
ng-click 事件
ng-repeat 遍历 你要重复谁,就在谁身上绑定
-->
<p ng-show='false'>{{name}}</p>
<p ng-hide='false'>{{name}}</p>
<p ng-if='false'>qweq</p>
<button ng-click='xx("da",1)'>点我啊</button>
//( )括号里可以传两个参数
<ul>
//
ng-repeat 遍历 你要重复谁,就在谁身上绑定
<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是指的数组里的每一个值的索引,
value指的是数组的值也就是 html5这些值
</ul>
<script src="angular.js"></script>
<script>
// 1.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.name = 'hello';
$scope.xx = function (regs,regs1) {
alert(regs + regs1);
//默认吧两个参数拼接在一起
}
$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.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
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.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
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 怎么做到
因为他默认开启了一个服务器,
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.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.xx = 'head.html';
$scope.content = 'content.html';
$scope.footer = 'footer.html';
这三个html文件是在同路径下创建的
}]);
</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.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.type = 'ui';
}]);
下面是jquery写法因为用法一样拿出来比较
/*switch (3){
case 1:
代码1
break;
case 2:
代码2
break;
default:
代码n
break;
如果代码1满足switch就显示代码1,不满足就执行下一个
}*/
</script>
ng-click 点击事件指令
<body ng-app='app' ng-controller='xmgController'>
<!--
1.ng-click="事件的名称 ()调用函数" ()可以传递参数
$event
-->
<button ng-click='click($event)'>点击</button>
//传入$event是为了防止默认事件
<!--<button ng-mousedown=''>点击</button>-->
<script src="angular.js"></script>
<script>
// 1.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
app.controller('xmgController',['$scope',function ($scope) {
$scope.click = function (e) {
console.log(e);
//e是接收防止默认事件的参数
}
}]);
</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 才会出现-->
<script src="angular.js"></script>
<script>
var app = angular.module('app',[])
app.controller('zjController',['scope',function ($scope) {
}]);
//自定义指令
app.directive('xmg',function () {
//注意点:app.directive('xmg',function ()这个'xmg'代表名称如果xmgDir这样的驼峰名称在标签中需要写成<xmg-dir></xmg-dir>
//在一个回调函数中
return{
restrict:'EAMC',
//常用EA
//定义指令的类型,不分先后顺序
// E(元素)
// A(属性)
// C(class类)
// M(注释)
template:'<h1>w sh</h1>',
//template还有另一种写法templateUrl:文件地址或者外部模板. html文件默认开启了一个服务器才能读取到文件
replace:true
//替换原标签
}
})
</script>
<h1>内置过滤器
<body ng-app="app" ng-controller="zjController">
<!--1.currency 货币格式化 接受2个参数 第一个参数是要自定义的货币符号
第二个参数 保留几位小数 四舍五入-->
<p>{{price | currency}}</p>
<p>{{price | currency:'¥'}}</p>
<p>{{price | currency:'¥@@@@':1}}</p>
<!--uppercase 小写变大写-->
<p>{{str | uppercase}}</p>
<!--lowercase 转化小写-->
<p>{{str2 | lowercase}}</p>
<!--number 保留几位小数 对字符串也可以 四舍五入-->
<p>{{num | number:2}}</p>
<!--date 日期格式化 接受一个参数 格式化日期的 yyyy-MM-dd HH:mm:ss 中间的--可以换成年月日或者斜杠-->
<p>{{myDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<!--json 将js对象转换层json字符串 开发中不常用-->
<p>{{per | json}}</p>
<!--截取limitTo 参数 截取几个 如果传负数代表从后面截取-->
<p>{{course | limitTo:1}}</p>
<!--filter 筛选 模糊筛选 传个h就会把有h的删选出来-->
<p>{{course | filter:'html'}}</p>
<!--小案例在输入框中输入字母会删选出对应的值-->
<input type="text" ng-model='search'>
<p>{{course | filter:search}}</p>
<!--1,2,3 升序 false--><!--3,2,1 降序 true-->
<!--第一个参数是要排序的字段, 如果是数组传空字符串 ''第二个参数是升序或降序-->
<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) {
//过滤器就是格式化数据
$scope.price = 10;
// 当数字有小数时就可以用第二个参数了
$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.自定义过滤器
过滤器本质是一个方法
第一个参数是过滤器的名称
第二个参数是一个函数 函数里面需要再返回一个函数 函数默认的参数是左边的值
在函数里面返回什么值就代表显示什么值
<body ng-controller="xmgController" ng-app="app">
<p>{{20 | money}}</p>
<p>{{20 | myCurrency:'@@'}}</p>
<!--''里面不传值等于null -->
<p>{{ msg | firstUppcase}}</p>
<!--msg加''就是自己,没加就是参数形式 $scope.msg = 'xmg';-->
<script src="angular-1.5.8.js"></script>
<script>
// 1.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
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.父级中没有属性不能去子集中查找
网友评论