AngularJs学习二--路由、模块、依赖注入

路由 模块 依赖注入
-> AngularJS的模块化实现
-> 一个完整的项目结构是怎样的
-> 使用ngRoute进行视图之间的路由
-> 一切都是从模块开始的
-> ng官方推荐的模块切分方式是什么
-> 模块之间的依赖应该怎么做?–依赖注入

<– 全局污染 –>
把一个函数或变量定义成全局函数,叫做全局空间污染。为了避免全局空间污染,angular提供了ng-module
-> 用angular这个全局对象,通过.module定义一个’HelloAngular’模块
var helloModule=angular.module(‘HelloAngular’,[]);
-> 用module方法的实例调用模块上controller方法,创建一个’helloNgCtrl’的控制器,后面的[]不确定是什么意思(防止压缩吗?)。实现模块化
helloModule.controller(‘helloNgCtrl’,[‘scope,function( scope){}]);
<– angular模块 –>
-> 模块是什么?
是一个集合,模型、视图、控制器、过滤器、服务…组合到一起,实现某一个功能;

<– ngRoute进行视图之间的路由 –>(一个项目之间有多个视图,而多个视图进行切换的方法就是通过URL进行切换,然后有控制器将视图生成。)
routeProvider : 提供路由,通过访问不同路径,展示不同视图,视图由控制器生成出来
controller 控制器(遥控器)控制视图,数据模型(机顶盒),即遥控器可以跟机顶盒交互也可以和电视机(视图)交互。可以看出在MVC中控制器处于主控方的地位。
-> routeProvider.when()

路由:通过when和otherwise两个方法,让url与相应内容对应
这里写图片描述

路由:本质上是利用地址栏中url的不同展示不同的视图,视图由控制器利用模板生成出来的(和监察者模式相似),url中还可以带参数(/list:bookid)
两个方法:when和otherwise

url地址中的#:防止浏览器向后台提交请求,代表内部锚点,不会向服务端发起请求
通过”#/目录名”方式告诉浏览器在页面内进行跳转,angular会拦截到这个url地址,把”#”后面的内容取出来,和routeProvider进行匹配,展示相应的视图;所以可以把不同的视图交给不同的控制器处理,把视图之间的职能分开,用多个控制器处理不同的视图内容

模块:入口文件app,然后通过module,存放多个依赖注入,和路由配置
模块之间的依赖注入
angularjs的模块是一个集合,由模型 视图 控制器 过滤器 服务…等等东西组合在一起 实现某一个功能 就叫一个模块
这里写图片描述

ng-app作为启动点的开始,在加载AngularJS完毕之后它就会去找ng-app这个指令(只有一个)。
这里写图片描述
这里写图片描述

这里写图片描述
ng开头的angular自己提供的

一个项目的结构,将模块分开方便多人开发
这里写图片描述

发布了25 篇原创文章 · 获赞 10 · 访问量 15万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章