Angularjs中controller的三种写法分享

2024-10-08 10:31:41

前言

在Angular中，Directive、Service、Filter、Controller都是以工厂方法的方式给出，而工厂方法的参数名对应着该工厂方法依赖的Service。angularjs中controller其实就是一个方法，它有三种写法，下面来一起看看吧。

第一种：

<pre name="code" class="javascript">var AppController = ['$scope', function($scope){
   $scope.notifyServiceOnChage = function(){
   console.log($scope.windowHeight);
 };
}];
app.controller('AppController',AppController);

在定义AppController的时候，先声明方法需要注入的参数，然后再定义方法体。最后将AppController绑定到app上。

第二种：

app.controller('AppController', function($scope){
  $scope.notifyServiceOnChage = function(){
   console.log($scope.windowHeight);
 };
})

直接在app的controller属性定义，首先是controller名字，然后是方法体。

第三种：

function AppController($scope) {
  $scope.notifyServiceOnChage = function(){
   console.log($scope.windowHeight);
 };
}

直接写方法，然后在ng-controller引用该方法

总结

以上就是关于angularjs中controller三种写法的全部内容，不知道大家都学会了没有，希望这篇文章的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

AngularJS利用Controller完成URL跳转

具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button
AngularJS实现controller控制器间共享数据的方法示例

本文实例讲述了AngularJS实现controller控制器间共享数据的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myapp"> <head> <title>www.jb51.net 控制器间共享数据</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.co
AngularJs学习第五篇从Controller控制器谈谈$scope作用域

Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo
AngularJS控制器controller给模型数据赋初始值的方法

本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do
AngularJS控制器controller正确的通信的方法

AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro
angularJS+requireJS实现controller及directive的按需加载示例

最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: 思路如下 1.借助ui-router里面的resolve属性来实现预加载 2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令 3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.confi
AngularJS 控制器 controller的详解

AngularJS 控制器 controller的详解一.控制器概念控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",
Angularjs的Controller间通信机制实例分析

本文实例讲述了Angularjs的Controller间通信机制.分享给大家供大家参考,具体如下: 在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信-事件机
Angularjs中controller的三种写法分享

前言在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco
vue中template的三种写法示例

第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <!DOCTYPE html> <html>  <head> &
VUE中template的三种写法

一.直接写在构造器中  <div id ="app1"> </div> <script> var vm1 = new Vue({ el: '#app1', data: {}, methods: {}, template:`<h3>在构造器中的文字</h3>` }); </script> 二.写在HTML自带的<template>标签中 <!
C#中单例模式的三种写法示例

第一种最简单,但没有考虑线程安全,在多线程时可能会出问题,不过俺从没看过出错的现象,表鄙视我-- 复制代码代码如下: public class Singleton { private static Singleton _instance = null; private Singleton(){} public static Singleton CreateInstance() { if(_instance == null) {
Angularjs 自定义服务的三种方式(推荐)

AngularJS简介: AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起来非常简单. angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$provide var starterApp = angular.module('
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】

本文实例讲述了PHP中常用的三种设计模式.分享给大家供大家参考,具体如下: PHP中常用的三种设计模式:单例模式.工厂模式.观察者模式 1.单例模式为何要使用PHP单例模式? 多数人都是从单例模式的字面上的意思来理解它的用途, 认为这是对系统资源的节省, 可以避免重复实例化, 是一种"计划生育". 而PHP每次执行完页面都是会从内存中清理掉所有的资源. 因而PHP中的单例实际每次运行都是需要重新实例化的, 这样就失去了单例重复实例化的意义了. 单单从这个方面来说, PHP的单例的确有
angular1.x ui-route传参的三种写法小结

如下所示: .state('classrooms',{ url: '/classrooms/:id' }) .state('classrooms',{ url: '/classrooms/{id}' }) .state('activities',{ url: '/activities', params: { id: { value: 42} } }) localhost:3000/#/classrooms/3 function ClassroomController($stateParams){
SpringMVC框架实现Handler处理器的三种写法

一.SpringMVC中的处理器配置完SpringMVC的处理器映射器,处理适配器,视图解析器后,需要手动写处理器.关于处理器的写法有三种,无论怎么写,执行流程都是①处理映射器通过@Controller注解找到处理器,继而②通过@RequestMapping注解找到用户输入的url.下面分别介绍这三种方式. package com.gql.springmvc; import java.io.IOException; import javax.servlet.ServletException;
AngularJS中指令的四种基本形式实例分析

本文实例讲述了AngularJS中指令的四种基本形式.分享给大家供大家参考,具体如下: 指令的四种基本形式中, 注意注释型指令 M 的使用方法是  注意左右俩测必须有空格才会正常识别所有指令是可以相互组合的,不写restrict ,将会默认为A属性指令要支持IE8 浏览器一般最好将指令设置为属性 <!doctype html> <html ng-app="myapp"> <head>
React组件的三种写法总结

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

Angularjs中controller的三种写法分享

相关推荐

随机推荐