Angular JS 基础
来源:互联网 发布:linux shell debug 编辑:程序博客网 时间:2024/05/16 11:14
<!DOCTYPE HTML>
<html lang="zh-cn" >
<head>
<meta charset="UTF-8">
<title>CSSClasses</title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var module_obj = angular.module("loginModule",[]);
module_obj.controller("loginCtrl",function($scope,$http){
$scope.user.name = "请输入姓名";
$scope.login = function(){
$http.post("login.do",this.user).success(function(data){
if(data.status == "success"){
alert("登陆成功");
}else if(data.status == "failed"){
alert("账号/密码错误");
}
}).error(function(data,status){
alert("登陆连接失败,请稍后再试。");
})
}
});
</script>
</head>
<body ng-app="loginModule">
<div ng-controller="loginCtrl">
<form name="loginFm">
Name:<input ng-model="user.name" />
pwd: <input ng-model="user.pwd" type="password"/>
<input type="button" value="login" ng-click="login()" />
</form>
</div>
</body>
</html> 从上一篇博客,我们大致的了解都利用angularJS来创建一个app的大致过程,这里我们详细的讲解一下,需要用的几个方法。angular.module(name,modules,configFn); e.g. angular.module("loginModule",[]) 这个方法用于创建一个模块。而所有angular相关的代码处于这个模块之下,才会被angularJS所识别,并进行引导,发挥作用。而这个模块是如何配置使用的呢?通过一个ng-app指令进行配置,如ng-app="module的name",见上面DEMO中body标签的配置。name:创建的该模块的名称,用于ng-app指令,必填。modules:加载该模块之前需要加载的模块。它为一个数组。必填。confidFn:界面加载时需要调用的函数。可选。moduleObj.controller(name,fn); e.g. module_obj.controller("loginCtrl",function($scope,$http){//do something }) 首先说一下moduleObj,这是module对象,调用angular.module()方法创建一个模块之后将会返回创建成功的module对象。该controller()用于构造了一个controller方法,并且绑定在这个模块里面。通过ng-controller指令进行配置,如:ng-controller="loginCtrl",见上面DEMO中div标签的配置。name:所需要构造的controller方法的方法名,用于ng-controller指令,必填。fn:所需要构造的controller方法的构造器,该构造器的参数$scope,$http,只需要填写即可,angular会自动检测并注入给你使用,详细使用见后面博客。必填。 有时候一个界面非常的简单,或者说在自己写DEMO的时候,创建module比较麻烦,那么也有解决办法。 在进行angular的引导的时候,只需要在某个HTML元素写上ng-app均可,不需要具体的值,如: 此时的话,我们无法获取到module对象,要如何进行controller的注册呢。直接声明一个js函数,并且在html的某个元素上采用ng-controllerr进行绑定即可,如:function testCtrl($scope){ $scope.name="adsf"}
<html lang="zh-cn" >
<head>
<meta charset="UTF-8">
<title>CSSClasses</title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var module_obj = angular.module("loginModule",[]);
module_obj.controller("loginCtrl",function($scope,$http){
$scope.user.name = "请输入姓名";
$scope.login = function(){
$http.post("login.do",this.user).success(function(data){
if(data.status == "success"){
alert("登陆成功");
}else if(data.status == "failed"){
alert("账号/密码错误");
}
}).error(function(data,status){
alert("登陆连接失败,请稍后再试。");
})
}
});
</script>
</head>
<body ng-app="loginModule">
<div ng-controller="loginCtrl">
<form name="loginFm">
Name:<input ng-model="user.name" />
pwd: <input ng-model="user.pwd" type="password"/>
<input type="button" value="login" ng-click="login()" />
</form>
</div>
</body>
</html> 从上一篇博客,我们大致的了解都利用angularJS来创建一个app的大致过程,这里我们详细的讲解一下,需要用的几个方法。angular.module(name,modules,configFn); e.g. angular.module("loginModule",[]) 这个方法用于创建一个模块。而所有angular相关的代码处于这个模块之下,才会被angularJS所识别,并进行引导,发挥作用。而这个模块是如何配置使用的呢?通过一个ng-app指令进行配置,如ng-app="module的name",见上面DEMO中body标签的配置。name:创建的该模块的名称,用于ng-app指令,必填。modules:加载该模块之前需要加载的模块。它为一个数组。必填。confidFn:界面加载时需要调用的函数。可选。moduleObj.controller(name,fn); e.g. module_obj.controller("loginCtrl",function($scope,$http){//do something }) 首先说一下moduleObj,这是module对象,调用angular.module()方法创建一个模块之后将会返回创建成功的module对象。该controller()用于构造了一个controller方法,并且绑定在这个模块里面。通过ng-controller指令进行配置,如:ng-controller="loginCtrl",见上面DEMO中div标签的配置。name:所需要构造的controller方法的方法名,用于ng-controller指令,必填。fn:所需要构造的controller方法的构造器,该构造器的参数$scope,$http,只需要填写即可,angular会自动检测并注入给你使用,详细使用见后面博客。必填。 有时候一个界面非常的简单,或者说在自己写DEMO的时候,创建module比较麻烦,那么也有解决办法。 在进行angular的引导的时候,只需要在某个HTML元素写上ng-app均可,不需要具体的值,如: 此时的话,我们无法获取到module对象,要如何进行controller的注册呢。直接声明一个js函数,并且在html的某个元素上采用ng-controllerr进行绑定即可,如:function testCtrl($scope){ $scope.name="adsf"}
0 0
- angular js 基础总结
- Angular JS 基础
- Angular JS基础分享
- Angular JS 基础
- angular.js基础学习
- angular js基础点滴
- 关于angular.js基础学习
- Web基础系列四、Angular JS
- angular.js基础(1)--指令directive
- Angular JS
- Angular js
- Angular Js
- angular js
- Angular JS
- angular js
- Angular JS
- Angular JS
- angular.js
- 关于配置了数据库方言为MySQLInnoDBDialect后Hibernate不能自动建表的问题
- HashMap分拣存储2:统计每个单词出现的次数(采用面向对象)
- eclipse MAT 安装和使用分享
- 关于toolbar与menu配合使用遇到的问题
- 新增和修改存储过程语句
- Angular JS 基础
- 项目管理利器(Maven)——依赖范围
- C++/CLI与C#常用语法对比
- Android属性动画完全解析(上),初识属性动画的基本用法
- Swift 图片平铺
- jshint常用检查规则
- JAVA 环境变量配置
- 消息队列的作用
- AndroidNDK生成so文件配置