AngularJs基础（一）
2024-08-27 05:37:15
使用 angularjs
首先在页面的<html>里添加一个模块写法：
<html lang="en"ng-app="myApp">
myApp是模块的名字; 接下来就可以写html标签了：
<div ng-controller="myctr1">
<p>{{name}}</p>
</div>
myctr1 是控制器的名字 p标签里的写法就是访问 js 代码中控制器里的变量 页面控制器可以嵌套控制器，当子控制器访问的属性没有时，就会向上寻找父控制器里有没有，直到根控制器
$scope 当前作用域
$rootScope 根作用域
首先要创建一个模块：
var app = angular.module('myApp',[]);
创建当前范围$scope -写法：
app.controller(myctr1',function($scope){
$scope.name = '大厨的笔记';
});
创建根范围$rootScope -写法：
app.controller('myctr1',function($rootScope){
$rootScope.age = '24';
});
根范围可以和当前范围写到一个控制器里-写法：
app.controller('myctr1',function($scope,$rootScope){
$scope.name = '大厨的笔记';
$rootScope.age = '24';
});
当前范围$scope:
在当前作用域定义的属性只有当前作用域可以访问到，其他的作用域里是访问不到的，就像局部变量一样。 根范围$rootScope:
根作用域定义的属性所有的作用域都可以访问到，就像全局变量一样。 优先级：
如果访问的属性在当前范围内没有找到就会使用根范围内定义的属性，如果找到了就不会使用根范围内的属性，就像 js 中的原型链一样。 使用当前范围$scope 定义的属性只能在当前控制器里访问。
使用根范围$rootScope 定义的属性在对应的模块里的任何控制器里都可以访问到
表达式-写法:
<p>{{1-1}}</p>
输出 0 可以写判断运算符同样输出 true / false 接下来是整个 HTML 代码：
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angularJs</title>
<style>
*{padding:0;margin:0;}
body{padding-bottom:100px;}
</style>
<script src="angular/angular-1.2.19.min.js"></script>
</head>
<body>
<input type="text" ng-model="user"/>
<p>{{user}}</p>
<h1>表达式</h1>
<p>{{'hello'+" "+'world'}}</p>
<p>{{123}}</p>
<div ng-init="arr=['a','b','c','d']">
<h2>数组</h2>
<p>{{arr[0]}}</p>
<p>{{arr[1]}}</p>
<p>{{arr[2]}}</p>
<p>{{arr[3]}}</p>
</div>
<div ng-init="arr1={name:'123'}">
<h2>对象</h2>
<p>{{arr1.name}}</p>
</div>
<div>
<h2>运算符</h2>
<p>{{1+1}}</p>
<p>{{1-3}}</p>
<p>{{2*4}}</p>
<p>{{3/6}}</p>
</div>
<div>
<h2>比较运算符</h2>
<p>{{3>1}}</p>
</div>
<div>
<h2>控制器</h2>
<div ng-controller="myctrl">
<p>用户名：{{username}}</p>
</div>
<div ng-controller="myctr2">
<p>{{text}}</p>
<button ng-click="play(33)">点击</button>
</div>
</div>
<div ng-controller="myctr3">
<p>{{userInfo.name}}</p>
<button ng-click = "userInfo.fn(33333333333)">点击</button>
</div>
<script>
angular.module('myApp',[])
.controller('myctrl',function($scope){
$scope.username = 'chenzhanghui';
})
.controller('myctr2',function($scope){
$scope.text = '我是第二个控制器';
$scope.play = function(e){
alert(e);
}
})
.controller('myctr3',function($scope){
$scope.userInfo = {
name:'大厨的笔记',
fn:function(){
alert(arguments[0]);
}
}
})
</script>
</body>
</html>
最新文章
- CentOS：Yum源的配置
- 自定义Angular插件 - 网站用户引导
- VS Extract Method
- beanstalkd----安装启动
- android xmlns:tools用法
- [Math] A love of late toward Mathematics - how to learn it?
- JS图片延迟加载分析及简单的demo
- 敏捷BI——岂止于快
- 老李分享：持续集成学好jenkins之Git和Maven配置 1
- 理解DNS
- Duplicate column name 'vocabulary'
- 通过java实现解压zip，rar的代码
- angularjs的ng-change事件演示
- MySQL主从复制日常管理维护篇
- Android开发之使用DefaultHandler处理XML数据
- 8.29 jQuery
- RDD之三：RDD创建方式
- CentOS 添加新硬件硬盘，扩展空间而无需重启虚拟机
- 分页器与form表单
- Kali Linux：使用nmap扫描主机