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() 需要包一下

     

     

  • 相关阅读:
    2. Python语言基本语法
    wx.onMenuShareTimeline使用注意事项
    a different object with the same identifier value was already associated with the session:
    linux 下压缩大批量文件
    mysql sleep进程过多,应用级配置
    一次心惊肉跳的服务器误删文件的恢复过程
    分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容
    一次Mysql 死锁事故
    adb server is out of date. killing...
    Redis 数据序列化方法 serialize, msgpack, json, hprose 比较
  • 原文地址:https://www.cnblogs.com/bugda/p/6087594.html
Copyright © 2011-2022 走看看