angular学习笔记一

原创 2015年07月09日 13:43:30
输出显示
<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>angular</title>
    <script src="angular.js"></script>
    <script src="index.js"></script>
</head>
<style type="text/css">
.ng-hide {
  display:block!important;
  position:absolute;
  top:-9999px;
  left:-9999px;
}
</style>
<body>
<div ng-controller="bookCtrl">
	<!-- message为使用简化写法输出内容',message2为使用指令输出,当angular.js没有加载时(网络不好时),简化输出的方式会在页面显示出表达式,所以不建议在首页使用,而指令表达式则没有问题-->
	<p>{{message}}</p>
	<p ng-bind="message2"></p>
	<!-- ng-show的值为true时显示,false时隐藏 (PS:必须加上ng-hide属性后才会隐藏)-->      
	 <div ng-show="true"> Visible </div>      
	 <div ng-show="false" class="ng-hide"> Invisible </div>
</div>
</body>
</html>

index.js

function bookCtrl($scope){
	$scope.message ="Hello World";
	$scope.message2 = "Hello everyOne";
};

绑定事件

html

<div ng-controller="ClickController">
		<button ng-click="click()">button</button>
		<p>{{message3}}</p>
	</div>
js

function ClickController($scope) {         
		$scope.click = function(){
			$scope.message3= "click button"; 
		}      
	}

点击button 输出 
click button


相关文章推荐

angular学习笔记

  • 2017年08月22日 08:58
  • 67KB
  • 下载

angular学习笔记

  • 2014年06月09日 21:23
  • 1.52MB
  • 下载

angular控制器之间的通信(学习笔记)

angular作用域理解 作用域在一个angular应用中是以树形体现的,根作用$rootScope就位于最顶层,从它往下挂着各级作用域.每一级作用域上面挂着变量和方法,供所属的视图调用.可以这么说每...

angular学习笔记

  • 2016年06月24日 00:23
  • 3KB
  • 下载

Angular4学习笔记(三):router

router:一条大路呦,通呀通我家

Angular4学习笔记(六)- Input和Output

概述Angular中的输入输出是通过注解@Input和@Output来标识,它位于组件控制器的属性上方。 输入输出针对的对象是父子组件。演示Input 新建项目connInComponents:ng...

Angular JS 学习笔记3

此文章通过一个例子的引入,我们学会了Angular JS的好处,同时也明白了学习Angular JS的原因。...

AngularJS学习笔记--使用angular.extend()实现工厂模式

AngularJS之使用angular.extend()实现工厂模式angular提供了extend()这个非常实用的方法,它的作用是将第一个参数以后的参数(可以传入多个参数)合并到第一个参数,即将其...

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1...
  • yzbben
  • yzbben
  • 2016年10月10日 10:36
  • 409

angular学习笔记(2)

html: 混合多选
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular学习笔记一
举报原因:
原因补充:

(最多只允许输入30个字)