Ⅰ.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. hdu Jungle Roads(最小生成树)

    Problem Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of for ...

  2. hdu 3460 Ancient Printer

    Problem Description The contest is beginning! While preparing the contest, iSea wanted to print the ...

  3. 小记 js unicode 编码解析

    原文:小记 js unicode 编码解析 var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; 关于这样的数据转换为中文问题,常用的两 ...

  4. hdu 3449 (有依赖的01背包)

    依赖背包 事实上,这是一种树形DP,其特点是每个父节点都需要对它的各个儿子的属性进行一次DP以求得自己的相关属性. fj打算去买一些东西,在那之前,他需要一些盒子去装他打算要买的不同的物品.每一个盒子 ...

  5. 【Swift】沙盒缓存

    本地sandbox缓存目录     沙盒の 主目录: po NSHomeDirectory()   /Users/SpongeBob/Library/Developer/CoreSimulator/D ...

  6. LeetCode：same_tree题解

    一.     题目: 给定两个二叉树,编写一个函数来检查它们是否相等或为空树.假设两个二叉树被觉得是相等的,那么它们在结构上是同样的,而且随意节点具有同样的值. 二.     分析 非常easy的题目 ...

  7. Thrift官方安装手冊（译）

    本篇是Thrift官网安装文档的翻译,原地址点击这里.Thrift之前是不支持Windows的.可是似乎0.9版本号以后已经支持Window了.介绍了Thrift安装的环境要求以及在centos,De ...

  8. MVC5+EF6 入门

    MVC5+EF6 入门完整教程九   前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发 ...

  9. centos下mysql 最新版最终成功安装！备份一下几个关键地方

    我本来仅仅是为了搭建简单的LAMP环境,亲自己主动手,却发现有这么多的问题会发生.(by default7#zbphp.com) 非常多地方给的安装Mysql的提示是通过yum一键安装.shell命令 ...

  10. WebApiContrib

    https://github.com/WebApiContrib ASP.NET Web API and Protocol Buffers Protocol Buffers are a super e ...