Angularjs
使用angular:
1.引入框架
2.声明一块angular模板 è ng-app=’app’
3.使用ng-model=’xxx’,来绑定简单的数据
4.应用(插值) è {{ xxx }}
angular 模块化:
1.声明模块 ng-app=’app’---> 声明控制器:ng-controller=’控制器名字’
2.var app = angular.module(‘模块名’,[依赖的模板])
3.定义控制:
$scope ----数据模型
app.controller(‘控制器的名字’,[‘$scope’,function($scope){
处理页面交互逻辑
} ] )
4.数据处理:
循环处理 --- ng-repeat = ‘list in lists’
一:数据绑定:
ng-model ng-bind ng-bind-template
1.ng-model:
<div ng-app>
<input type=’text’ ng-model=’name’>
<p>{{ name }}</p>
</div>
//一个简单的数据绑定,当我们输入内容后直接会在p元素内显示
2.ng-bing:
<div ng-app=’app’>
<div ng-controller=’ctrl’>
<p ng-bind=’name’></p>// 直接绑定了我们在控制器中的name
<p>{{name}}</p> //这种不用绑定也能获取控制器中的name
</div>
</div>
var app = angular.module(‘app’,[ ]);
app.controller(‘ctrl’,[ ‘$scope’ ,function( $scope ){
$scope.name = ‘帅帅的发型’
$scope.age = 18;
}])
//总结,可以用bing直接绑定数据中的数据,也可以用{{name}}去获取
3.ng-bind-template
绑定多个数据,运用上面的控制器
<p ng-bind-template=’{name}{age}’></p>
//可以同时获取俩个数据内容,注意只需要用{ }即可
二:指令:
内置指令:
1.ng-app -----指定那个模板
2.ng-controller -----指定控制器
3.ng-show -----控制元素是否显现-->true显示 false 不显示
4.ng-hide -----控制元素是否隐藏-->true隐藏 false 不隐藏
5.ng-if -----判断元素是否存在,跟if语句一样
6.ng-src -----曾强图片路径
7.ng-class -----控制类名
8.ng-include -----引入模板
9.ng-disabled -----表单禁用
10.readonly -----只读
11.ng-checked -----选中
12.ng-selected -----下拉框
案例:
Css: .red{ color: red };
<body ng-app=’app’>
<ul ng-controller=’ctrl’>
<li ng-show=’1’> ng-show用来显示内容值为true </li>
<li ng-hide= ’1’> ng-hide 用来隐藏内容值为true </li>
<li ng-if=’1’> ng-if用来判断元素是否存在 </li>
<li ng-class=’{ red:true }’> 添加类指令在CSS中 </li>
<li><input type=’text’ ng-disabled=’1’>表单禁用 </li>
<li><input type=’text’ value=’只读不能修改’ ng-readonly=’1’></li>
<li><input type=’checkbox’ ng-checked=’1’>选中指令</li>
<li>
<select>
<option ng-selected=’1’> 北京 </option>
<option> 上海 </option>
<option> 广州 </option>
</select>
</li> // 下拉框默认选中北京
<li><img ng-src=’{{ path }}’>引入图片</li>
</ul>
</body>
app.controller(‘ctrl’,[‘$scope’,function($scope){
$scope.path = ‘ 1.jpg ’;
}])
自定义指令:
1. var app = angular.module(‘模块名’,[依赖其他模板])
2. directive去自定义指令
app.directive(‘指令名’,function(){
return{
restritct:’EACM’指定自定义标签类型E(标签)A(属性)C(类)M(注释)
replace:ture (一般为true)是否替换原有的标签
template:’<h1>hello world </h1>’指令模块
templateUrl:’xxx.html’指令模块的外部模块
}
})
案例:
Html:<tag></tag> //自定义的标签
JS:var app = angular.module( ‘app’ , [ ] );
app.directive( ‘tag’ , function(){
return{
restrict: ’EACM’
replace: true
template:’<ul><li>首页</li></ul>’
// template:’text.html’ 外部引入
}
})
template:’text.html’
注释:外边模块的指令需要挂起服务器引入前三个设置可以注销掉,可以实现,在页面正常输入内容
include指令:(外部引入模块)用法跟templateUrl一样,都是引入模板
<div ng-include=” ’a.html’ ”// 注意双引号包裹单引号
三:事件+其他指令:
1.ng-click -----点击事件
2.ng- dblclick -----双击事件
3. ng-blur -----焦点事件
4. ng-mouseover -----悬停事件
// 所有JS中的事件前面加 “ ng- “
事件案例:
<bodyng-app=’app’>
<ul ng-controller=’ctrl’>
<li>
<inputtype=’text’ ng-model=’msg’>
<h1>{{msg }}</h1>
<buttonng-click=”show()”>函数引用</button>
</li>
</ul>
var app =angular.module( ‘app’ ,[ ] );
app.controller(‘ctrl’,[‘$scope’,function($scope){
$scope.show= function( ) { //函数也是需要$scope.函数名
console.log($scope.msg);
}
}])
其他循环(指令):
ng-switch 循环 ng-repeat循环
èng-switch:
<divng-controller=’ctrl’>
<ul>
<ling-repeat=’str in strs’>{{str.name}}{{str.age}}</li>
</ul>
èng-switch: <ul>
<ling-repeat=’item in items’ ng-switch=’item’>
<spanng-switch=’css’>{{item}}</span>
</li>
</ul>
</div>
Js:
var app =angular.module(‘app’,[ ])
app.controller(‘ctrl’,[‘$scope’,function($scope){
$scope.strs= [
{name:xxx,age:xxx},
{name:xxx,age:xxx},
]
$scope.items= [‘html’ , ’css’ , ’js’ , ’jquery’]
}])
注意:ng-switch要与 ng-switch-when一起用(-when是判断语句)
四:过滤器:
内置过滤器{{使用“|”分割: ‘添加筛选的条件’}}
àcurrency -----数值格式,格式化为货币格式
àdate -----日期格式
àfilter -----过滤器(自定义) ----重点重点重点
àjson -----javascript对象,转成JSON字符串
àlimitTo -----取出字符串的前几位或者或几位
àlowercase -----将文本转换成小写格式
àuppercase -----将文本转换成大写格式
ànumber -----数字化格式,可以控制小数点
àorderBy -----对数组进行一个排序
内置过滤器:---案例:
<body ng-app=’app’>
<ulng-controller=’ctrl’>
<li>{{ price | currency:’$’ }}</li>
<li>{{ now | date:’yyyy-MM-dd hh:mm:ss’ }}</li>
<li>{{ items | filte:’s’}}</li>
<li>{{ students | json}}</li>
<li>{{ items | limitTo:3}}</li>
<li>{{ str | lowercase}}</li>
<li>{{ str | uppercase}}</li>
<li>{{ items | orderBy:’ ’ : false}}</li>
</ul>
</body>
var app = angular.module(‘app’,[ ]);
app.controller(‘ctrl’,[‘$scope’,function($scope){
$scope.price = 12.8; //价格----- currency
$scope.now = newDate; // 时间---- date
$scope.items= [ ‘html’ , ’css’ , ’js’ , ’jq’ ]----- filter& limitTo& orderBy
$scope.student= [
{name:xxx,age:xxx}
{name:xxx,age:xxx}
]----------- json
$scope.str = ‘I LOVEANGULAR’ ----- lowercase & uppercase
}])
注意:filter过滤器:(可以自定义内容)
语法:app.filter(‘过滤器的名字’,function() {
return function( data ){
retrun 改变的内容
}
})
案例: <divng-controller=’ctrl’>
<h3>{{name |abc}}</h3> // 自定义的名字abc
</div>
var app = angular.module(‘app’,[ ]);
app.filter( ‘abc’ , function(){ // abc
returnfunction( str ){
retrun “hello” + str
}
})
app.controller(‘ctrl’,[‘$scope’,function($scope){
$scope.name= ‘累到只想睡觉’
}])
// 网页直接输出 “hello累倒只想睡觉”
五:服务模块:
1.定时器 :
$timeout(一次定时) $interval(定时器)
语法:
控制器(‘控制器名’, [‘$interval’,function(){
$interval(函数,时间)
}])
案例:
<div ng-controller=’ctrl’>
<p>{{ now | date:’yyyy-MM-dd hh:mm:ss’ }} //无限定时器
<button ng-click= ‘stop( )’>停止定时器 </button>
<p>{{ msg}}</p> //执行一次定时器
</div>
JS:
var app =angular.module(‘app’,[ ]);
app.controller(‘ctrl’,[‘$scope’, ’$timeout’, ’$interval’ ,function($scope,$ $timeout, $interval){
// 定时器 等于JS中的setInterval
$scope.now =new Date;
var timer =$interval(function(){
$scope.newDate
},1000)
//停止定时器
$scope.stop =function(){
$interval.cancel(timer) // 停止法语
}
//一次定时器执行
$timeout(function(){
$scope.msg= ‘如果不努力,永远不知道自己有多废物’
},3000)
}])
2.$location 服务器模块
$location.absUrl() ------- 找到绝对路径
$location.protocol( ) ------- 协议
$location.port( ) ------- 端口号
$location.path( ) ------- 相对路径
$location.hash( ) ------- 哈希值
$location.search( ) ------- 查询字符串
案例:
<body ng-app=’app’>
<dlng-controller=’ctrl’>
<dd>{{title }}</dd> à输出结果 :学习$location服务
<dd>{{absUrl }}</dd> à : http://localhost:8080/9.html
<dd>{{url }}</dd> à : “ / ”
<dd>{{host }}</dd> à : localhost
<dd>{{search }}</dd> à : { }
<dd>{{protocol }}</dd> à : http
<dd>{{port }}</dd> à : 8080
<dd>{{hash }}</dd>
</dl>
</body>
var app = angular.module(‘app’,[ ])
app.controller(‘ctrl’,[‘$scope’ , ’$location’, function($scope, $location){
$scope.title = ‘学习$location服务 ’
$scope.absUrl = $location.absUrl( ) //绝对路径
$scope.url = $location.url( ) //当前地址
$scope.host = $location.host( ) //主机
$scope.search = $location.search( ) //搜索
$scope.protocol = $location.proto() //协议
$scope.port = $location.port( ) //端口
$scope.hash = $location.hash( ) //哈希值
}])
3.$log 模块
$log 打印à
$log.log( ) ----- 打印日志
$log.onfo( ) ----- 打印信息
$log.warn( ) ----- 打印警告
$log.error( ) ----- 打印错误
$log.debug( ) ----- 调试信息
案例:
var app = angular.module(‘app’,[ ])
app.controller(‘ctrl’ , [‘$log’,function($log ){
$log.info(‘普通信息’)
$log.warn(‘警告信息’)
$log.error(‘错误信息’)
$log.log(‘打印信息’)
$log.debug(‘调试信息’)
}])
4.$http 模块
<ul ng-controller=’ctrl’>
<li><buttonng-click=’singel( ) ’>获取数据</button></li>
</ul>
get:
var app = angular.module(‘app’,[ ])
app.controller(‘ctrl’,[‘$scope’,’$http’,function($scope,$http){
$scope.single= function(){
$http({
method:’get’ //params:{ } 是get参数
}).success(function(info){
Console.log(info)
}).error(function(err){
Console.log(err)
})
}
}])
post:
$http({
method:’post’,
header:{“content-Type”:”application/x-www-form-urlencoded”},
data:{ name:”xxx”, age:10},
}).success(function(info){
Console.log(info)
}).error(function(err){
Console.log(err)
})
六.配置模块
1.config
启动阶段—基本的引入
初始化阶段—DOM解析运行的配置 ng-app的加载
编译阶段—代码指令的解析
运动阶段—指令执行完毕返回数据
案例:
<div ng-controll=’ctrl’>
<h2>{{ str |capitalize}}</h2>
</div>
var app = angular.module(‘app’,[])
app.config([‘$logProvider’,’$filterProvider’,function($logProvider,$filterPriovider){
$logProvider.debugEnabled(false) // 禁用debug设置
$filterProvider.register(‘capitalize’,function(){
return function(input){
return input
}
})
}])
app.controller(‘ctrl’,[‘$scope’,’$log’,function($scope,$log){
$log.debug(‘梦’)
$scope.str = ‘hello angular ’
}])
2.运动块 run
自动运行
案例:
<div ng-controller=’ctrl’>
<p>{{ name}}</p>
</div>
var app = angular.module(‘app’,[ ])
app.run([‘$http’,’$rootScpor’,function($http,$rootScpor){
$http({
method:’get’
});
$rootScope.name = ‘梦想’
}])
app.controller(‘ctrl’,[‘$scope’,function($scope){
$scope.name= ‘我比梦想大’
}])
// 如果没有这个控制器name内容,P元素获取的是自运行里面的内容
七.服务器:自定义服务模块
1.factory工厂方法
语法:app.factory(‘方法名’ , [‘模块名’,function( ){
改变后的返回的内容
}])
案例:
2.service方法
法语:app.service(‘方法名’,[‘模块’, function(){
This直接调用
}])
案例:
3.value方法 定义常量
案例:
八.路由 重点!重点!重点!
语法:
var app = angular.module(‘app’,[‘ngRoute’])
//根据锚点进行加载分流的配置
app.config(‘$routeProvider’,function($routeProvider){
$routeProvider
.when(‘锚点路径’,{
//样式:
template ---模板
templateUrl---模板路径的加载
controller --- 控制器
redirectTo----重定向跳转那个模板
})
})
案例: