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. Shell脚本 | 抓取log文件

    在安卓应用的测试过程中,遇到 Crash 或者 ANR 后,想必大家都会通过 adb logcat 命令来抓取日志定位问题.如果直接使用 logcat 命令的话,默认抓取出的 log 文件包含安卓运行 ...

  2. Spring mvc 4系列教程（二）——依赖管理（Dependency Management）和命名规范（Naming Conventions）

    依赖管理(Dependency Management)和命名规范(Naming Conventions) 依赖管理和依赖注入(dependency injection)是有区别的.为了将Spring的 ...

  3. docker cgroup 技术之memory（首篇）

    测试环境centos7 ,内核版本4.20 内核使用cgroup对进程进行分组,并限制进程资源和对进程进行跟踪.内核通过名为cgroupfs类型的虚拟文件系统来提供cgroup功能接口.cgroup有 ...

  4. MVC源码分析 - View续之Razor

    过完年, 大家都忙碌起来了, 我也不例外. 不过并不是忙碌于去面试找工作, 而是忙碌于现在手上的工作. 闲话不多说了, 进入今天的主题. 一.Index页面在哪里 很奇怪, 在目录bin下面的dll文 ...

  5. Eclipse 下Spring cloud项目集成开发插件Spring Tool Suite (STS) 安装

    安装eclipse插件 Help->Eclipse Marketplace-> Search中查找"Spring Tool Suite (STS) for Eclipse&quo ...

  6. Entity Framework 6 Recipes 2nd Edition(目录索引)

    Chapter01. Getting Started with Entity Framework / 实体框架入门 1-1. A Brief Tour of the Entity Framework ...

  7. redis学习（一） redis的介绍与安装

    redis简单介绍 redis全称remote-dictionary-server 直译为远程字典服务器, 是一个高性能的key-value存储系统,也被称为数据结构服务器,因为其所存储的数据值(va ...

  8. mysql cmd 启动服务

    1.确定你的mysql 是否能正常工作登录数据库cmd--“命令提示字符”窗口录入,录入cd C:\mysql\bin 并按下回车键,将目录切换为 cd C:\mysql\bin再键入命令mysql ...

  9. Android studio的gradle

    1. gradle的基本概念 gradle构建* Android Studio使用`Gradle`构建工具,Eclipse的ADT插件使用的是`Ant`构建工具* 构建:生成app的过程,执行一些的命 ...

  10. Mac 自带的Apache php 狼神的

    开启服务:sudo /usr/sbin/apachectl start 停止服务:sudo /usr/sbin/apachectl stop 重启服务:sudo /usr/sbin/apachectl ...