zoukankan      html  css  js  c++  java
  • angurlarjs学习笔记

    一些需要记忆的知识点:

    1、自定义指令:

    app.directive("nameDirective" , function(){

      template: ""

    });

    2、app = angular.module("MyApp", [])

    模块定义中,[]表示模块的依赖关系,  应该填写依赖模块的名字, 为null表示没有依赖关系。

    3、注意, 一般将angularjs库放到head元素中加载, 而AnJS脚本放到body元素底部加载,原因: 这样会提高网页加载速度,因为html加载不受制于脚本加载。

    4、angular.copy() : 复制一个数据到另一个数据 。。 

    5、在控制器里定义方法, 在控制器里调用方法, 此方法也可以在html中调用。

    AnJS  用来代替AJAX 表单提交, 而不是asp.net form表单提交。

    6、Form 表单提交 anjs 使用思考:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div ng-app="myApp" ng-controller="formCtrl">
      <form>
        First Name:<br>
        <input type="text" ng-model="user.firstName"><br>
        Last Name:<br>
        <input type="text" ng-model="user.lastName">
        <br><br>
        <button ng-click="reset()">RESET</button>  <button ng-click="submit()">submit</button>
      </form>
      <p>form = {{user }}</p>
      <p>master = {{master}}</p>
    </div>
     
    <script>
    var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope) {
        $scope.master = {firstName:"John", lastName:"Doe"};
        $scope.reset = function() {
            $scope.user = angular.copy($scope.master);
        };
        $scope.reset();
        $scope.submit = function(){
            /// 把 $scope.user 提交到后台, $http, $.ajax ,  并获取返回数据<br>          /// http  请求 就是 AJAX 请求
        };
    });
    </script>

    7、 anJS表单 客户端 验证:    

    input 元素的: required 

    $dirty : 表单有填写记录,为true , 更改表单就会为true.  只要在表单中改变数据,都为null。

    $pristine :  表单没有填写记录, 就是没有更改表单中数据 时, 为true , 一般是刚加载出来 改变数据时,

    $valid

    $invalid :  为null时,无效 , $invalid 为true

    .$error.required

    可以模仿使用:

    <p>邮箱:<br>
      <input type="email" name="email" ng-model="email" required>
      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
      <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
      <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
      </span>
    </p>

    8、AngularJS API:

    全局API:

    angular.lowercase() :  

    angular.uppercase()

    angular.isString():

    angular.isNumber() : 判断是否时数字

    9、常识: (SSI: Server Side Includes, 服务器端包含) 

    AngularJS 包含: ng-include="'html文件路径'"

    10、angularJS 也可以写动画, 利用css ,暂时不多做了解,用的少。

    11、依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。

    AnJS 依赖注入核心组件:  [理解不够透彻]

    1、value  : JS 对象 , 用于向控制器传递值(注入到控制器中)

    app.value("","")

    2、factory : 是一个函数用于返回值,常用来计算或返回值, 在service 和 controller 需要时创建。

    app.factory("Name",function(){});

    3、provider 创建一个service , factory 等

    app.config(function($provider){

      $provider.provider("NameService",function(){  /// provider 创建服务 

         this.$get = function(){      /// get方法, 创建一个factory,

        };  

      });

    });

    4、constant , 用来配置阶段传递值

    app.constant("", "");

    PS: 使用$scope 双向绑定model ,  可以在anjs中直接调用$scope变量, 也就是调用anjs函数可以不用传值了。

    12、AnJS 路由js文件路径 : http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js

    $routeProvider 用来定义路由规则   ,,,       实现多视图的单页面访问,在写菜单url很有用。

    app.config(["$routeProvider",function($routeProvider){

      $routeProvider

        .when('/',{template:"hssdffaffa"})

        .when()

        .otherwise({redirectTo:"/"});

    }]);

    来自http://www.cnblogs.com/generalLi/articles/5988096.html

  • 相关阅读:
    secureCRT 实现windows和linux文件互传
    Mybatis Generator最完整配置详解
    部署Maven项目到tomcat报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
    阿里云服务器实战: Linux MySql5.6数据库乱码问题
    如何将 Java 项目转换成 Maven 项目
    Windows7下Maven环境搭建及其使用
    Java HashMap工作原理及实现
    关于tomcat部署应用的三种方式
    关于浏览器缓存
    MySql使用存储过程实现事务的提交或者回滚
  • 原文地址:https://www.cnblogs.com/zhoupengyi/p/6185311.html
Copyright © 2011-2022 走看看