zoukankan      html  css  js  c++  java
  • angularjs学习总结一(表达式、指令、模型)

    一:自执行匿名函数

    (function(){
    /*code*/
    })();
    自执行匿名函数:
    常见格式:(function() { /* code */ })();
    解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
    作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
    总结一下,执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。
    1:代码被加载时自动执行
    2:避免全局变量被污染


    二:use strict 严格模式

    1:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
    2:消除代码运行的一些不安全之处,保证代码运行的安全;
    3:提高编译器效率,增加运行速度;
    4:为未来新版本的Javascript做好铺垫。

    三:angularjs双向绑定


    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
    ng-model 指令把输入域的值绑定到应用程序变量 name。
    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
    举例:
    <!doctype html>
    <html ng-app="">
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <p><input type="text" name="myName" ng-model="name"/></p>
    <h1>hello {{name}}</h1>
    </body>
    </html>


    四:脚本位置


    我们建议把脚本放在 <body> 元素的底部。
    这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。


    五:ng-bind指令


    ng-init 指令初始化 AngularJS 应用程序变量
    <!doctype html>
    <html ng-app="">
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <div ng-init="firstname='John'">
    <p>
    <span ng-bind="firstname"></span>
    </p>
    </div>
    </body>
    </html>


    六:AngularJS 表达式


    AngularJS 表达式写在双大括号内:{{ expression }}。
    AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
    AngularJS 将在表达式书写的位置"输出"数据。
    AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
    实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
    举例:
    <!doctype html>
    <html>
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <div ng-app="" ng-init="price=5.0;count=4">
    <p>我的第一个表达式:{{5 + 5}}</p>
    <p>totalPrice:{{price * count}}</p>
    </div>
    </body>
    </html>

    七:AngularJS 应用


    AngularJS 模块(Module) 定义了 AngularJS 应用。
    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
    ng-app指令定义了应用, ng-controller 定义了控制器。
    ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
    举例:
    <!doctype html>
    <html>
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>firstname:<input type="text" ng-model="firstname"/></p>
    <p>lastname:<input type="text" ng-model="lastname"/></p>
    <p>name:{{firstname +" "+ lastname}}</p>
    </div>
    <script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
    $scope.firstname = 'Jhon';
    $scope.lastname = 'tom';
    });
    </script>
    </body>
    </html>

    八:angularjs兼容html5,只需要在ng指令前面加上data即可


    html5新特性:type类型 number数字、date 日期、month 月份
    <!doctype html>
    <html>
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <div data-ng-app="" data-ng-init="price=5;count=4">
    <input type="number" ng-model="count"/>
    <input type="number" ng-model="price"/>
    <p>totalPrice:{{price * count}}</p>
    <input type="date" ng-model="date"/>
    <input type="month" ng-model="month"/>
    </div>
    </body>
    </html>

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


    AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
    把实例中的对象想象成数据库中的记录。
    <!doctype html>
    <html>
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <div data-ng-app="" data-ng-init="names=[
    {'name':'tom','country':'china'},
    {'name':'jack','country':'usa'},
    {'name':'lucy','country':'japan'}]">
    <p>使用ng-repeat循环遍历数组</p>
    <div data-ng-repeat="x in names">
    {{x.name + " "+ x.country}}
    </div>
    </div>
    </body>
    </html>


    十:验证用户输入


    以上实例中,提示信息会在 ng-show 属性返回 true 的情况下显示。
    举例:
    <!doctype html>
    <html>
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    </head>
    <body>
    <div ng-app="">
    <form name="myForm" action="" method="get">
    <p><input type="text" name="myName"/></p>
    <p>
    <input type="password" name="myPwd" ng-model="myPwd"/>
    <span ng-show="myPwd.length > 8">密码长度不超过8</span>
    </p>
    </form>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Java中的String,StringBuilder,StringBuffer三者的区别
    安装ik分词器以及版本和ES版本的兼容性
    利用logstash从mysql同步数据到ElasticSearch
    安装logstash和logstash-input-jdbc
    mac 下安装ES 与 Head插件 以及安装Kibana
    数据库备份出现警告:Warning: Using a password on the command line interface can be insecure. Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions, even thos
    Mybatis 中$与#的区别
    spring boot Tomcat访问日志
    spring boot配置druid数据源和监控配置
    kafka基本概念
  • 原文地址:https://www.cnblogs.com/warrior4236/p/5478639.html
Copyright © 2011-2022 走看看