博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs
阅读量:5213 次
发布时间:2019-06-14

本文共 2387 字,大约阅读时间需要 7 分钟。

angularJS四大核心特性:

核心特性1:MVC
核心特性2:模块化与依赖注入
核心特性3:双向数据绑定
核心特性4:Directive与UI控件

1.使angularJS必须在html标签上加入app

<html ng-app="myApp">
2.定义控制器
var myApp=angular.module("myApp",[]);
myApp.controller("controllername",function($scope,$http){});
3.注意controller的作用域问题,即当前angular操作只能在当前的controller下;
4.angularJS数据的双向绑定
<input type="text" ng-model="person.name" placeholder="Your Name"/>
<span>{
{person.name}}</span>
5.angularjs自定义标签(E)属性(A)(使用过滤器设置时间格式)
var myApp=angular.module("myApp",[]);
myApp.directive("clock",function($filter){
var date=new Date();
return{
restrict:"E",
replace:true,
//replace的值为false时不替换属性
template:function(ele,attr){
var dateStr=$filter("date")(date.getTime(),attr.dateFormat);
return "<span>"+dateStr+"</span>"
}
}
});
<clock date-format="yyyy年MM月dd日 HH:mm:ss EEE"></clock>
6.angularjs上下文发生变化须在页面同时显示是必须加入digrest的apply属性
myApp.directive("isSame",function(){
return {
restrict:"A",
require:"ngModel",//指定在改属性所在的标签中必须加入ng-model指令
link:function(scope,element,attr,model){
//为当前元素标签绑定事件
element.bind("blur",function(){
console.log(element.val()+ " "+scope.pwd);
scope.$apply(function(){
if(element.val() == scope.pwd){
model.$error.samePwd = false;
}else{
model.$error.samePwd = true;
}
});

});

}
}
});
7.自定义过滤器:
//大小写转换
myApp.filter("upper",function(){
return function(input,value){
if(input){
if(value == 1){
return input.toUpperCase();
}else{
return input.toLowerCase();
}
}else{
return input;
}
}
});
//倒序输出
myApp.filter("desc",function(){
return function(input,value){
var descAry=[];
if(input){
for(var i=input.length-1;i>=0;i--){
descAry.push(input[i]);
}
if(value==1){
return descAry.join("");
}
else{
return input
}
}
else{
return input;
}
}
});
<div>
<span>输入文本:</span> <input type="text" ng-model="order" />
<span>倒序输出:</span> <input type="text" value="{
{order | desc:1}}"/>
</div>
8.angularJS的重复注入(使用ng-repeat)
<tr ng-repeat="user in users">
<td>{
{user.t_id}}</td>
<td>{
{user.t_name}}</td>
<td>{
{user.t_sex}}</td>
<td>{
{user.t_adr}}</td>
......
</tr>
9.angularJs的ajax使用
$scope.add= function(){
if($scope.name && $scope.address && $scope.sex){
$http.post("/addUser",{"name":$scope.name,"address":$scope.address,"sex":$scope.sex}).success(function(data){
hideModal();
var page=$scope.curPage;
$scope.showAll(page,0);
}).error(function(error){
console.log(error);
});
}
};
注意:使用ajax必须在controller的函数中加入$http模块;

转载于:https://www.cnblogs.com/hym881013/p/4564749.html

你可能感兴趣的文章
知识不是来炫耀的,而是来分享的-----现在的人们却…似乎开始变味了…
查看>>
CSS背景颜色、背景图片、平铺、定位、固定
查看>>
口胡:[HNOI2011]数学作业
查看>>
我的第一个python web开发框架(29)——定制ORM(五)
查看>>
Combination Sum III -- leetcode
查看>>
中国剩余定理
查看>>
刘汝佳,竖式问题
查看>>
hdu--1029--思维题
查看>>
基础笔记一
查看>>
uva 10137 The trip
查看>>
spring 解决中文乱码问题
查看>>
Maven 介绍
查看>>
hdu 4268
查看>>
启动tomcat时cmd窗口一闪而过
查看>>
两个有序数列,求中间值 Median of Two Sorted Arrays
查看>>
vue路由的实现原理
查看>>
Java核心技术:Java异常处理
查看>>
Python 学习笔记一
查看>>
引入列表,将对话分类添加到对应列表中
查看>>
回文子串
查看>>