angular 笔记（二） 模块(module)、控制器(controller)、作用域(scope) 示例

最新推荐文章于 2020-10-17 20:58:37 发布
最新推荐文章于 2020-10-17 20:58:37 发布
阅读量872 收藏
点赞数
分类专栏： angular javascript angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33036361/article/details/81988480
版权

angular 笔记（二）

模块(module)、控制器(controller)、作用域(scope) 示例

<html ng-app="myApp">
<head>
<script src="angular.js" charset="utf-8"></script>
<script>
//创建一个模块　myApp
let app = angular.module('myApp', []);

//在模块 myApp 在创建一个控制器 main
app.controller('main',function($scope){
    //$scope 作用域，页面绑定变量都保存在scope里    
    $scope.username='ken';//初始化username值为ken 

    //方法也是保存在scope
    $scope.login=function(){
        console.log($scope.username);
    }
});
</script>
</head>
<body ng-controller="main">
    <form name="myform">
        用户名：<input type='text' ng-model='username' name='username' required/>
        <span ng-show='myform.username.$error.required'>*必填项</span><br>
        密  码
最低0.47元/天 解锁文章
qq_33036361
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS系列——作用域、控制器、模块和服务
yingzizizizizizzz的专栏
04-25 1006
作用域和控制器是AngularJS的重要对象 1. 作用域:   * 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)   * 它的属性和方法与页面中的指令或表达式是关联的 2. 控制器:   * 用来控制AngularJS应用数据的实例对象   * ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对
Angular2 NgModule 作用域相关问题
m0_45406092的博客
06-03 287
NgModule 是你使用 Angular 编写应用程序时遇到的第一个基本结构，但由于涉及不同的作用域范围，它也是最微妙和最复杂的。 Why NgModule? 我们可以使用 Angular CLI，自动完成很多工作，但我们必须要做的第一件事就是加载根模块。 platformBrowserDynamic().bootstrapModule(AppModule); NgModule 的目的是声明我们在 Angular 模块中创建的内容，主要有以下两种结构： declarations - 声明模板中使用的
AngularJS学习（三）——Module和Scope
Paul_Huang的Footprint
05-08 723
为什么使用Module? 使用Module的原因是，把AngularJS的JS代码写到HTML文件内不好，要抽取出来成为独立的app.js文件。app里面可以定义一个或多个modules。    Module的写法  angular.module('myApp' , []); 其中‘myApp’是module的名称, [  ]里面是module需要依赖的东西，在模块加载前自动加载。
AngularJS应用模块化，作用域与事件
qq_40975386的博客
05-14 465
AngularJS框架在window对象下一个全局的angular对象，通过调用angular对象的module（）方法返回一个模块实例，我举例一个具体使用方法//定义一个无依赖模块 angular.module('appModule',[]); //定义一个依赖module1、module2的模块 angular.module('appModule',['module1','module2'])...
pytest 4.scope="module"介绍
weixin_30847271的博客
08-02 306
前言： 　　上一篇讲到fixture通过scope参数控制setup级别，不填的时候默认 scope="function"，那么接下来就会讲scope="module"。 1.fixture参数scope=”module”，module作用是整个.py文件都会生效，用例调用时，参数写上函数名称就行。 看以下代码： #!/usr/bin/env/python # -*-coding:u...
对angularJs中controller控制器scope父子集作用域的实例讲解
12-29
1.ctrl1是父级控制器，ctrl2和ctrl3都是ctrl1的子级控制器， 2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变， 3.但是ctrl2有自己的name输入传的值，不会影响ctrl1和ctrl3，这就是继承隔离， 4.ctrl3无...
Angular 作用域scope的具体使用
08-28
Angular 作用域Scope是AngularJS应用程序中一个非常重要的概念，它是应用在HTML视图和JavaScript控制器之间的纽带。作用域Scope是一个对象，有可用的方法和属性。Scope可以应用在视图和控制器上。 根作用域$...
详解angular中的作用域及继承
08-30
Angular中的作用域是基于JavaScript的原型链机制实现的，每个控制器（Controller）都有自己的作用域（$scope），并且可以访问父级作用域中的数据。 1. 作用域的类型 在Angular中，有两种类型的作用域：$rootScope...
手动初始化Angular的模块与控制器
08-31
然而，在某些特殊情况下，我们可能需要手动初始化Angular模块与控制器，这通常发生在我们不希望或者不能使用`ng-app`指令时。本文将详细探讨如何实现这一过程。 手动初始化模块的方法是使用`angular.bootstrap`函数...
Angular.Js之Scope作用域的学习教程
10-19
Scope 层次结构与DOM（文档对象模型）层级相对应，也就是说，每个控制器、指令或某些情况下由特定指令创建的Scope 都有自己的作用范围。Scope 可以监视表达式，处理事件，同时提供了一种方式让视图和模型之间进行...
fixture参数scope=“module“时，module在第一个调用测试固件的函数前面执行一次
公子清羽的博客
10-17 575
fixture参数scope="module"，module作用是整个.py文件都会生效，用例调用时，参数写上函数名称就行。 import pytest @pytest.fixture(scope="module") def open(): print("打开浏览器，并且打开百度首页") yield print("执行teardown!") print("最后关闭浏览器") def test_s1(open): print("用例1：搜索python-1")
《AngularJS权威教程》笔记（3-5）——模块、作用域、控制器
Joyce的前端日常
03-16 344
在几年前，曾经写过一篇笔记（1-2），当时AngularJS是最流行的框架之一。但是由于并没有项目实践，就没有再继续下去。之后，使用了Vue.js，写的很顺手。AngularJS的语法和Vue.js很相似。 实践证明，欠下的，永远要补回来。我即将开始的项目，是一个老工程，用的正是AngularJS，虽然已经出了Angular2，但是项目原因，依旧学习的老版本。于是我又进行了后续的学习，整理了如下...
vue 中css module 的写法 和scope 的区别
蚁族的奋斗的博客
02-19 1150
vue css module 和scope 的区别
Angularjs基础(十)
weixin_33862188的博客
04-28 94
ng-blur 　　　　　　描述：规定blur 事件的行为 　　　　　　实例：当输入框失去焦点的(onblur)时执行表达式： 　　　　　　　　<input ng-blur="count = count + 1" ng-init="count=0"/> 　　　　　　　　<h1>{{count}}</h1> 　　　　　　定义和用法 　　　　　　　　　　ng-...
33.AngularJS 应用 angular.module定义应用 angular.controller控制应用
weixin_34326558的博客
01-02 101
转自：https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块（Module） 定义了 AngularJS 应用。 AngularJS 控制器（Controller） 用于控制 AngularJS 应用。 ng-app指令定义了应用, ng-controller 定义了控制器。 1 &lt;div ng-app="myApp" ng-cont...
Angular1.x关于module,controller,作用域的概念
weixin_34203426的博客
10-07 314
Angular中控制器是一个函数，是用来增强视图的，用来向视图的作用域添加功能。默认的控制器函数，是定义在全局作用域中的。如 function myController($scope){ $scope.message ='hi guys!' } 创建一个控制器时，angular会生成一个新的$scope（局部作用域）,控制器的...
angular controller的使用
believer123的专栏
02-17 1314
在angular.js最常用的模块就是控制器了，通常我们会这样使用： var myAppModule = angular.module('myApp', []);   myAppModule.controller('TextController',       function($scope,$http) {                 } ); 这样就定义了一个新的控制器Tex
AngularJS控制器controller之间通信
lai_xu的专栏
11-02 761
关于控制器如何通信的问题，总的来说，angular控制器通信的方式有三种： 1、利用作用域继承的方式。即子控制器继承父控制器中的内容； 2、基于事件的方式。即$on,$emit,$boardcast这三种方式； 3、angular服务的方式。写一个服务的单例然后通过注入来使用。
angular中为一个module创建多个controller
瞬间空白的博客
11-30 4101
Title {{text}} {{texttt}} angular.module("myApp",[]); angular.module("myApp").controller("filterController",["$scope",function($scope) { $scope.text = "hello";
Angular.js跨controller实现参数传递的两种方法.docx
01-13
在Angular.js框架中，实现跨控制器（Controllers）之间的参数传递是常见的需求，由于每个控制器独立于各自的scope，因此需要采取特殊的方式来共享数据。本文主要介绍了两种有效的方法来解决这个问题： 1. **利用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值