Angular Js 控制器

在Angularjs中用ng-controller指令定义了应用程序中的控制器;例如:

<div ng-app="myApp" ng-controller="myCtrl">
姓: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

在控制器中,可以定义方法和属性,而且一个页面可以有多个控制器,并且控制器是可以嵌套的。例如:

<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="CommonController">
            <div ng-controller="Controller1">
                <p>{{greeting.text}},Angular</p>
                <button ng-click="test1()">test1</button>
            </div>
            <div ng-controller="Controller2">
                <p>{{greeting.text}},Angular</p>
                <button ng-click="test2()">test2</button>
                <button ng-click="commonFn()">通用</button>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>
控制器CommonController中定义了Controller1和控制器Controller2,Controller1,Controller2可以调用自己定义的方法和属性,如果不存在,则也可以调用CommonController中的方法和属性;所以可以把公共的定义在CommonControlle中
var app=angular.module("myApp",[]);
      app.controller("CommonController",function($scope){
             $scope.commonFn=function(){
                  alert("这是通用的");
             }
             $scope.greeting={
                   text:"common"
             }
      })

      app.controller("Controller1",function($scope){
           $scope.greeting={
                 text:"test11"
           };
           $scope.test1=function(){
                 alert("这是test1方法");
           }
      });

      app.controller("Controller2",function($scope){
              // $scope.greeting={
              //     text:"test22"
              // };
              $scope.test2=function(){
                  alert("这是test2");
              }
      });

 $emit和$broadcast的区别

$emit 只可以向自身以及父级传播事件;

$broadcast 只可以向自身以及子节点传播事件;

例如:

<!doctype html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="Scope1.css" />
    </head>
    <body>
        <div ng-controller="EventController">
            Root scope
            <tt>MyEvent</tt> count: {{count}}
            <ul>
                <li ng-repeat="i in [1]" ng-controller="EventController">
                    <button ng-click="$emit(‘MyEvent‘)">
                        $emit(‘MyEvent‘)
                    </button>
                    <button ng-click="$broadcast(‘MyEvent‘)">
                        $broadcast(‘MyEvent‘)
                    </button>
                    <br>
                    Middle scope
                    <tt>MyEvent</tt> count: {{count}}
                    <ul>
                        <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                            Leaf scope
                            <tt>MyEvent</tt> count: {{count}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script type="text/javascript">
       // function EventController($scope){
       //         $scope.count=0;
       //      $scope.$on("MyEvent",function(){
       //          $scope.count++;
       //      })
       // }
       var app=angular.module("myApp",[]);
       app.controller("EventController",function($scope){
              $scope.count=0;
              $scope.$on("MyEvent",function(){
                    $scope.count++;
              });
       });
    </script>
</html>
时间: 03-13

Angular Js 控制器的相关文章

angular js模块,angular js控制器

AngularJS 模块 var app = angular.module('myApp', []); AngularJS 控制器 app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); AngularJS 实例 <div ng-app="myApp" ng-controller="myCtr

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决

Angular js 简介

---恢复内容开始--- 1:通过 <script> 标签添加一个anjular.js 文件到 HTML 页面 ,(建议把脚本放到body元素的底部) AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效. 2:常用的 angular js 的Directives(指令) ng-app:指令定义一个angular js  的应用程序.如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果. ng-model

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

angular之控制器(0)

一.控制器的含义 在angularJS中,controlle是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为 二.控制器的作用 1. 控制 AngularJS 应用程序的数据 2.对$scope对象进行初始化(可以理解为每个控制器都对应一个$scope,每个控制器里面的$scope都是互相封闭的,互不影响..除了嵌套控制器.留在以后讲$scope的作用域) 三.控制器的意义 通过控制器实现代码的业务逻辑代码. 注意:控制器的设计出发点是封装单个视图的业务逻辑

Angular JS知识小总结

1.什么是Angular JS? AngularJS 是一个为动态WEB应用设计的 JavaScript结构框架. 2.Angular JS的用处? --它是为了克服HTML在构建应用上的不足而设计; --适用于CRUD应用,是为了消除页面上的DOM操作而生.它的核心理念是借鉴了MVC框架,但是它其实更接近于MVVM.viemmodel是一个原生的javascript对象,angularJS把view和model加到viemmodel上,从而实现数据的绑定.而且这种绑定是双向的,即view变化

Angular.js的MVC

Angular.js中实现MVC的方式: 双向绑定: <!DOCTYPE html> <html lang="zh_CN" ng-app> <head> <meta charset="UTF-8"> <title>AngularJs入门</title> <link type="text/css" rel="stylesheet" href="

angular.js之路由的选择

在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的