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. spring 属性配置细节

    1.使用构造器注入属性值可以指定参数的位置和参数的类型!以区分重载的构造器.例如:<constructor-arg value="" type="java.lang ...

  2. Linux下实现定时器Timer的几种方法

    http://blog.csdn.net/lxmky/article/details/7669296 第六章 IO复用:select和poll函数 http://www.cnblogs.com/4ti ...

  3. 【Xamarin 挖墙脚系列：IOS 开发界面的3种方式】

    原文:[Xamarin 挖墙脚系列:IOS 开发界面的3种方式] xcode6进行三种基本的界面布局的方法,分别是手写UI,xib和storyboard.手写UI是最早进行UI界面布局的方法,优点是灵 ...

  4. linux使用man命令后退出

    linux使用man命令后 使用q退出

  5. Web安全测试之XSS（转）

    XSS 全称(Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞.指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的 ...

  6. bzoj2257

    不难发现其实这个捣鼓过程就是一个辗转相减所以最小燃料是瓶容量的最小公约数然后穷举约数即可 ..] of longint; n,k,x,i,m,j,t:longint; procedure sort(l ...

  7. c#生成注册码的两种方法(mac地址与IP地址)

    using System; using System.Management; using System.Security.Cryptography; using System.IO; using Sy ...

  8. 2821: 作诗(Poetize)

    2821: 作诗(Poetize) Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 1078  Solved: 348[Submit][Status] ...

  9. 关于.ToList()： LINQ to Entities does not recognize the method ‘xxx’ method, and this method cannot be translated into a store expression.

    LINQ to Entities works by translating LINQ queries to SQL queries, then executing the resulting quer ...

  10. Web---创建Servlet的3种方式、简单的用户注册功能

    说明: 创建Servlet的方式,在上篇博客中,已经用了方式1(实现Servlet接口),接下来本节讲的是另外2种方式. 上篇博客地址:http://blog.csdn.net/qq_26525215 ...