使用AngularJS开发商城-（使用AngularJS的双向数据绑定机制）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BeautyBeier/article/details/53893337

1.AngularJS的基本介绍

1-1 初始化模块、依赖注入

首先介绍AngularJS中常用的指令ng-app、ng-controller，在这之前要引用AngularJ.js

var app=angular.module("myapp",[]);//myapp是一个模块
        app.controller("HelloAngular",function($scope){//依赖注入的特性
            $scope.greeting={
                text:'hello',
                name:'we',
                action:'say'
            };
        })

如果想要显示hello，只需要在body中写：

<p>{{greeting.text}}</p>

网页端运行结果：

1-2AngularJs的特性-双向数据绑定

实现的效果图：

这是就是双向数据绑定的一个简单效果演示，都不需要写js只需要简单的html代码即可实现。

    <div>
        <input type="text" ng-model='greeting.text'/>
        <p>{{greeting.text}},AngularJS</p>
    </div>

2.AngularJS实战

2-1 MVC

2-2 Bookstore书店系统的实现

这个小型的的书店系统模拟了AngularJS路由的配置以及ng-grid控件的使用。动态演示效果：

AngularJs路由配置的代码：

var routerApp=angular.module('myapp',['ui.router','ngGrid','bookListModule','BookDetailModule'])
// 由于整个应用都会和路由打交道，所以这里把$state和$stateParams这两个对象放到$rootScope
// 这里的run方法只会在angular启动的时候运行一次


routerApp.run(function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});


// 配置路由这里采用的是ui-router这个路由，而不是ng原生的路由
// ng原生的路由不能支持前台视图，所以这里必须使用ui-router
routerApp.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/index");
    $stateProvider
        .state('index',{
            url:"/index",
            views :{
                "":{
                    templateUrl:'app/src/tpls/home.html'
                },
                "main@index":{
                    templateUrl:'app/src/tpls/loginForm.html'
                }
            }
        })
        .state('booklist',{
            url:'/{bookType:[0-9]{1,4}}', 
            views:{ //注意这里的写法，每一个页面带有多个ui-sref
                '':{
                    templateUrl:"app/src/tpls/bookList.html"
                },
                'booktype@booklist':{
                    templateUrl:'app/src/tpls/bookType.html'
                },
                'bookgrid@booklist':{
                    templateUrl:'app/src/tpls/bookGrid.html'
                }

            }
        })
        //新增书籍
        .state('addbook',{
            url:'/addbook',
            templateUrl:'app/src/tpls/addBookForm.html'
        })
        //内容页
        .state("bookdetail",{
            url:'/bookdetail/:bookId', //这里在路由中传参数
            templateUrl:'app/src/tpls/bookDetail.html'
        })
})

**注意要把 $sate,$stateparams这两个参数注入到根作用域下。