代码改变世界

angularJS之基础知识(二)

2013-09-04 23:40  小沈_syt  阅读(593)  评论(0)  编辑  收藏  举报

　　我们来看一个DEMO，用于登陆，再根据代码来进行具体的分析

<!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均可，不需要具体的值，如：<html ng-app></html>

　　此时的话，我们无法获取到module对象，要如何进行controller的注册呢。直接声明一个js函数，并且在html的某个元素上采用ng-controllerr进行绑定即可，如：

　　

function testCtrl($scope){
    $scope.name="adsf";  
}

<body ng-app>
    <div ng-controller="testCtrl" ></div>
</body>