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. hbuilder真机调试时,手机端无法连接电脑测试的处理办法

    首先保证手机端与电脑处在同一网段 关闭电脑防火墙 电脑服务端需要配置iis网站,同时在hbuilder的manifest.json 配置与iis网站ip一致的url

  2. 微信内转发APP及h5类域名怎么做到防封防拦截,微信域名防红技术原理

    我们常常遇到自己正规的网站链接,无端被微信拦截,大家都为这问题苦恼不已.但凡想使用微信来推广产品或者从事活动营销的用户,就一定会遇到域名被微信拦截甚至封停的情况.域名没被封过,那你的营销人生肯定是不完 ...

  3. Azure Active Directory document ---reading notes

    微软利用本地活动目录 Windows Server Active Directory 进行身份认证管理方面具有丰富的经验,现在这一优势已延伸基于云平台的Azure Active Directory.可 ...

  4. [转] KVM I/O slowness on RHEL 6

    KVM I/O slowness on RHEL 6 http://www.ilsistemista.net/index.php/virtualization/11-kvm-io-slowness-o ...

  5. 【ZCTF】easy reverse 详解

    0x01  前言     团队逆向牛的解题思路,分享出来~ 0x02  内容 0. 样本 bbcdd1f7-9983-4bf4-9fde-7f77a6b947b4.dll 1. 静态分析 使用IDAP ...

  6. 微信技术分享:微信的海量IM聊天消息序列号生成实践(算法原理篇)

    1.点评 对于IM系统来说,如何做到IM聊天消息离线差异拉取(差异拉取是为了节省流量).消息多端同步.消息顺序保证等,是典型的IM技术难点. 就像即时通讯网整理的以下IM开发干货系列一样: <I ...

  7. Python开发爆破字典

    这里只是分享一下Python如何生成爆破字典 关于爆破工具编写我会在下一篇提到 其实有了爆破字典的话,直接使用Burp,Hydra等一些工具就可以做爆破了! Burp的使用在我以前的博客中有写过,至于 ...

  8. Scala - Tips

    1- 运行scala命令,提示报错 问题现象: 在Windows7系统中安装scala后(直接安装MSI包,或者解压zip包添加环境变量的方式),执行scala命令报错,但可以执行scala -ver ...

  9. 【design patterns】设计模式

    1.单例设计模式(singleton) 用途举例:对于多个程序使用同一个配置信息对象时比如在连接数据库时使用单例模式,每次只取出一个连接 步骤:①私有化该类的构造函数 ②私有化一个静态的对象 ③公有化 ...

  10. mysql 开发进阶篇系列 53 权限与安全(账号管理的各种权限操作 上)

    一. 概述 在了解前两篇的权限系统介绍后,这篇继续讲账号的管理,这些管理包括账号的创建,权限更改,账号删除等.用户连接数据库的第一步都是从账号创建开始. 1.  创建账号 有两种方法可以用来授权账号: ...