Angular快速入门2 ---控制器(controller)
来源:互联网 发布:数据库check约束男女 编辑:程序博客网 时间:2024/06/05 15:47
Angular控制器(controller)
1.概述
AngularJS的核心之一就是控制器部分,主要对于试图中的数据和事件处理函数进行挂载,同时进行一定的业务功能的底层封装和处理。
控制器:Angular中用于进行数据逻辑处理和操作的一个模块
通过controller()函数进行注册
控制器中的参数
控制器:主要用来通过$scope挂载数据、挂载处理函数
代码
<html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/AngularJS/angular.min.js"></script></head><body><div ng-controller="myCtrl"> Mustache:{{name}}**--{{param}}--** ng-bind: <span ng-bind="name"></span></div><hr><div ng-controller="myCtrl2"> Mustache:{{name}}**--{{param}}--** ng-bind: <span ng-bind="name"></span> <button ng-click="test()">clickMe test()</button> <button ng-click="testFn()">clickMe testFn()</button></div></body><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { // 通过$scope挂载变量 $scope.name = "jerry"; }); app.controller("myCtrl2", function($scope) { $scope.name = "tom"; $scope.testFn = function() { alert("用户点击了按钮..."); } }); /* 常规定义的普通变量和函数 */ var param = "hello!"; function test() { alert("用户点击......"); }</script></html>
2.程序加载的顺序
ng-app是Angular运行的入口
程序引导启动——启动项目——启动HTML页面
首先引导启动根模块——找到ng-app,加载ng-app对应的模块
引导启动模块下的控制器—— 加载模块下面的控制器
ng-app执行的过程
底层——通过bootstrap进行了引导启动
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/AngularJS/angular.min.js"></script> <!-- 引入Angular库 --></head><body> <!-- 通过ng-app指令进行应用的引导启动:推荐的方式,项目中常用的方式 --> <div ng-app="myApp1"> <div ng-controller="myCtrl"> {{name}} <button ng-click="startApp2()">点击启动myApp2模块</button> </div> </div> <div id="startUp"> <div ng-controller="myCtrl"> {{name}} </div> </div> <script> var app1 = angular.module("myApp1", []); app1.controller("myCtrl", function($scope) { $scope.name = "hello start myApp1"; $scope.startApp2 = function() { console.log("**********"); // 启动第二个模块 var _startUp = document.getElementById("startUp"); angular.bootstrap(_startUp, ["myApp2"]); } }); var app2 = angular.module("myApp2", []); app2.controller("myCtrl", function($scope) { $scope.name = "hello start from bootstrap!"; }); </script></body></html>
0 0
- Angular快速入门2 ---控制器(controller)
- Angular入门级教程三 Angular 中的控制器(controller)
- Angular入门02- Module模块、Controller控制器
- angular--控制器controller
- Sencha Touch 2 快速入门系列(八) -- 控制器(Controller)
- Sencha Touch 2 快速入门系列(八) -- 控制器(Controller)
- angular 之 控制器 controller详解
- angular入门学习控制器
- Angular快速入门(一)
- Controller接口控制器(2)
- (三)Angular控制器,Module.controller() 控制器,单向绑定和双向绑定
- Angular(五)_控制器ng-controller
- Angular入门(二)快速入门
- Angular入门 Angular控制器 常见内置指令
- AngularJS入门(6)-Angular控制器
- loadrunner入门篇-Controller控制器
- loadrunner入门篇-Controller控制器
- loadrunner入门篇-Controller控制器
- Mybatis非mapper代理配置
- 单向链表,加数
- activeperl pp 打包遇到的问题
- 管理系统简单的分区和文件系统
- Angular入门、Angular控制器、Angular常见内置指令总结
- Angular快速入门2 ---控制器(controller)
- PHP基于SMTP协议实现邮件发送
- AngularJS快速入门
- ThinkPad L450加装固态硬盘教程
- 浙江省选day2第一天
- zzulioj 信道安全
- 【详细内容】NCS8801S芯片RGB LVDS转EDP
- Angular Js快速入门
- Angular控制器