• AngularJS基础


    一、AngularJS中的MVC与作用域

    创建一个angular模块即ng-app所绑定区域,需要传递两个参数:
    ①模块名称,即ng-app所需要绑定的名称。ng-app="myApp"
    ②数组:需要注入的模块名称,不需要可以为空

    在angul模块上,创建一个控制器controller,需要传递两个参数
    ①Colltroller名称,即ng-controller所绑定的名称
    ②Controller的构造函数,可以传入多个参数,包括$scope和rootScope以及各种系统内置对象

    angularJS中的作用域
    ①$scope局部作用域,声明在$scope上的属性和方法只能在当前controller中使用
    ②$rootScope根作用域,声明在$rootScopr上的属性和方法可以在ng-APP所包含的任何区域使用,无论是否
    为同一controller ,或是否在controller包含范围中
    >>>若没有使用scope声明变量,而直接在HTML中使用ng-model绑定的变量作用域为:
    1、如果n-model在某个ng-controller中,则此变量绑定到当前controller的$scope上
    2、如果ng-model没有在任何一个ng-controller中,则此变量将绑定在$rootscope上

    指令与表达式

    ng-app:声明Angular所管辖的范围,一般只有一个

    AngularJS常用指令]

    ng-model 指令把元素值(比如输入域的值)绑定到应用程序的变量中

    ng-bind 指令把应用程序变量中的数据绑定到 HTML 视图,可用表达式替代

    <div ng-bing="name"></div>等效于<div>{{name}}</div>

    ng-init 指令初始化 AngularJS 应用程序变量。(相当于input里面的value默认值)
    表达式:双大括号包含表达式,可以包含文字运算符和变量。但表达式在网页加载瞬间会看到大括号,
    所以可以用ng-bind=""替代
    【指令】AngularJs中通过扩展HTML的属性提供功能,所以ng-开头的新属性被我们成为指令

    MVC图解

     

     二、AngularJS过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中。AngularJS 过滤器可用于转换数据

    示列

    <div ng-app="myApp" ng-controller="personCtrl">

    <p>姓名为 {{ lastName | uppercase }}</p>

    </div>

    即将所有字符大写

    三、AngularJS中的服务Service

    内置服务:

    >>> 使用内置服务,必须在Controller中通过函数的参数注入进来!!!!!
    $location:返回当前页面的 URL地址。
    $http:向服务器发送请求,应用响应服务器传送过来的数据,类似于Ajax
    $timeout:相当于setTimeout();
    $interval:相当于setInterval();

    注:$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

     四、AngularJS中的select

    AngularJS 可以使用数组或对象创建一个下拉列表选项。

    两种ng-option和能够-repeat都可以

     五、表单与验证(重要)

    novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

    ng-app 指令定义了 AngularJS 应用。

    ng-controller 指令定义了应用控制器。

    ng-model 指令绑定了两个 input 元素到模型的 user 对象。

    formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

    reset() 方法设置了 user 对象等于 master 对象。

    ng-click 指令调用了 reset() 方法,且在点击按钮时调用。

    novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

    示列代码:

    <!DOCTYPE html>
    <html>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <body>
    
    <h2>Validation Example</h2>
    
    <form  ng-app="myApp"  ng-controller="validateCtrl"
    name="myForm" novalidate>
    
    <p>用户名:<br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
      <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
      </span>
    </p>
    
    <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>
    
    <p>
      <input type="submit"
      ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
      myForm.email.$dirty && myForm.email.$invalid">
    </p>
    
    </form>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function($scope) {
        $scope.user = 'John Doe';
        $scope.email = 'john.doe@gmail.com';
    });
    </script>
    
    </body>
    </html>

     解析:

    AngularJS ng-model 指令用于绑定输入元素到模型中。

    模型对象有两个属性: user 和 email

    我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。

  • 相关阅读:
    Java并发(5)- ReentrantLock与AQS
    Java并发(4)- synchronized与CAS
    Windows cmd 查看文件MD5 SHA1 SHA256
    进程、线程、协程概念理解
    Python学习--Python运算符
    Python学习--Python变量类型
    MySQL性能优化
    Docket学习--Docker入门
    Python学习--Python基础语法
    Python学习--Python 环境搭建
  • 原文地址:https://www.cnblogs.com/adaia/p/6821909.html
Copyright © 2020-2023  润新知