基本概念和用法-综合应用BookStore 2-8

图片.png

界面原型设计

拿到一个项目以后，首先根据功能点，根据需求分析，把界面先画出来，有了这个界面以后才能去搭建前台的一些界面，

怎么切分功能模块建立项目目录结构

Paste_Image.png

根据划分的目录结构使用angularjs UI和Bootstrap编写UI

使用angularjs UI和Bootstrap编写UI先把界面先拉出来，可能没有功能，点击一些东西没有真正请求后台，但是我们可以先把界面先写出来，这样像流水线那样去写代码，可能有些人比较喜欢从前台一直写道后台，一直从css到js然后一直写道后台服务，写道数据库脚本，那么这样的开发方式。这种方式也不能说不好，但是从生产效率来说，最好还是使用流水线的方式， 就是说你做前台一些工作的时候，尽量把前台的一些东西写完，一批一批的去做，不用频繁的去切换上下文，因为频繁切换实际上带来是比较多效率的损失，

Paste_Image.png

使用Bootstrap布局登入页面

这里登入页面没做校验直接可登入

Paste_Image.png

点击登入进入列表页

列表页左侧是根据不同的书籍类型右侧是ng-guer

点击左侧会加载不同类型数据

这些数据都是假的， 把假数据写在json文件里面，

[{
    "bookId":"1",
    "index": "1",
    "name": "用AngularJS开发下一代WEB应用",
    "author": "大漠穷秋",
    "pubTime": "2014-01-01",
    "price":"35"
}, {
    "bookId":"2",
    "index": "2",
    "name": "Ext江湖",
    "author": "大漠穷秋",
    "pubTime": "2014-01-01",
    "price":"35"
}]

这种做法在开发中比较有用，如果总是依赖后台可能老是需要打扰你的同事，或者是你一直切换上下文，到后台去调试服务，这样其实工作的效率不会特别高，做前台的时候。可以做一些假的数据放在json里，把逻辑测试通过以后再去写后台，这个过程你顺手还把数据结构数据的结构给定义了，

首先把界面写出来，一开始要写的就是模板，根据设计图然后通过样式，把模板写出来，

比如登入的表单，loginForm.html

    

        

            

                
图书管理系统
            
        
        

            

                

                    

                        
                            用户名：
                        
                        

                            
                        
                    
                    

                        
                            密码：
                        
                        

                            
                        
                    
                    

                        

                            登录
                            注册
                        
                    
                
            
        
    

home.htmlhome是最开始作为容器的一个东西，

把模板都写出来之后再去写js的代码，

路由的使用

AngularJS内置有路由的工具但是不太好用，在真正的项目开发中，还是要用UIRouter路由工具，

Paste_Image.png