angularJs基础（1）

来源：互联网发布：appserv 端口编辑：程序博客网时间：2024/06/03 23:04

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>

/** * 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下的所有控制器中都可以访问，当该控制器中有相同的方法数据时，就会优先是调用当前作用* 域的数据和方法。** */

完整例子在附件！主要了解作用域，模块和控制器概念

1 0