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. uva 1400 - "Ray, Pass me the dishes!"

    又是一道线段树区间更新的题: #include<cstdio> #include<algorithm> #include<cstring> #define ll l ...

  2. Html5 跨域通信

    H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...

  3. win7 安装SQL Server 2005 开发版 图文教程

    转自win7 安装SQL Server 2005 开发版 图文教程 ----------------------------写在安装前------------------------------ 一. ...

  4. Spring 配置方式

    1.bean的配置方式:通过全类名(反射),通过工厂方法(静态工厂方法&实例工厂方法).FactoryBean. 2.静态工厂方法:直接调用某一个类的静态方法就可以返回bean的实例. cla ...

  5. CAS单点登录配置[5]：测试与总结

    终于要结束了... 测试 1 我们同时打开Tomcat6和Tomcat7,如果报错请修改. 打 开浏览器,输入http://fighting.com/Client1,进入CAS登录界面,这里我们先输入 ...

  6. [转贴]Eclipse IDE for c++配置

    从工作到现在已经有快一年多没用过C/C++了,现在想重新捡起来,但是以前一直是在windows下面进行开发,使用最多的是Eclipse和Myeclipse,因为这些都是开源的软件,并不收费,所以现在也 ...

  7. Android Training精要（二）開啟ActionBar的Overlay模式

    在3.0上的實現 <resources> <!-- the theme applied to the application or activity --> <style ...

  8. show processlist 输出ID 和 information_schema.PROCESSLIST 的id,information_schema.innodb_trx的TRX_MYSQL_T

    Session 1: mysql> start transaction; Query OK, 0 rows affected (0.00 sec) mysql> update Client ...

  9. IIS7部署ASP.NET MVC4程序报错解决

    今天安装了windows7 开发web项目需要安装IIS,当安装完以后,web程序已经映射到了本地IIS上,运行出现如下错误提示 处理程序“PageHandlerFactory-Integrated” ...

  10. StorSimple 简介

     2014年 10月 28日,星期二 PRACHEETI NAGARKAR DESAI 混合云存储业务资深项目经理 在此我很荣幸地宣布StorSimple解决方案已经在中国正式上市.该方案为IT部 ...