Angularjs通过新的属性和表达式扩展了html

Andularjs 可以构建一个单一页面的应用程序（SPAS SinglePageApplications）

Angularjs通过指令扩展了html，通过表达式绑定数据到html

ng-app指令定义Angularjs的应用程序

ng-model指令绑定元素值到应用程序

ng-bind指令把应用程序数据绑定到html视图

    <div ng-app="">

      <input type="text" ng-model="name">

      <p ng-bind="name"></p>

    </div>

AngularJs的指令是以ng作为前缀的html属性

ng-init指令初始化AngularJs应用程序的变量

AngularJs的表达式写在双大括号内：{{表达式}}

AngularJs的表达式把数据绑定到html，这与ng-bind指令有异曲同工之妙

AngularJs将在表达式输出的定义的位置输出数据

    <div ng-app="" ng-init="myName='taoshihan'">

      <input type="text" ng-model="name">

      <p ng-bind="name"></p>

      <p ng-bind="myName"></p>

      <p>{{5+5}}</p>

    </div>

AngularJs模块（Module）定义了AngularJs应用

AngularJs控制器（Controller）用于控制AngularJs应用

ng-app指令定义了应用，ng-controller指令定义了控制器

  <body>

    <div ng-app="Home" ng-controller="index">

      <p>{{myName}}</p>

    </div>

  </body>

  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  <script type="text/javascript">

  //实例化应用对象，参数：模块名，空数组

  var app=angular.module("Home",[]);

  //调用应用对象的controller()方法，参数：控制器名，回调函数

  app.controller("index",function($scope){

    $scope.myName="taoshihan";

  })

  </script>

[angularjs] angularjs系列笔记（一）简介的更多相关文章

  1. angularjs自动化测试系列之jasmine

    angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...

  2. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

  3. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  4. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  5. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  6. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  7. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  8. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

  9. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  10. Vim 系列笔记一

    Vim 系列笔记一 Vim 简介 什么是VIM ? Vim 是从 Vi 发展出来的一个编辑器,是 Vi 的升级版.而 vi 则是 Unix .类Unix(Linux)系统中自带的编辑器. Vim/Vi ...

随机推荐

  1. Java中的==与equals

    当使用==操作符判断类时,实际上判断的是二者是否指向同一个对象 若要判断两个对象是否含有相同的数据,需使用Object类中的equals方法 java中所有类都是从Object类中派生出来的

  2. angular-repeat

    ng-repeat="name in 变量名字 track by $index" 一个数组的时候ng-repeat="name in 变量名字" {{x.nam ...

  3. BiggerInteger类

    java.math.BigInteger(需要导包)1.BigInteger构造方法*public BigInteger(String val)将 BigInteger 的十进制字符串表示形式转换为 ...

  4. [纪录片] 鸟瞰中国 ——China from Above

    上周末我看了一部纪录片<鸟瞰中国>,觉得特别有意思,想要分享给你. 制作背景 <鸟瞰中国>是由中国五洲传播中心与美国国家地理频道联合拍摄的纪录片,由KNNY PNG.KLAUS ...

  5. [转] AppArmor

    AppArmor https://help.ubuntu.com/14.04/serverguide/apparmor.html AppArmor 是一个实施了基于名称强制存取控制的Linux安全模组 ...

  6. [转]Understand QoS at OpenSwitch

    danny http://dannykim.me/danny/57771 2014.02.11 14:34:58 (*.193.128.184) 592 >>> Purpose Th ...

  7. SQL Server profile使用技巧

    200 ? "200px" : this.width)!important;} --> 介绍 经常会有人问profile工具该怎么使用?有没有方法获取性能差的sql的问题.自 ...

  8. 浅析B/S架构数据库连接方式

    前言 在许许多多的B/S架构系统中都涉及到了数据库的链接,那么对于数据库连接的方式有哪些?可能出现的问题是什么?   目录 1.普通连接方式 2.单例模式 3.连接池   分析 普通连接: 下面是我们 ...

  9. MVC详解

    模型-视图-控制器(Modal View Controler,MVC)是Xerox PARC在八十年代为编程语言Smalltalk-80发明的一种软件设计模式,至今已被广泛使用.最近几年被推荐为Sun ...

  10. linux 使用 vim 玩python

    vim 的配置文件默认是当前用户宿主目录下的.vimrc 文件.下列配置是常用 vim 进行 python 开 发的配置. " 高亮当前行 set cursorline " 将 T ...