zoukankan      html  css  js  c++  java
  • JavaScript---Angular 和JQuery

    Angular  三层模式 M modeldata 数据层 , V view 视图层 , C controller  控制器,程序主逻辑 ,通过指令扩展HTML,通过表达式绑定数据到HTML

    View(视图), HTML

    Model(模型), 当前视图中可用的数据,在表达式输出数据。

    Controller(控制器), JavaScript 函数,可以添加或修改属性。

    Angular 指令:AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 

    AngularJS 通过被称为 指令 的新属性来扩展 HTML

    AngularJS 通过内置的指令来为应用添加功能。

    AngularJS 允许你自定义指令。

    angular 表达式:

    数据绑定表达式{{ firstName }} 是通过 ng-model="firstName" 进行同步。

    AngularJS 表达式写在双大括号内:{{ expression }}

    AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

    AngularJS 将在表达式书写的位置"输出"数据。

    AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量

    实例 {{ 5 + 5 }} {{ firstName + " " + lastName }}

    AngularJS 应用

    AngularJS 模块(Module) 定义了 AngularJS 应用。

    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

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

     

    AngularJS 模块定义应用:

    var app = angular.module('myApp', []);

    AngularJS 控制器控制定义的应用程序的:

    app.controller('myCtrl', function($scope) {

        $scope.firstName= "John";

       });

    Scope(作用域) 是应用在 HTML (视图) JavaScript (控制器)之间的纽带。angular以数据为中心,通过试图和控制器来求数据

    Scope 是一个对象,有可用的方法和属性。这些属性和方法可以在视图和控制器中使用。视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}

    当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递

    $rootScopege根作用域 相当于全局变量,可以在各个 controller 中使用。

    常用指令

    ng-app 指令初始化一个 AngularJS 应用程序,定义了 AngularJS 应用程序的 根元素

    ng-bind  输出数据,相当于{{}}

    ng-init 指令初始化应用程序数据。

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

    ng-repeat 指令会重复一个 HTML 元素

    循环数组<p ng-repeat="x in arr">{{x}}</p>

    ng-controlle 指令定义了应用程序控制器

    事件指令

    ng-click=’toggle()’; 点击事件

    ng-hide(ng-show)="myVar" 设置 HTML 元素不可见。False可见。

    $scope.toggle = function() {

           $scope.myVar = !$scope.myVar;  开关a=!a;

     };

    ng-disabled  直接绑定应用程序数据(例如truefalse)到 HTML disabled 属性   true是不可用变灰,false 是可用   eg

    <p>

    <button ng-disabled="a">点我!</button>

    </p>

    <p>

    <input type="checkbox" ng-model="a">按钮

    体会:ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

    </p>

    ng-change 表单元素发生改变的事件

    过滤器:

    {{a|limitTo:2}}  限制数量

    {{a|lowercase}} 小写

    {{a|currency:'rmb'}} 转为货币

    HTTP

    app.controller(“myapp”,function($scope,$http){

    //取数据

    $http.get('url').success(function(str){

    $scope.a = str; 

    });

    });

    控制器的嵌套继承  子级可以用父级的作用域,但是父级用不了子级,需要发送和接受

    Egapp.controller('aaa',function($scope){  父级

    //$scope.a = 12;

    $scope.$on('data',function(event,data){

    $scope.a = data+1;

    });

    });

    app.controller('bbb',function($scope){ 子级

    $scope.c = function(){

    $scope.$emit('data',$scope.a);  向父级发送

    $scope.$broadcast('data',$scope.a); 向子级传送

    });

    小问题:$setTimeout() 需要包一下

     

     

  • 相关阅读:
    docker 安装mysql
    Java web项目搭建系列之二 Jetty下运行项目
    Java web项目搭建系列之一 Eclipse中新建Maven项目
    Maven 添加其他Maven组件配置问题
    C# 中定义扩展方法
    Oracle 函数
    【Webservice】2 counts of IllegalAnnotationExceptions Two classes have the same XML type name
    Linux精简版系统安装网络配置问题解决
    Rsync 故障排查整理
    Failed to set session cookie. Maybe you are using HTTP instead of HTTPS to access phpMyAdmin.
  • 原文地址:https://www.cnblogs.com/bugda/p/6087594.html
Copyright © 2011-2022 走看看