angular的基本要点
<body ng-app="Myapp">
<div ng-controller="firstcon">
<h1>hello {{ del }}</h1>
</div>
</body>
（本人最近几个月一直研究angularjs，对angluarjs有些个人理解，首先分享些angular基础，以及重点概要，希望对angular初学者有些帮助，后续会陆续的分享我对angular的一些个人和重点要素的理解和用法）
现在，闲暇之余，一点一点的把自己学到的分享给大家！！
1、模块
在angular中主要模块定义方式：Angular.module("myapp",[]);
myapp:第一个模块的名称
[]：用来依赖的模块
2、作用域
angular启动生成视图是，会将ng-app元素同$rootScope进行绑定，$rootScope是所有$scope的最根部（ng-app是绑定controller方法，$rootscope是模块中的全局变量），不同的模块有不同的$rootScope，相当于每个人都有唯一的ID类似，在绑定数据的时候，回想找到上级，就是$scope，如果上级没有的话，那么就找本体（$rootscope），
<sccript type="text/javascript">
angular.module("Myapp", []).run(function ($rootScope) {
$rootScope.name = "dd";
})
angular.module("Myapp1", []);
</script>
<div ng-app="Myapp1">
<h1>hello {{ name }}</h1>
</div>
<div ng-app="Myapp">
<h1>hello {{ name }}</h1>
</div>
3、控制器
控制器在在我看来，就是增强angular中的视图。Angularjs中的控制器是一个function，用来像视图页面作用域中添加功能的，用来给视图作用域对象设置初始状态和自定义行为。
我们在页面中创建一个控制器，angular就会生成并传递新的$scope给这个控制器
var first= angular.module("Myapp", []).run(function ($rootScope) {
$rootScope.name = "bbb";
})
first.controller("firstcon", function ($scope) {
$scope.del = "ddd";
});
<body ng-app="Myapp">
<div ng-controller="firstcon">
<h1>hello {{ del }}</h1>
</div>
</body>
上诉是描述一些控制器在js中的，控制器其实还能嵌套在html中
var first= angular.module("Myapp", []).run(function ($rootScope) {
$rootScope.name = "bbb";
})
first.controller("firstcon", function ($scope) {
$scope.del = "ddd";
});
first.controller("scend", function ($scope) {
$scope.dh = "aaa"
});
<body ng-app="Myapp">
<div ng-controller="firstcon">
<div ng-controller="scend">
<h1>hello {{ del }}</h1>
<h1>hello {{ dh }}</h1>
</div> </div>
</body>
4、表达式
表达式和evel（表达式）非常像，在angular中表达式是由angularjs来处理的。angularjs通过$scope这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。讲$scope注入到控制中，然后调用它可以实现手动解析表达式
<script type="text/javascript">
var first = angular.module("Myapp", []);
first.controller("firstcon", function ($scope,$parse) {
$scope.$watch('d', function (newVal, oldVal, scope) {
if (oldVal !== newVal) {
var parseFun = $parse(newVal);
$scope.parseValue=parseFun(scope)
}
});
}); </script>
<body ng-app="Myapp">
<div ng-controller="firstcon">
<input ng-model="d" type="text" placeholder="deded" />
<h2>{{parseValue}}</h2>
</div>
</body>
angular的基本要点的更多相关文章
- Angular 快速学习笔记(1) -- 官方示例要点
创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...
- angular 指令 要点解析
指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict = 'AECM' 分别指该指令标识位于 attribute属性: < ...
- Angular 2 + 折腾记 ：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点
前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先须要操作表单的模块引入这两个模块. import { FormsModule, ReactiveFormsModule } ...
- TypeScript: Angular 2 的秘密武器（译）
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- 自定义Angular插件 - 网站用户引导
最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所 ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- Java Web编程技术学习要点及方向
学习编程技术要点及方向亮点: 传统学习编程技术落后,应跟著潮流,要对业务聚焦处理.要Jar, 不要War:以小为主,以简为宝,集堆而成.去繁取简 Spring Boot,明日之春(future of ...
- Angular 2.0 的设计方法和原则
转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从 ...
随机推荐
- HackThirteen 在onCreate()方法中获取View的宽度和高度
1.概要: Android源代码中很多模块都使用了post()方法,深入理解框架曾运行机制对于避开类似于本例中的小陷阱是很重要的 2.问题提出: 如果开发一些依赖于UI控件的宽和高的功 ...
- Visual Studio 2015 开发 ASP.NET 5
在以往微软发布或更新 Visual Studio 版本时,我们开发 ASP.NET 应用程序,带给我们的变化其实并不是很大,或者说你根本就感受不到变化,你感受到的只是下载安装了几个 G 的 Updat ...
- LOJ#10172. 「一本通 5.4 练习 1」涂抹果酱
题目链接:https://loj.ac/problem/10172 题目描述 Tyvj 两周年庆典要到了,Sam 想为 Tyvj 做一个大蛋糕.蛋糕俯视图是一个 N×MN×MN×M 的矩形,它被划分成 ...
- Django之跨域请求同源策略
同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过 ...
- 题解 P1255 【数楼梯】
题目链接 好吧,承认python 轻松水过 代码奉上: n = int(input()) #定义,输入 a=1 #初始的变量赋值 b=1 n-=1 #我的毒瘤的循环不得不加上这句话 if n > ...
- jQuery EasyUI Datagrid组件默认视图分析
在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...
- [POI2007]ZAP-Queries 数学
题目描述 Byteasar the Cryptographer works on breaking the code of BSA (Byteotian Security Agency). He ha ...
- spring配置文件中导入约束的详细步骤
这里先以<beans>元素为例: 首先在eclipse中引入相关约束: 点击OK后,这个约束就被引入到eclipse中了,这一步的意义在于:就算你处于脱机情况下(不能联网),也能给你提示. ...
- CentOS7 配置 nginx php php-fpm
上一篇说到安装 php 装完并没有任何设置,这篇记录一下设置.先设置 nginx 吧,nginx 网上多如繁星的设置但大都比较简单,属于基础设置,因此此处只贴出设置后的结果,用红色框表示一些自己改动或 ...
- 江西理工大学南昌校区排名赛 C: 单身狗的地图游戏
题目描述 萌樱花是一只单身狗. 萌樱花今天决定去喜欢的学妹家玩,但他不记得路,于是他拿出有n个点的完全图,选取了k条不同的路. 完全图:n 个点的图中任意两个点之间都有一条边相连,所以有 n*(n-1 ...