Ⅰ.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. 漫游Kafka实战篇clientAPI

    原文地址:http://blog.csdn.net/honglei915/article/details/37697655 Kafka Producer APIs 旧版的Procuder API有两种 ...

  2. JavaScript中的try...catch和异常处理

    在JavaScript可以使用try...catch来进行异常处理.例如: try { foo.bar();} catch (e) { alert(e.name + ": " + ...

  3. Matlab splinetx

    function v = splinetx(x,y,u) %SPLINETX Textbook spline function. % v = splinetx(x,y,u) finds the pie ...

  4. 开源搜索引擎Iveely 0.8.0

    开源搜索引擎Iveely 0.8.0 这是一篇博客,不是,这是一篇开源人的心酸和喜悦,没有人可以理解我们的心情,一路的辛酸一路的艰辛,不过还好,在大家的支持下,总算是终见天日,谢谢那些给予我们无私帮助 ...

  5. Linux下Nagios

    Linux下Nagios的安装与配置   一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机 ...

  6. .net cookie

    HttpCookie HttpRequest HttpResponse 这3个  类 . 之间的关系 . 请求 ,相应 都有一个   public HttpCookieCollection Cooki ...

  7. HDU 1501 Zipper(DP，DFS)

    意甲冠军  是否可以由串来推断a,b字符不改变其相对为了获取字符串的组合c 本题有两种解法  DP或者DFS 考虑DP  令d[i][j]表示是否能有a的前i个字符和b的前j个字符组合得到c的前i+j ...

  8. Hack 语言学习/参考---1.3 Summary

    Summary Hack provides the following, non-exhaustive list of features: Ability to annotate function a ...

  9. nolock引发

      Sql Server之旅——终点站 nolock引发的三级事件的一些思考   曾今有件事情让我记忆犹新,那年刚来携程不久,马上就被安排写一个接口,供企鹅公司调用他们员工的差旅信息,然后我就三下五除 ...

  10. MVC4新功能．．．压缩和合并js文件和样式文件

    1.在App_Start文件夹中BundleConfig.cs类中添加相应的文件 1.1bundles.Add(new ScriptBundle("~/bundles/adminJs&quo ...