angularjs config_angularJS迷你笔记 第四集

ng的4大特征：

①基于MVC的设计模式、

②双向数据绑定

③依赖注入

④模块化设计

一、依赖注入的工作机制(了解)

当创建一个ng对象(比如说控制器对象)，如果需要$scope,将$scope服务直接注入进来就可以使用该服务，注入进来为什么就可以去用这个对象？

$injector 注入器，当需要注入服务的时候，ng这个框架会通过$injector再当前的服务的注册列表中去寻找该服务，如果该服务的名字存在列表中，ng框架就会通过实例化该服务，拿到该服务的对象，注入到对应的ng对象中，使服务可以去使用

简化：

查找-》创建

$injector常见API：

has('服务名称') 判断指定的服务是否存在

get('服务名称') 得到指定的服务的实例

二、模块化设计多模块之间的相互引用

面试题：

一个ng的模块都可以包含哪些？

①控制器：处理业务逻辑

②服务：把需要反复用到的功能封装，方便复用

③指令：扩展html标签

④过滤器：实现对于数据的筛选、过滤、格式化

在创建一个基于ng项目时候，创建多个模块，比如userModule,orderModule,deliveryModule..,多模块之间难免需要数据的通信，如何在一个模块中调用另外模块中的东西？？？

如果A模块需要调用B模块中的某些东西，在创建A模块，在它的第二个参数所对应的数组中写上B模块的名字。

angular.module('orderModule',['ng','userModule'])

三、ng内置模块 ngRoute基本用法

ngRoute模块是属于angularJS众多模块中的一个，通过ngRoute来实现SPA(Single Page Application)：ngRoute帮助实现路由地址和代码片段的绑定关系、多个页面的跳转、传参

3.1 SPA的介绍

SPA:单一完整页面的应用程序，整个应用程序中只有一个完整的页面，其余的都是代码片段

典型的SPA：邮箱、后台管理。。

http://localhost:63342/day4/demo03_SPA.html#/myRegister

SPA的工作原理：

http://127.0.0.1/index.html#/inbox

①解析完整的页面index.html

②解析#后所对应的inbox(路由地址)

③从叫做路由词典的配置找到inbox所对应的配置对象，找到真正要加载的代码片段的地址

④发起异步请求

⑤将请求来的代码片段插入完整的页面的容器中

3.2 使用ngRoute来实现SPA的基本步骤

①在项目中引入angular-route.js

②在创建自定义模块，指定依赖于ng、ngRoute

③通过ngView指定一个容器 用来盛放代码片段

④创建代码片段

⑤配置路由词典

app.config(function($routeProvider){

//通过when方法添加一条路由信息，

//第一个参数是路由地址(必须是/开头的)

//第二个参数是配置对象

$routeProvider

.when('/myLogin',{

templateUrl:'tpl/login.html'

})

.otherwise({redirectTo:'/myLogin'})

})

⑥测试路由地址配置是否正确

可以通过修改地址栏中的路由地址测试配置是否生效

练习：创建一个SPA，有2个代码片段，分别是test01.html test02.html，要求通过路由地址能够访问到对应的代码片段。

①引入js

②指定依赖ngRoute

③ngView

④创建代码片段

⑤配置路由词典

⑥测试

3.3 ngRoute实现页面的跳转

方式1：直接修改地址栏中的路由地址

方式2：js--》依赖于$location

$location.path('路由地址');

举个例子：

$location.path('/elmMain');

方式3：超链接

举个例子

退出登录

练习：创建一个SPA，有3个代码片段，分别是startlistorder，

start --》 按钮(点击时能够调到list)

list --》 有一个5个元素的列表，点击任何一个列表项跳转到order(通过超链接)

order --》按钮(点击跳转到start)

3.4 ngRoute跳转时传递参数

①明确发送方、接收方

②接收方做准备工作

2.1 配置接收方的路由地址

$routeProvider.when('/myOrder',{})

-->

$routeProvider.when('/myOrder/:id',{})

2.2 给接收方的页面 指定控制器，注入$routeParams(注入进来就保存了传递来的数据)

③发送参数

a href="#/myOrder/10"

$location.path('/myOrder/10')

四、ng常见的表单验证方式

ng提供了属性帮助完成表单验证。

$dirty

$pristine

$valid

$invalid

$error

练习：大家去实现一个表单页面，要求必须输入用户名和密码，才能点击登录按钮。

如果用户名或者密码没有填写，提示请输入用户名或者请输入密码

前提：

①给表单本身和每一个表单元素指定name属性

②给输入标签指定ngModel

举个例子：

"myForm.userPwd.$invalid &&

myForm.userPwd.$dirty">

请输入密码

登录

每日一练：

ngRoute：①创建SPA基本步骤 ②跳转 ③传参

实现一个SPA，有3个代码片段，分别是check(商品查看)pay(支付)send(发货)：

check: button(点击跳转到pay并发送20)

pay: 接收到参数显示在页面，超链接(点击跳转到send)

send：button (点击跳转到check)