今天完成的事情：

完成index一个总的页面的布局，依赖，路由配置，能够实现页面跳转。跳转到一个有导航栏的页面。

明天计划的事情：

表单中的各种ng啥的验证。

遇到的问题：

表单中账号密码框不需要发往后台验证吧，只要在input框中写ng啥的判断就好么？

如.ng-valid         {  }

.ng-invalid     {  }

.ng-pristine     {  }

.ng-dirty         {  }

收获：

首先给大家介绍angular-ui-router的基本用法。

如何引用依赖angular-ui-router

angular.module('app',["ui.router"])

.config(function($stateProvider){

$stateProvider.state(stateName, stateCofig);

})

$stateProvider.state(stateName, stateConfig)

stateName是string类型 写的是浏览器地址栏上的加的

stateConfig是object类型 这里写配置

//statConfig可以为空对象

$stateProvider.state("home",{});

//state可以有子父级

$stateProvider.state("home",{});

$stateProvider.state("home.child",{})

//state可以是链式的

$stateProvider.state("home",{}).state("about",{}).state("photos",{}); 这种很常用，写多个页面

stateConfig包含的字段：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data

$urlRouteProvider

$urlRouteProvider.when(whenPath, toPath)

$urlRouterProvider.otherwise(path) 这要用这个，也就用这个，用来在路径没有匹配的路由的时候，跳转到一个默认的路径，就这一个功能。

$urlRouteProvider.rule(handler)

关于stateConfig中resolve用法

ng-route模块中的when()和ui-route的state()都提供了resolve属性。

为什么需要使用resolve？

当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。

resolve是干嘛用的 resolve属性里的值会在路由成功前被预先设定好，然后注入到控制器中。通俗地将，就是等

数据都“就位”后，才进行路由（其实我觉得也不能叫路由，因为路由是一些列的操作，其中就包括了设置resolve属性等等）。这样的好处就是页面仅会被渲染一遍。

除此之外还可以借助$ocLazyLoad动态加载js、css，

在实际项目中service和controller文件都是通过ocLazyLoad加载，并且是放在resolve中加载。

表单验证<AngularJs>

http://www.cnblogs.com/rohelm/p/4033513.html

1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />  

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

<input type="text" ng-minlength="5" />

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

<input type="text" ng-maxlength="20" />

<div>

  <div>

    <label for="minlength">2.最小长度=5</label>

  </div>

    <div>

      <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" />

    </div>

</div>

2.最小长度=5:{{user.minlength}}<br>

在测试中我们发现，只有当表达式满足验证，才会实时进行双向绑定

实例

经过验证的表单

布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true：

formName.inputFieldName.$valid

未通过验证的表单

formName.inputFieldName.$invalid

还没搞完，差显示提示