augular.js 菜鸟学习笔记 （三）

AngularJS HTML 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

ng-click 指令定义了一个 AngularJS 单击事件

<div ng-app=""  ng-init="count=1">

<button ng-click="count = count+1 ">33</button>
{{count}}
</div>

or

<div ng-app="" ng-controller="count">

<button ng-click="count = count+1 ">33</button>
{{count}}
</div>

<script>
function count($scope){
$scope.count=1;
}
</script>

隐藏 HTML 元素

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见。

ng-hide="false" 让元素可见。

<div ng-app="" ng-controller="peopleController">
<button ng-click="toggle()">123</button>
<div ng-hide="myVar">{{people.name+"  "+people.age}}</div>
</div>

<script>
function peopleController ($scope){
$scope.people={name:123,age:999} ;
$scope.myVar=false;
$scope.toggle = function(){
$scope.myVar =!$scope.myVar;
}

}
</script>

效果：点击123按钮时myVar取非改变div是否显示

应用解析:

personController的第一部分与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置应用中的元素不可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

AngularJS 模块

模块定义了您的应用程序。

所有的控制器都应该属于一个模块。

模块保持全局命名空间中的整洁。

AngularJS 模块实例

在本实例中，"myApp.js" 包含了一个应用程序模块定义，"myCtrl.js" 包含了一个控制器：

<div ng-app="myapp" ng-controller="myController">
{{name+"   "+age}}
</div>

<script src="lib/angular-1.2.5.min.js"></script>
<script src="Angular1.js"></script>
<script src="Angular2.js"></script>

Angular1.js:

function <span style="line-height: 16.7999992370605px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">myController</span><span style="line-height: 16.7999992370605px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;"> ($scope){</span>
$scope.name = "aa";
$scope.age = "bb"
}

Angular2.js:

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

//output aa bb

控制器污染了全局命名空间

本教程中，截至目前为止的所有实例都使用了全局函数。

在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。

全局值（变量或函数）可被其他脚本重写或破坏。

为了解决这个问题，AngularJS 使用了模块。

AngularJS 模块

使用一个简单的 控制器：

<div ng-app=""  ng-controller="myController">
{{name+"   "+age}}
</div>
<script>

function myController($scope){
$scope.name = "aa";
$scope.age = "bb"
}
</script>

使用模块实现

<div ng-app="myApp" ng-controller="people">
{{name+"   "+age}}
</div>

<script>
var app= angular.module("myApp",[]);    //模块
app.controller("people",function($scope){  //控制器
$scope.name=123;
$scope.age=123;
});
</script>

AngularJS 表单实例

<span style="font-family:Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;">    <div ng-app="myApp" ng-controller="userController"</span><span style="font-family:courier new;"><span style="font-size: 13.6000003814697px;">  novalidate</span></span><span style="font-family:Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;">>
<from>
<input type="text"  ng-model="user.name" />   <!--绑定模型user.name-->
<input type="text"  ng-model="user.age" />     <!--绑定模型user.age-->
<button ng-click="retest()">retest</button>
</from> <br/>
{{user}} <br/>
{{master}}
</div>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("userController",function($scope){
var startValue ={name:"gg",age:12};   //设置初始值

$scope.user=  angular.copy(startValue);         //页面显示的初始值
$scope.master = angular.copy(startValue ) ;    //初始模型

$scope.retest=function (){
$scope.user= angular.copy($scope.master);  //变回你原来的样子
}
});

</script></span>

	HTML 属性 novalidate 用于禁用浏览器的默认验证。

感谢
w3c