Ⅰ.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. Nyoj 城市平乱(图论)

    描述 南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市分别编号从1到M. 现在,小工军师告诉南将军,第K号城市发生了暴乱,南将军从各个部队都 ...

  2. DOS call 中的%cd%,当前文件夹演示

    最近的工作要处理.bat文件,在dos文件错综复杂的调用过程中,我迷失了,于是%cd% @echo %cd% @cd %cd%\-- @pause @call %cd%\--\1.bat @pause ...

  3. js获取网页的各种高度

    原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...

  4. JavaScript之再谈回调与闭包

    前些阵子写了几篇关于回调和闭包的博文,感觉自己都是似懂非懂,最近在项目中又碰到了类似的情况,故在此咱们来重弹js中的回调与闭包. 先说说回调: 百度百科: 回调函数就是一个通过函数指针调用的函数.如果 ...

  5. thymeleaf模板引擎shiro集成框架

    shiro权限框架.前端验证jsp设计.间tag它只能用于jsp系列模板引擎. 使用最近项目thymeleaf作为前端模板引擎,采用HTML档,未出台shiro的tag lib,假设你想利用这段时间s ...

  6. 批处理获取IP地址

    setlocal ENABLEEXTENSIONS & set "i=0.0.0.0" & set "j=" for /f "toke ...

  7. &lt;C++ 实现设计模式&gt; 观察者模式

    观察者模式,又称公布--订阅,mvc模式等. 通俗点讲,比方股票来说,非常多人关注一支股票,派一个人去观察股票的情况,一有变化(观察),就通知全部的预定这个消息的人. 而我们常见的mvc模式,v是指v ...

  8. Google Summer of Code 建议被接收的5个技巧

    Google Summer of Code 建议被接收的5个技巧 本文翻译自:http://www.di.ens.fr/~baghdadi/TXT_blog/5_advices_to_get_your ...

  9. 安卓CTS官方文档之兼容性方案概览

    兼容性方案概览 安卓的兼容性方案让安卓手机生产商能够很容易就开发中可兼容的安卓设备(天地会珠海分舵注:可兼容什么呢?就是可以兼容标准google提供的安卓系统可以支持的功能,以防手机生产商把开源的安卓 ...

  10. linux下编译安装mysql5.5以上版本

    安装cmake: tar zxvf cmake-2.8.4.tar.gz cd cmake-2.8.4 ./configure  --prefix=/usr/local/cmake make & ...