• angularJS之基础知识(二)


      我们来看一个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>

      

  • 相关阅读:
    spring 自定义事件发布及监听(简单实例)
    解析spring中的BeanFactory(看完会有收获)
    如何提高锁的性能
    spring MVC模式拦截所有入口方法的入参出参打印
    java基于feemarker 生成word文档(超级简单)
    数据库事务特性汇总
    如何让window.open()以post请求方式调用(巧妙解法)
    a标签添加背景图片的解决办法
    深入理解Django Admin的list_display, list_filter和raw_id_fields,filter_horizontal选项
    django配置log日志
  • 原文地址:https://www.cnblogs.com/sytsyt/p/3302364.html
Copyright © 2020-2023  润新知