AngularJS是一个js框架，以js编写的库。跟knockoutJS类似。

  • AngularJS扩展了html

通过ng-directives扩展了html；ng-app定义一个angularJS应用程序；ng-model吧元素值绑定到应用程序；ng-bind把应用程序数据绑定到html视图。angularJS指令是以ng作为前缀的html属性。HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

如：

<script type="text/javascript">

        angular.module("testModule",[])

            .controller("testCtr",function($scope){

            })

            .directive("testDire",function(){

                return {

                    restrict:"A",

                    require:"ngModel",

                    link:function(scope,elem,attr,ngModelCtr){

                    }

                }

            })

    </script>

</head>

<body ng-app="testModule" ng-controller="testCtr">

    <input type="text" test-dire ng-model="say"/>

    <h1>

        {{say}}

    </h1>

</body>
  • 　　AngularJS 对象和绑定
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>   <!--这是大括号绑定-->

<p>名为 <span ng-bind="person.firstName"></span></p>  <!--这是ng-bind 绑定-->

</div>
  • AngularJS的一些指令
  1. ng-app 初始化一个AngularJS应用程序
  2. ng-init 初始化应用程序数据
  3. ng-model 把元素值绑定到应用程序
  4. ng-controller
  5. ng-repeat 重复一个html元素，有点像在html中使用foreach 如:<li ng-repeat="x in names"> {{x}}</li>
  6. .directive 创建自定义指令
  7. ng-disabled 相当于html的disabled属性 ng-show显示或者隐藏html元素 ng-hide隐藏或者显示html元素
  8. ng-options 选择框
  9. ng-click 点击事件
  • AngularJS 过滤器
  1. currency 格式化庶子为货币格式
  2. filter 从数据组中选择一个子集
  3. lowercase 格式化字符串为小写
  4. orderBy根据某个表达式排列数组
  5. uppercase格式化字符串为大写

过滤器通过一个管道字符(|)用起来。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

　　

第一篇先写到这里。第二篇写一些高级的。待续...

Angular JS （一）的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  3. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  5. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  6. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  7. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  10. Angular.js 的初步认识

    MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...

随机推荐

  1. mac mysql5.5升级5.7记录

    先删除当前的mysql文件 打开终端窗口 使用mysqldump备份你的数据库将文本文件! 停止数据库服务器 sudo rm /usr/local/mysql sudo rm -rf /usr/loc ...

  2. [Python 从入门到放弃] 4. 什么是可选参数

    参数在函数中使用,顾名思义.可选参数就是:这个参数是可选的 也就是可有可无 我们来看一下这个例子: ver 1: 1.定义一个迭代输出列表元素的函数myPrint 2.参数为 列表 def myPri ...

  3. mysql-unsha1：在未知密码情况下，登录任意MYSQL数据库

    摘要 这个POC用于在不知道明文密码的情况下对启用了密码安全认证插件(默认开启插件:mysql_native_password)的MYSQL数据库进行登录. 前提条件为: 1.为了获取到已知用户的ha ...

  4. Spring 环境与profile(一)——超简用例

    什么是profile,为什么需要profile? 在开发时,不同环境(开发.联调.预发.正式等)所需的配置不同导致,如果每改变一个环境就更改配置不但麻烦(修改代码.重新构建)而且容易出错.Spring ...

  5. k-近邻算法(KNN)

    最近邻算法可以说是最简单的分类算法,其思想是将被预测的项归类为和它最相近的项相同的类.我们通过简单的计算比较即将被预测的项与已有训练集中各项的距离(差距),选择其中差距最小的一项,该项的类别即为我们即 ...

  6. FFmpeg进行视频帧提取&音频重采样-Process.waitFor()引发的阻塞超时

    由于产品需要对视频做一系列的解析操作,利用FFmpeg命令来完成视频的音频提取.第一帧提取作为封面图片.音频重采样.字幕压缩等功能: 前一篇文章已经记录了FFmpeg在JAVA中的使用-音频提取&am ...

  7. webpack4 自学笔记五（tree-shaking）

    全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...

  8. [转]DevOps实战：百度持续交付体系与最佳实践大解密！

    本文转自:http://dbaplus.cn/news-21-471-1.html “互联网+”时代,软件产品要想满足快速增长的用户需求,高效.快速的迭代转型必不可少,面对时刻发生改变的互联网及业务模 ...

  9. 呼叫WCF Service的方法出现Method not allowed异常

    asp.net mvc练习程序,经常性在家里电脑,笔记本或是公司的电脑之间拷贝与粘贴,如果忘记携带最新的练习程序,一些小功能只能重新写了.如前一篇<ASP.NET MVC呼叫WCF Servic ...

  10. C#--用户密码处理------混淆密码加密

    近期刚好做新框架的用户数据安全这块 密码的保护措施:混淆加密--------------------------------拙见----------贴上代码--请指教 1:生成混淆数据,---存入数据 ...