AngularJS的控制器示例

代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsCtrl.rar

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
  <h1>{{ctrl.msg}} AngularJS</h1>
  <button ng-click="ctrl.changeMsg()">Cg</button>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module(‘notesApp‘,[])
     .controller(‘MainCtrl‘,[function(){
       var self=this;
       self.msg=‘Hello‘;
       self.changeMsg=function(){
          if(self.msg==‘Hello‘){
            self.msg=‘Goodbye‘;
          }else{
            self.msg=‘Hello‘;
          }
       };
     }]);
//-->
</script>

点击按钮前后的效果：

要点：

任何定义在控制器实例上的变量都是可以访问的，也能在html中呈现给用户。大部分情况可以用这种方式将数据显示在UI中。

时间： 2024-11-10 00:11:35

AngularJS的控制器示例的相关文章

AngularJs开发——控制器间的通信

AngularJs开发——控制器间的通信指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式基于event传播的方式 service的方式基于scope继承的方式最简单的让控制器之间进行通信的方法是通过scope的继承.假设有两个控制器Parent.Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope.这样,Child就可以访问到Parent的scope中的所有函数和变量了. 需要注意的

AngularJS中的控制器示例_2

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp'

AngularJS中的控制器示例_3

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> var myModule = angular

AngularJS中的控制器示例

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp'

angularJs 跨控制器与跨页面传值

虽然网上概括了四种或更多的传值方式,但我现在用的顺手的就两种首先要知道AngularJs可以构建一个单页面应用程序,所以我划分为跨控制器传值和跨页面传值两类 1.跨控制器传值—— $rootScope 原理:所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中. $rootScope 可作用于整个应用中.是各个 controller 中 scope 的桥梁.用 rootscope 定义的值,可以在各个 controller 中使用应用:

AngularJS之控制器

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可.下面的例子展示了控制器初始化: function my Controller($scope){ $scope.msg="hello,world!"; } 上面这个创建控

AngularJS 父子控制器

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\jquer

Angularjs[3] - 控制器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app> <div ng-controller="firstController"> <input type="

AngularJs——双向数据绑定示例

最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的,今天share下AngularJs的核心功能之一:双向数据绑定. 我们在页面中加入一个表单: <!DOCTYPE html> <html ng-app="userInfoModule"> <head> <meta name="content-type" content="text/html; charset=UTF-8">