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的点点滴滴--引导的更多相关文章

  1. Ⅱ.AngularJS的点点滴滴--缓存

    模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...

  2. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  3. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  4. Ⅴ.AngularJS的点点滴滴-- 资源和过滤

    资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...

  5. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

  6. Ⅲ.AngularJS的点点滴滴-- 路由

    路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

  7. angularjs 笔记(1) -- 引导

    首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...

  8. AngularJS的启动引导过程

    原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...

  9. AngularJS1

    Ⅰ.AngularJS的点点滴滴--引导   AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 ###页面引导实例化 * * * ...

随机推荐

  1. 分析ECMall的注册与登录机制

    ecmall的注册流程index.php?app=member&act=register. 首先app是member,act是register方法. index.php中.通过ecmall的s ...

  2. 移动应用产品开发-android开发(二)

    这段时间实在太忙了,也没什么精力来写博客,还是没养成写博客的习惯,还是得记载下来,不然时间久了就忘记了. 早上一大早就来公司了,趁还早,拟定今天的工作内容和计划后,赶紧记载点东西. 最近做androi ...

  3. 用js判断操作系统和浏览器类型

    判断操作系统和浏览器的js代码 navigator.userAgent:userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值.    navigator.pla ...

  4. 利用TEA算法进行数据加密

    TEA(Tiny Encryption Algorithm)是一种小型的对称加密解密算法,最初是由剑桥计算机实验室的 David Wheeler 和 Roger Needham 在 1994 年设计. ...

  5. VS2005 检测内存泄漏的方法(转载)

    一.非MFC程序可以用以下方法检测内存泄露: 1.程序开始包含如下定义: #ifdef _DEBUG #define DEBUG_CLIENTBLOCK new( _CLIENT_BLOCK, __F ...

  6. iOS设备下添加button的按下效果

    在触屏上, button的按下效果用:active触发, 但是我发现iOS设备上:active效果并没有生效. :active pseudo-class doesn't work in mobile ...

  7. javascript循环

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. C# config配置文件 自定义节点读取

    主要使用:ConfigurationSection IConfigurationSectionHandler已被否决 http://technet.microsoft.com/zh-cn/librar ...

  9. poj 2079 Triangle(旋转卡壳)

    Triangle Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 8917   Accepted: 2650 Descript ...

  10. JavaScript高级程序设计59.pdf

    dropEffect和effectAllowed 利用dataTransfer对象,传输数据.确定被拖动元素以及作为放置目标的元素能够接受什么操作,为此需要访问对象的两个属性dropEffect和ef ...