Angular.js-2入门
姜博
1.angular与MVC
MVC即Model View Controller，是模型(model)-视图(view)-控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
M 模型对应数据库
V 视图对应HTML页面
C 控制器处理用户交互<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<style>
body {
padding: 10px;
}
</style>
<body ng-app="app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="msg"/>
<h1>{{msg}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])//module创建一个angular模块
.controller('MyCtrl',function($scope){//controller相当于简单的MVC，MyCtrl相当于C,$scope相当于M
$scope.msg="angular";//每一个模型，通过双向绑定，把模型绑定到V上即HTML页面
})
.controller('MyCtrl1',function($scope){})//可以创建更多
.controller('MyCtrl2',function($scope){})
.controller('MyCtrl3',function($scope){});
</script>
</html>2.binding双向绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname"/>
<h1 ng-bind="uname">{{}}</h1><!--显示输入框内容-->
<h1 ng-clock class="ng-clock">{{uname}}</h1><!--显示输入框内容-->
<!--{{}}内可放置任何表达式-->
<div ng-bind="'用户名:' uname"></div><!--显示：用户名:button-->
<div class="{{uname}}">{{uname}}</div><!--显示button标签-->
</div>
</body>
<script src="js/angular.min.js"></script>
</html>3.controller的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding: 10px" ng-app="app">
<div ng-controller="FirstCtrl">
<!--<h1>{{msg}}</h1>同ng-bind且可省去{{}}-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<div ng-controller="NextCtrl">
<!--<h1>{{msg}}</h1>-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<!--ng-controller明确其作用域边界-->
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('FirstCtrl',function($scope){
$scope.msg="hello angular";
})
.controller('NextCtrl',function($scope){
$scope.msg="hello 极客";
});
</script>
</html>4.scope的变量与方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
<p>在scope上定义方法并在页面上进行绑定调用</p>
<p>在scope上定义变量并在方法中使用</p>
<div ng-controller="MyCtrl">
<!--<input type="text" ng-model="msg"/>-->
<!--<h1>{{reverse()}}</h1>-->
<!--在页面上绑定调用scope中定义的方法-->
<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>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('MyCtrl',function($scope){
$scope.msg="";
$scope.user={uname:'',pwd:''};
$scope.errormsg="";
$scope.reverse=function(){//在scope上定义方法
return $scope.msg.split("").reverse().join("")
};
$scope.login=function(){
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("登陆成功");
}else{
$scope.errormsg="用户名或密码错误";
}
}
});
</script>
</html>5.定义service服务
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<div ng-controller="MyCtrl">
<h1>{{realname}}</h1>
<h1>{{http}}</h1>
<h1>{{data.msg}}</h1>
<h1>{{uname}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
//service多种表现形式，四种创建模式value（值可改变） constant(常量不可改变) factory service provider（高级）
.value('realname','zhaoliu')
.value('realname','wangwu')
.constant('http','www.baidu.com')
.constant('http','www.sohu.com')
.factory('Data',function(){
return {
msg:'你好吗',
setMsg:function(){
this.msg="我不好";
}
}
})
.service('User',function(){
this.firstname="上官";
this.lastname="小子";
this.getName=function(){
return this.firstname this.lastname;
}
})
.controller('MyCtrl',function($scope,realname,http,Data,User){
$scope.realname=realname;
$scope.http=http;
$scope.data=Data;
Data.setMsg();
$scope.uname=User.getName();
});
</script>
</html>6.在controller中使用service服务
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<p>service:如何在多个controller中共享数据</p>
<div ng-controller="FCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
<div ng-controller="SCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.factory('Data',function(){
return {
msg:'我来自factory'
}
})
.controller('FCtrl',function($scope,Data){
$scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
$scope.data=Data;
});
</script>
</html>6.常用指令可查看官方文档api
更多专业前端知识，请上 【猿2048】www.mk2048.com
类似资料：