1.模块和控制器
ng-app 模块
ng-controller 控制器
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--引入自己的样式文件css-->
<link href="angular_demo1.css" rel="stylesheet">
<!--引入angularJs-->
<script src="angular.min.js"></script>
<!--引入自己的js文件-->
<script src="angualr_demo1.js"></script>
<title>angularJsDemo1</title>
</header>
<!--模块 ng-app指令模块的起始节点，它里面包含的所有控制器都属于他管理-->
<body ng-app="myApp">
<!--ng-controller指令即控制器，他所在节点的所有子节点都归他管，别人无权干涉。-->
<div ng-controller="firstController">
<div>按钮first属于第一个控制器，被包含在firstController的节点之中,点击弹出alert框</div>
<!-- ng-click angularJs的监听点击事件的指令，可以卸载任意标签上，
该标签就被设置了点击监听，这里设置点击了按钮就会调用showAlert()这个方法，
该方法定义在firstController中-->
<button ng-click="showAlert()">first</button>
</div>
<div ng-controller="SecondController">
<!--第二个控制器里也有同样的按钮事件，但是对应的控制器中没有定义这个函数，就不会有任何反应
想要有反应就要在第二个控制器中去定义，这就是控制器。可以把一个个作用域独立起来，减少数据过多
导致混乱。一般开发中一个应用对应一个ng-app，应用的入口。在他之下有多个控制器，一个控制器对应一个页面
这里方便观察写在一个页面中的。-->
<button ng-click="showAlert()">second</button>
</div>
</body>
</html>js
/**
* Created by wangjiakun on 2016/9/19 0019.
*/
var myApp = angular.module("myApp",[]);// 定义模块，关联到ng-app对应的那个模块中
/*.controller(参数1，参数2)；
* 参数1：对应页面的ng-controller指令的等于值
* 参数2：回调函数，页面对应控制器下的所有逻辑操作都这这里编写；回调函数中的参数个数是可变的
* 根据需要进行添加，$scope这个参数必不可少，他代表这个控制器的作用域。
*
* */
/*定义firstController控制器*/
myApp.controller("firstController",["$scope","$rootScope",function ($scope,$rootScope) {
/*页面中有个点击事件函数它属于第一个控制器，那就该定义在这个控制器的$scope上，即当前的作用域上面*/
$scope.showAlert = function () {
alert("firstController");
};
/*$rootScope.showAlert = function () {
alert("firstController");
};*/
}]);
/*定义secondController控制器*/
myApp.controller("SecondController",["$scope","$rootScope",function ($scope,$rootScope) {
$scope.showAlert = function () {
alert("SecondController");
};
}]);
/*
* $scope和$rootScope
* 控制器中的回调函数中写了两个参数，说一下他们的区别。
* $scope使当前的控制器所管辖的作用域，不在我控制器范围内的节点，是没有权限拿到我控制器中定义的数据和方法的。
* $rootScope是指的应用这个模块（ng-app）对应的作用域，相当于全局变量。定义在它上面的数据和方法，他的子作用域都可以访问。
*像上面的例子，两个控制器的作用域都属于$rootScope 的子作用域，仔细看一下，两个控制器都是在myApp这个变量下定义的，myApp对应的
* 又是ng-app这个指令所对应的模块。上例中可以把第二个控制器中的$$scope.showAlert方法注释掉，应为参数中引入了rootScope，第二个按钮就会
* 调用第一个控制器中的showAlert方法，当然，第一个控制器中的这个方法要定义在$rootScope上。
*
* 定义在$rootScope上的数据和方法，myApp下的所有控制器中都可以访问，当该控制器中有相同的方法数据时，就会优先是调用当前作用
* 域的数据和方法。
*
* */主要了解作用域，模块和控制器概念
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
