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 有效。

如：

  1. <script type="text/javascript">
  2.         angular.module("testModule",[])
  3.             .controller("testCtr",function($scope){
  4.             })
  5.             .directive("testDire",function(){
  6.                 return {
  7.                     restrict:"A",
  8.                     require:"ngModel",
  9.                     link:function(scope,elem,attr,ngModelCtr){
  10.  
  11.                     }
  12.                 }
  13.             })
  14.     </script>
  15. </head>
  16.  
  17. <body ng-app="testModule" ng-controller="testCtr">
  18.     <input type="text" test-dire ng-model="say"/>
  19.  
  20.     <h1>
  21.         {{say}}
  22.     </h1>
  23.  
  24. </body>
  • 　　AngularJS 对象和绑定
  1. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  2. <p>姓为 {{ person.lastName }}</p>   <!--这是大括号绑定-->
  3. <p>名为 <span ng-bind="person.firstName"></span></p>  <!--这是ng-bind 绑定-->
  4. </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格式化字符串为大写

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

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2.  
  3. <p>姓名为 {{ lastName | lowercase }}</p>
  4.  
  5. </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. 分析Item

    分析Item例子1: class Parent { /* <init>() { super(); // JCES树节点,Item(void) px = 0; // JCES树节点,Assi ...

  2. Linux系统基础知识整理

    一.说明 本篇文章,我将结合自己的实践以及简介,来对linux系统做一个直观清晰的介绍,使得哪些刚接触Linux的小伙伴可以快速入门,也方便自己以后进行复习查阅. 二.基本知识整理 1.Linux文件 ...

  3. docker cgroup技术之cpu和cpuset

    在centos7的/sys/fs/cgroup下面可以看到与cpu相关的有cpu,cpuacct和cpuset 3个subsystem.cpu用于对cpu使用率的划分:cpuset用于设置cpu的亲和 ...

  4. Tensorflow应用之LSTM

    学习RNN时原理理解起来不难,但是用TensorFlow去实现时被它各种数据的shape弄得晕头转向.现在就结合一个情感分析的案例来了解一下LSTM的操作流程. 一.深度学习在自然语言处理中的应用 自 ...

  5. j2ee高级开发技术课程第三周

    一.分析Filter例子(轻量级javaee企业应用实战p132) // 执行过滤的核心方法 public void doFilter(ServletRequest request, ServletR ...

  6. redis学习（六）redis管道

    redis管道 1.redis管道介绍 redis采用的是CS架构,客户端与服务器端通过tcp协议进行连接通信,因此无论是发出请求还是接收响应,都必须经过网络传输.在tcp连接过程中,客户端和服务器端 ...

  7. 开源方案搭建可离线的精美矢量切片地图服务-8.mapbox 之sprite大图图标文件生成（附源码）

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...

  8. PBN飞越转弯Flyover衔接DF航段保护区组图

    PBN飞越转弯Flyover衔接DF航段,是飞越转弯中最常用的形态. Flyover-DF保护区叠加图: Flyover-DF保护区分解图:

  9. 通过这些示例快速学习Java lambda语法

    对于那些不熟悉函数式编程的人来说,基本的Java lambda语法起初可能有点令人生畏.但是,一旦将lambda表达式分解为它们的组成部分,语法很快就会变得有意义并变得非常自然. Java中lambd ...

  10. Python标准库--UUID

    UUID(Universally Unique Identifier)是128位通用唯一识别码,通常由32字节的字符串表示.它可以保证时间和空间的唯一性,也称为GUID,全称为:UUID —— Uni ...