angularJS入门

来源：互联网发布：mysql truncate 编辑：程序博客网时间：2024/06/07 04:51

AngularJS
一基础
1.特点
(1)在其他JS框架中，需要从外到内操作DOM，因此开发者需要对整个DOM结构有所了解，并在JS代码中加入复杂的控制逻辑来操作外部DOM。
(2)创建实时模板来代替视图，而不是将数据合并进模板后更新DOM。任何一个独立组件中的值都是动态替换的。要实现这个功能，只要在某个DOM元素上明确设置ng-app属性即可。
ng-app:声明所有被包含的内容都属于这个AngularJS应用，只有被具有ng-app属性的DOM元素包含的元素才会受到AngularJS的影响。
(3)AngularJS会记录数据模型所包含的数据在任何特定时间点的值，而不是原始值。当其认为某个值可能会发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”，从而保证数据的一致性。
(4)数据绑定
数据模型对象(model object)是指$scope对象，其中的属性可以被视图访问，也可以同控制器进行交互。
双向数据绑定意味着如果视图改变了值，数据模型会通过脏检查观察到这个变化；如果数据模型改变了值，视图也会依据变化重新渲染。
在输入字段上使用ng-model指令来实现数据绑定。
<script type="text/javascript" src="angular.js" ></script>
</head>
<body ng-app>
<input type="text" ng-model="uname" />
<br />
<h1>{{uname}}</h1>
</body>
也可以使用ng-bind来绑定数据
2.前端MVC的困难
操作DOM的代码必须等待整个页面全部加载完成
多个JS文件之间如果出现互相依赖，程序员必须自己解决
JS的原型继承也给前端编程带来了很多困难
二模块
1.模块声明
ng-app:所包含的内容属于某个angualrJS应用，是angularJS启动的起点
ng-controller:声明所有被它包含的元素都属于某个控制器
ng-model:绑定数据
在JS中声明模块：angular.module("myapp",[]) 即包括模块名和声明列表
声明列表包括：name:模块名的字符串 requires:字符串数组，每个元素为一个模块名称的依赖关系
例：
<script type="text/javascript" src="angular.js" ></script>
<script src="js/myJS.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myCtrl">
<input type="text" ng-model="msg" />
<br />
<h1>{{msg}}</h1>
</div>
</body>
myJS文件
angular.module("myapp",[])
.controller('myCtrl',function($scope){
$scope.msg="hello";
});
在上例中，myCtrl负责C，$scope负责M，$scope.msg="hello";就是数据模型，body中的div就是V
2.双向数据绑定
<body ng-app="">
<div style="padding: 10px;">
<input type="text" ng-model="uname" />
<h1>{{uname}}</h1> //<h1 ng-bind="uname"></h1>
<div ng-bind="'用户名：'+uname"></div>
<div class='{{uname}}'>{{uname}}</div>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
3.作用域
作用域包括$rootScope和$scope,$rootScope是所有$scope对象的最上层
在$scope上可以设置包括对象在内的任何类型的数据
函数:$scope.函数名=function(参数列表){函数体}
对象:$scope.person={name:'lyy'};
引用时:{{person}} {{person.name}}
复杂的逻辑要放到指令和服务中，不要放到作用域中。
<body ng-app="myapp">
<div ng-controller="myCtrl">


