AngularJS1
Ⅰ.AngularJS的点点滴滴--引导
AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧
###页面引导实例化
* * *
######1.自动实例化
```html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body ng-app="app">1+2={{1+2}}</body>
<script>angular.module('app',[])</script>
</html>
```
>如果不写*app*这个值那么script的内容可以不写
######2.手动实例化（主要通过js来引导）
```html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body>1+2={{1+2}}</body>
<script>
angular.module('app',[])
.conifg(function(){})
.run(function(){alert('start');});
angular.bootstrap(document, ['app']);
</script>
</html>
```
>* 为什么声明一个模块后面有一个中括号?
>* 因为angular是模块开发,声明一个模块必须要依赖另一个模块或者空模块，否则就声明失效啦
>* config的方法可以配置模块，run是在模块执行前所执行的方法
###模块的依赖调用
* * *
```javascript
angular.module('route',[]);
angular.module('app',['route']);
```
>就是这么简单直接route模块的东西都可以被app模块所调用声明一个模块必须要依赖另一个模块或者空模块
###模块的控制器(*$scope*这个参数即为控制器的上下文)
* * *
######1.调用模块的*controller*方法即可声明一个控制器而且返回当前模块所以可以用级联,
```html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body ng-controller="a">{{data}}</body>
<script>
angular.module('app.controller',[])
.controller('a',['$scope',function($scope){
$scope.data=1;
}]);
angular.module('app',['app.controller']);
angular.bootstrap(document, ['app']);
</script>
</html>
```
>* 为什么声明一个*$scope*这个变量?
>* 因为当进行压缩js代码的时候变量名称改变,为了第一个参数为*$scope*这个变量而设计的,
>* 所以可以写成
```javascript
angular.module('app.controller',[])
.controller('a',['$scope',function(c){
c.data=1;
}]);
```
######2.直接声明一个全局方法
```javascript
function a(a){c.data=1;}
a.$inject = ['$scope'];
angular.module('app',[]);
angular.bootstrap(document, ['app']);
```
>*controller*的*$inject*对象也是同上原因声明第一个参数为*$scope*,如果不压缩可以忽略
###数据绑定
* * *
>数据绑定是用了2个大括号,并且获取*controller*中的数据，如果使用指令则{{}}可以省略直接写属性
* * *
* 本文链接地址：[Ⅰ.AngularJS的点点滴滴--引导](http://www.cnblogs.com/cnlj/p/3436309.html)
AngularJS1的更多相关文章
- Angularjs1培训
Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...
- Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...
- angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接 懒得把 ...
- 关于vue，angularjs1,react之间的对比
1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...
- Angular系列-AngularJs1使用Ace编辑器
Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxo ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- angularjs1 实现地图添加自定义控件（搜索功能）及事件
// 添加地图自定义控件的事件 function addEventHandler(target, eventName, handler) { if (target.addEventListener) ...
- AngularJS1.3一些技巧
前言 框架选择.在上一篇文章评论中,有人说angular1.3是个过时的东西,建议使用angular2.其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方, ...
- 【原创】angularjs1.3.0源码解析之service
Angular服务 在angular中,服务(service)是以提供特定的功能的形式而存在的. angular本身提供了很多内置服务,比如: $q: 提供了对promise的支持. $http: 提 ...
随机推荐
- Nyoj Fire Station
描述A city is served by a number of fire stations. Some residents have complained that the distance fr ...
- VAXVOIP SDK Licensekey
Insert the following key to the SDK with SetLicenseKey call: VAXVOIP.COM-191P238P55P253P97P229P51P76 ...
- CSDN下载频道2014年11月4日本-5日常维护公告
尊敬的用户: CSDN于2005年推出了下载服务.经过数年的发展.下载频道的用户已经为无数用户提供了帮助,分享500万的技术资源. CSDN下载频道将于2014年11月4日23点至11月5日8点进行积 ...
- Session与Caching
Session与Caching 在之前的版本中,Session存在于System.Web中,新版ASP.NET 5中由于不在依赖于System.Web.dll库了,所以相应的,Session也就成了A ...
- uva10718 - Bit Mask(贪心）
题目:uva10718 - Bit Mask(贪心) 题目大意:给出32位无符号的整数n ,给定边界L和R,要求在这个边界里面找出一个整数,它和N做或运算得到的值最大. 解题思路:要求做或运算得到的值 ...
- 私人定制javascript中对象小知识点(Only For Me)
废话不多讲,先上笑话,然后再,.看懂这个的说明你的节操已经不再了. 晚饭后去理发店理发...割了吧...老板问我怎么剪,我悠悠的来一句往帅了剪...高潮往往令人想不到....旁边一在焗油烫头发的大妈说 ...
- cocos2d 游戏开发实战
文章转自:http://uliweb.clkg.org/tutorial/read/40 6 cocos2d 游戏开发实战 6.1 创建cocos2d项目 6.2 cocos2d v3 & ...
- android 控制手机的体积的大小 切换音效模式
(1)项目介绍 于android API的AudioManager于,它提供了一种方法来调整电话音量. audioMa.adjustVolume(AudioManager.ADJUST_LOWER, ...
- ASP.Net TextBox控件只允许输入数字
原文:ASP.Net TextBox控件只允许输入数字 1.1.在Asp.Net TextBox 控件的 OnKeyPress 事件中指定输入键盘码必须为数字: <asp:TextBox ID= ...
- 关于WIN32.EXE变态木马下载器的解决办法
一.WIN32.EXE的来源:http://fdghewrtewrtyrew.biz/adv/130/win32.exe 二.运行后的表现:此WIN32.EXE通过80和8080端口访问若干个IP,若 ...