Ⅰ.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的更多相关文章

  1. Angularjs1培训

    Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...

  2. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  3. angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)

    笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新  可以在我的博客  查看我 已经封装好的 纯 js写的图片查看器插件    博客链接 懒得把 ...

  4. 关于vue，angularjs1,react之间的对比

    1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...

  5. Angular系列-AngularJs1使用Ace编辑器

    Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxo ...

  6. AngularJS1.X版本基础

    AngularJS  知识点: DataBinding Providers Validators Directives  Controllers Modules Expressions Factori ...

  7. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  8. angularjs1 实现地图添加自定义控件（搜索功能）及事件

    // 添加地图自定义控件的事件 function addEventHandler(target, eventName, handler) { if (target.addEventListener) ...

  9. AngularJS1.3一些技巧

    前言 框架选择.在上一篇文章评论中,有人说angular1.3是个过时的东西,建议使用angular2.其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方, ...

  10. 【原创】angularjs1.3.0源码解析之service

    Angular服务 在angular中,服务(service)是以提供特定的功能的形式而存在的. angular本身提供了很多内置服务,比如: $q: 提供了对promise的支持. $http: 提 ...

随机推荐

  1. Loadrunner11.00破解方法

    1.下载 从http://www.jb51.net/softs/71240.html上面下载到loadrunner 11.0 2.安装loadrunner 11.0 下载之后,我是直接解压到硬盘,再安 ...

  2. JS 精度问题处理

    /除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:accDiv(arg1,arg2) ...

  3. 基于Linux平台病毒BlackHole病毒的决心

    今天会见了病毒,少量的代码,但在使用小漏洞的函数的,真正的杀伤力相当惊人. 转载请注明出处:http://blog.csdn.net/u010484477谢谢^_^ watermark/2/text/ ...

  4. Web文件（图片）上传方法

    在开放Web应用程序的时候经常会遇到图片或者是文件上传的模块,这里就是该模块的实现的后台方法 上传图片方法 /// <summary> /// 功能:上传图片方法 /// </sum ...

  5. hust1384---The value of F[n]

    Description For any integer i>=3 we have F[i]=(F[i-1]+2*F[i-2]+3*F[i-3])%9901; Now give you F[0], ...

  6. 利用WebBrowser实现Web打印的分析

    原文:利用WebBrowser实现Web打印的分析 WebBrowser是IE内置的浏览器控件,无需用户下载.本文档所讨论的是有关IE6.0版本的WebBrowser控件技术内容.其他版本的IE应该也 ...

  7. WebBrowser一点心得，如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  8. [Elasticsearch] 分布式文件存储

    本文翻译自Elasticsearch官方指南的distributed document store一章. 分布式文档存储 在上一章中,我们一直在介绍索引数据和获取数据的方法.可是我们省略了非常多关于数 ...

  9. Ubuntu更改hosts档

    Ubuntu更改hosts档 打开hosts档 sudo gedit /etc/hosts 下载hosts,并全选复制 hosts 粘贴到hosts文件里.保存就可以 $(function () { ...

  10. Unix/Linux环境C编程新手教程(41) C语言库函数的文件操作具体解释

     上一篇博客我们解说了怎样使用Linux提供的文件操作函数,本文主要解说使用C语言提供的文件操作的库函数. 1.函数介绍 fopen(打开文件) 相关函数 open,fclose 表头文件 #in ...