<input type="text" ng-model="user.uname" />
<input type="text" ng-model="user.pwd" />
<div class="button" ng-click="login()">登录</div>
<div ng-show="errormsg.length" class="alert-box"></div>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/myJS.js" ></script>
myJS文件
angular.module("myapp",[])
.controller('myCtrl',function($scope){
$scope.msg="";
$scope.errormsg="用户名或密码错误";
$scope.user={uname:'',pwd:''};
$scope.reverse=function(){
return $scope.msg.split("").reverse().join("");
}
$scope.login=function(){
// console.log($scope.user);
if($scope.user.uname=="admin"&&$scope.user.pwd=="123"){
alert("登录成功");
}else{
alert($scope.errormsg);
}
}
});
4.控制器
<body ng-app="myapp">
<div ng-controller="firstCtrl">
<input type="text" ng-model="msg" />
<br />
<h1 ng-bind="msg"></h1>
</div>
<div ng-controller="secCtrl">
<input type="text" ng-model="msg" />
<br />
<h1 ng-bind="msg"></h1>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/myJS.js" ></script>
angular.module("myapp",[])
.controller('firstCtrl',function($scope){
$scope.msg="";
})
.controller('secCtrl',function($scope){
$scope.msg="";
})
两个div中的内容互不影响，若想实现两个div中的数据共享，可以使用$rootScope
<body ng-app="myapp">
<div ng-controller="firstCtrl">
<h1 ng-bind="msg"></h1>
</div>
<div ng-controller="secCtrl">
<h1 ng-bind="msg"></h1>
</div>
</body>
angular.module("myapp",[])
.controller('firstCtrl',function($rootScope){
$rootScope.msg="hello";
})
.controller('secCtrl',function($scope){
})
若改为：.controller('secCtrl',function($scope){
$scope.msg="hel";
})
结果为：hello hel
<body ng-app="myapp">
<table ng-controller="ctrl01" border="1">
<tr>
<td>id</td>
<td>name</td>
<td>phone</td>
<td>index</td>
<td>操作</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{$index}}</td> //可以获得索引值
<td><button ng-click="delUser($index);">删除</button></td>
</tr>
</table>
angular.module("myapp",[])
.controller('ctrl01',function($scope){
var users=[
{id:1,name:'lyy1',phone:'123'},
{id:2,name:'lyy2',phone:'1234'},
{id:3,name:'lyy3',phone:'12345'},
];
$scope.users=users; //实际从数据库中获取
$scope.delUser=function(index){
$scope.users.splice(index,1); //index是要删除的第一项的位置，1为要删除的项数
}
})
注意：
不要复用controller，一个控制器一般只负责一小块视图
不要在Controller中操作DOM
不要在Controller里做数据格式化和数据过滤操作，ng有表单控件和$filter服务
一般情况下Controller不会互相调用，控制器之间的交互会通过事件进行
注：ctrl+shift+d 快速复制
ctrl+shift+h 格式化
index1.html文件
<!DOCTYPE html>
<html lang="en" ng-app="UserInfoModule">
<head>
<meta charset="UTF-8">
<title>myText</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
双向数据绑定
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form role="form" class="form-horizontal" ng-controller="UserInfoCtrl">
<div class="form-group">
<label class="col-md-2 control-label">邮箱：</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="请输入邮箱地址" ng-model="userInfo.email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">密码：</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="请输入密码" ng-model="userInfo.password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin">自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-click="getFormData()">
获取form表单的值
</button>
<button class="btn btn-default" ng-click="setFormData()">
获取form表单的值
</button>
<button class="btn btn-default" ng-click="resetForm()">
重置表单
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/angular.js" type="text/javascript"></script>
<script src="../js/UserInfoModule.js" type="text/javascript"></script>
</body>
</html>
UserInfoModule.js文件
var userInfoModule=angular.module('UserInfoModule',[]);
userInfoModule.controller('UserInfoCtrl',['$scope',function($scope){
$scope.userInfo={
email:'23435536@qq.com',
password:'123r345',
autoLogin:true
};
$scope.getFormData=function(){
console.log($scope.userInfo);
};
$scope.setFormData=function(){
$scope.userInfo={
email:'lyy@qq.com',
password:'123456',
autoLogin:false
}
};
$scope.resetForm=function(){
$scope.userInfo={
email:'23435536@qq.com',
password:'123r345',
autoLogin:true
};
}
}])
再如：
<head>
<meta charset="UTF-8">
<title>myText</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.text-red{
background-color: #ff0000;
}
.text-green{
background-color: #00ff00;
}
</style>
</head>
<body>
<div ng-controller="CSSCtrl">
<p class="text-{{color}}">测试CSS样式</p>
<button class="btn btn-default" ng-click="setGreen()">绿色</button>
</div>
var userInfoModule=angular.module('UserInfoModule',[]);
userInfoModule.controller('CSSCtrl',['$scope',function($scope){
$scope.color='red';
$scope.setGreen=function(){
$scope.color='green';
}
}])
使用class时当出现color值为none时，会出现一些奇怪的现象，这里可以使用angularjs的ng-class
<div ng-controller="HeaderCtrl">
<div ng-class='{error:isError,warning:isWarning}'>
{{messageText}}
</div>
<button ng-click="showError()">Simulate Error</button>
<button ng-click="showWarning()">Simulate Warning</button>
</div>
var userInfoModule=angular.module('UserInfoModule',[]);
userInfoModule.controller('HeaderCtrl',['$scope',function($scope){
$scope.isError=false;
$scope.isWarning=false;
$scope.showError=function(){
$scope.messageText='This is an error!';
$scope.isError=true;
$scope.isWarning=false;
};
$scope.showWarning=function(){
$scope.messageText="just a warning,please continue";
$scope.isWarning=true;
$scope.isError=false;
};
}])
ng-hide和ng-show
<div ng-controller="HeaderCtrl">
<button ng-click="toggleMenu()">显示/隐藏按钮</button>
<ul ng-show="menuState.show">
<li ng-click="stun()">Stun</li>
<li ng-click="disintegrate()">Disintegrate</li>
<li ng-click="erase()">erase</li>
</ul>
</div>
var userInfoModule=angular.module('UserInfoModule',[]);
userInfoModule.controller('HeaderCtrl',['$scope',function($scope){
$scope.menuState={show:false};
$scope.toggleMenu=function(){
$scope.menuState.show=!$scope.menuState.show;
};
}])

转载自：http://www.cnblogs.com/lyy-2016/p/5693406.html

想了解更多的知识，欢迎加入651308349、627336556 技术开发交流群，会有意想不到的收获~~~！！！

阅读全文

0 0