Ⅰ.AngularJS的点点滴滴--引导
AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧
页面引导实例化
1.自动实例化
<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>
<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是在模块执行前所执行的方法
模块的依赖调用
angular.module('route',[]);
angular.module('app',['route']);
就是这么简单直接route模块的东西都可以被app模块所调用声明一个模块必须要依赖另一个模块或者空模块
模块的控制器($scope这个参数即为控制器的上下文)
1.调用模块的controller方法即可声明一个控制器而且返回当前模块所以可以用级联,
<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这个变量而设计的,
- 所以可以写成
angular.module('app.controller',[])
.controller('a',['$scope',function(c){
c.data=1;
}]);
- 如果不压缩也可以写成
angular.module('app.controller',[])
.controller('a',function($scope){
$scope.data=1;
});
2.直接声明一个全局方法
function a(a){c.data=1;}
a.$inject = ['$scope'];
angular.module('app',[]);
angular.bootstrap(document, ['app']);
controller的$inject对象也是同上原因声明第一个参数为$scope,如果不压缩可以忽略
数据绑定
数据绑定是用了2个大括号,并且获取controller中的数据，如果使用指令则{{}}可以省略直接写属性
- 下一篇：Ⅱ.AngularJS的点点滴滴--缓存
- 本文链接地址：Ⅰ.AngularJS的点点滴滴--引导
Ⅰ.AngularJS的点点滴滴--引导的更多相关文章
- Ⅱ.AngularJS的点点滴滴--缓存
模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...
- Ⅶ.AngularJS的点点滴滴-- 事件
事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...
- Ⅵ.AngularJS的点点滴滴-- 指令
指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...
- Ⅴ.AngularJS的点点滴滴-- 资源和过滤
资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...
- Ⅳ.AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
- angularjs 笔记(1) -- 引导
首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...
- AngularJS的启动引导过程
原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...
- AngularJS1
Ⅰ.AngularJS的点点滴滴--引导 AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 ###页面引导实例化 * * * ...
随机推荐
- Ubuntu修改语言环境为英文
转自把语言环境变量改为英文 将Ubuntu系统语言环境改为英文的en_US.UTF-8 查看当前系统语言环境 locale 编辑配置文件,将zh_US.UTF-8改为en_US.UTF-8,zh改为e ...
- QLGame 2D Engine编写环境搭建
QLGame 2D Engine编写 (win7环境搭建) 广州麒麟网络工作室,计划制作一款2d game engine,基于opengl(es)平台,暂时支持android,以后考虑支持linux, ...
- Spring 定时任务 quartz的配置
环境:我用的是spring3.2,其中引入了quartz-1.5.2.jar 先写一个任务类: package com.hlcg.common.task; public class TestJob { ...
- 【BZOJ 3473】 字符串 (后缀数组+RMQ+二分 | 广义SAM)
3473: 字符串 Description 给定n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串? Input 第一行两个整数n,k. 接下来n行每行一个字符串 ...
- mysql 连接url中useUnicode=true&characterEncoding=UTF-8 的作用
添加的作用是:指定字符的编码.解码格式. 例如:mysql数据库用的是gbk编码,而项目数据库用的是utf-8编码.这时候如果添加了useUnicode=true&cha ...
- [转贴]C++、C#写的WebService相互调用
以下宏文(原文在 http://blog.sina.com.cn/s/blog_4e7d38260100ade4.html),是转贴并进行了修饰编辑: 首先感谢永和兄提供C++的WebService服 ...
- Android4.0以下View的Drag和Drop简单实现
主要代码部分: 实现View的onTouch方法,变换落点的X,Y坐标,定义两个变量存放拖动前的坐标位置. int prevX,prevY; @Override public boolean onTo ...
- hud1520Anniversary party(树形DP）
链接 第一道树形DP 根据左儿子 右兄弟 将多叉树转化成二叉树 结构体里保存取这个节点和不取这个节点的最大值 #include <iostream> #include<cstdio& ...
- win7+ubuntu 13.04双系统安装方法
转自:http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html 当需要频繁使用ubuntu时,vmware虚拟机下运行ubuntu, ...
- JavaScript高级程序设计28.pdf
classList属性 在操作类名时需要通过className属性添加.删除和替换类名 <div class="bd user disabled">...</di ...