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. Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  2. 第三节：带你详解Java的操作符，控制流程以及数组

    前言 大家好,给大家带来带你详解Java的操作符,控制流程以及数组的概述,希望你们喜欢 操作符 算数操作符 一般的 +,-,*,/,还有两个自增 自减 ,以及一个取模 % 操作符. 这里的操作算法,一 ...

  3. 《http权威指南》读书笔记7

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  4. rabbitmq系统学习（一）

    各种mq activemq,kafka使用zookeeper做管理 rocketmq自己实现nameserver broke管理 AMQP核心概念 高级消息队列协议 publisher applica ...

  5. Jade是变体的HTML

    在这段HTML代码中,div 包含了一个 a 元素与一段没有标记包围的文本.若要用Jade表述这段HTML,div 元素和 a 元素都可以用前面所述的方法实现,但剩下的那个没有标记包围的文本就不能用前 ...

  6. php安装xunserch

    xunserch的安装步骤 注意:xunserch只能在linux下使用 1.安装依赖工具 yum install make gcc g++ gcc-c++ libtool autoconf auto ...

  7. .NET Core + Abp踩坑和填坑记录（1）

    1. Net Core 的DI和Abp的DI并存 Startup中 ConfigureServices返回值改为IServiceProvider 在ConfigureServices最后调用retur ...

  8. Android--通知之Notification

    前言 之前一篇博客讲了Android下使用Toast的方式提示消息.这篇博客讲解一下在Android中使用Notification提示消息给用户,Notification是一种具有全局效果的通知,程序 ...

  9. mysql 获取昨天日期、今天日期、明天日期以及前一个小时和后一个小时的时间

    1.当前日期 select DATE_SUB(curdate(),INTERVAL 0 DAY) ; 2.明天日期select DATE_SUB(curdate(),INTERVAL -1 DAY) ...

  10. ③JSP经典回顾

    jsp概述 jsp实际就是一个高级servlet,比servlet容易很多.jsp/servlet在jsp容器中运行.例如,Tomcat就是一个Servlet/jsp容器. 关于tomcat:[传送门 ...