[angularjs] angularjs系列笔记(一)简介
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系列笔记(一)简介的更多相关文章
- angularjs自动化测试系列之jasmine
angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...
- angularjs自动化测试系列之karma
angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- Vim 系列笔记一
Vim 系列笔记一 Vim 简介 什么是VIM ? Vim 是从 Vi 发展出来的一个编辑器,是 Vi 的升级版.而 vi 则是 Unix .类Unix(Linux)系统中自带的编辑器. Vim/Vi ...
随机推荐
- JSHFJK师德师风幅度十分时尚大方JSHFJK
sdjfhjksd{104411661166112205880477047710881111099909771088104411111155116605880533055505330500051104 ...
- 在MFC中支持sqlite3
在vc环境下支持sqlite3的方法有很多,sqlite官网也有推荐sqlitewrappers列表,我选用的是CppSqlite 建立MFC工程的步骤我就不赘述了,以下操作均假设你已经创建好了一个M ...
- Javascript高级编程学习笔记(32)—— 客户端检测(1)能力检测
能力检测 浏览器厂商虽然在实现公共接口方面投入了大量的精力 但是每种浏览器仍旧存在许多差异 为了让网页能跨浏览器的运行,对浏览器差异做的兼容处理自然无法避免 其中最常用的也就是我们现在所说的能力检测 ...
- Android加密解析
编码.数字摘要.加密.解密 UrlEncoder /Urldecoder String str = "http://www.baidu.com?serach = 哈哈"; Stri ...
- Java 使用 Map 实现缓存工具
以下代码参考于网上,做了小部分修改. 该代码实现了定时清除临时缓存的功能. 缓存管理类 package com.wbproject.util.cache; import java.time.Local ...
- 来啊踩fastjson打印入参导致业务跑偏的坑
线上代码对日志的记录,重要性自不必说.但是怎样记录日志也是有讲究的! 日志可以直接在每个方法中进行日志记录,优点是想怎么记就怎么记,缺点是记日志的代码可能会超过你的业务代码,可读性急剧下降,这也是日志 ...
- 原生js实现返回顶部特效
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- Spring Boot Redis Cluster 实战干货
添加配置信息 spring.redis: database: 0 # Redis数据库索引(默认为0) #host: 192.168.1.8 #port: 6379 password: 123456 ...
- (转)[Python 网络编程] makefile (三)
socket.makefile(mode ='r',buffering = None,*,encoding = None,errors = None,newline = None )返回一个与套接字相 ...
- springBoot(8)---整合redis
Springboot整合redis 步骤讲解 1.第一步jar导入: <dependency> <groupId>org.springframework.boot</gr ...