zoukankan      html  css  js  c++  java
  • Angular.js学习笔记 (一) H.U.C

    - 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>

    微信搜索“HUC思梦”关注我吧,关注有惊喜,不定时有免费资源分享!
  • 相关阅读:
    LeetCode 1275. 找出井字棋的获胜者 Find Winner on a Tic Tac Toe Game
    LeetCode 307. 区域和检索
    LeetCode 1271 十六进制魔术数字 Hexspeak
    秋实大哥与花 线段树模板
    AcWing 835. Trie字符串统计
    Leetcode 216. 组合总和 III
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 高级结果映射 ResultMap Association Collection
    Mybatis 高级结果映射 ResultMap Association Collection
  • 原文地址:https://www.cnblogs.com/lm970585581/p/6672367.html
Copyright © 2011-2022 走看看