• Angular.js学习笔记 (一)


    - angular中最重要的概念是指令(directive)
    - ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系
    ### 模块(Module)
    - 我们可以通过angular.module创建一个模块
    - angular.module方法传递两个参数才是创建模块,一个参数是获取模块
    ### 控制器(Controller)

    -常用方法:<html lang="en" ng-app="HelloApp"></html>//ng-app属性是使用ng的前提
    <div ng-controller="HelloController"></div>//ng-controller属性放在包裹标签上,控制包裹内代码
    js代码中:
    - var module = angular.module('HelloApp', [])
    - module.controller('HelloController', ['$scope','$http', function(a,b) {
    console.log(a);//打印的是$cope对象
    }]);
    - 通过$scope和视图关联
    - $scope.$watch('/*要监视是否发生变化的值*/',function(now,old){
    console.log(now);//现在输入的值
    console.log(old);//输入之前的旧值
    })
    -这里推荐一个ng的插件:AngularJS Batarang,安装后可以在chrome控制台下发现ng调试工具
    ### 表达式(expression)
    {{}}
    AngularJS表达式很像JavaScript表达式, 它们可以包含

    文字、运算符和变量 如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }},

    数字{{ 100 + 100 }},

    字符串{{ 'hello' +   'angular'}} ,

    对象{{ zhangsan.name }} ,

    数组{{ students[10] }}

    对比 JavaScript 表达式:

    相同点: AngularJS 表达式可以包含字母,操作符,变量。

    不同点: AngularJS 表达式可以写在 HTML 中。 AngularJS 表达式不支持条件判断,循环及异常。 AngularJS 表达式支持过滤器。

    ### 解决ng在加载页面时先出现表达式的bug
    <style>
    /* ng-cloak指令就是在NG执行完毕过后自动移除 */
    [ng-cloak],
    .ng-cloak {
    display: none;
    }
    </style>
    <body ng-app class="ng-cloak"></body>或者<body ng-app ng-cloak></body>

    本文转自:http://www.cnblogs.com/lm970585581/archive/2017/04/06/6672367.html

  • 相关阅读:
    Android中Handler原理
    微软柯塔娜(Cortana)的一句名言
    C# 单例模式的五种写法
    HTTP Status 404
    PLSQL中显示Cursor、隐示Cursor、动态Ref Cursor差别
    Android 开发之集成百度地图的定位与地图展示
    iOS知识点汇总
    优化报表系统结构之报表server计算
    淘宝中间的一像素线(手机端)
    解决yum升级的问题“There was a problem importing one of the Python modules”
  • 原文地址:https://www.cnblogs.com/yanglang/p/6672682.html
Copyright © 2020-2023  润新知