基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
什么是 AngularJs？网上一大堆资料，没能真正说明白。
AngularJs 就是一个函数库，算不上一个框架，源码2万2千多行，提供了前端MVC的开发方式，
有双向绑定，指令等特性，这是具有革命性的。我是多么反感jQuery 用选择器 选择元素 ，绑定事件，进行一大堆DOM操作，一旦代码过多，非常不好维护，html结构改变，又要重写js代码,
不过 jQuery 对 ajax的封装 是其他框架 匹敌不了的，接近于标准。
Bootstrap 是一个 css 库，对于搞后端出生的娃，比较友好。
AngularStrap 是一个 在AngularJs 中 使用的 Bootstrap 组件库，比较友好。
对于任意的Javascript 函数库 与 框架，只要Javascript 基础扎实，研究一下,都可以 信手拈来，今天来使用 AngularJs
来实现 省市区联动，来体验一下 AngularJs 双向绑定 不是盖的。
来看看我们的项目结构：
bower_components 下的库、框架 ， 是使用bower 安装的 。bower install 库 --save
lib 下面的是我们自己写的js。
先看我们的 页面：index.html
- <!DOCTYPE html>
- <html lang="zh-CN" ng-app="App">
- <head>
- <meta charset="UTF-8">
- <title>前端研究</title>
- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
- </head>
- <body>
- <div class="container" ng-controller="IndexCtrl">
- <h1 class="text-center text-danger">Angular 地址联动示例</h1>
- <div class="form-horizontal">
- <div class="form-group">
- <label class="col-md-2 control-label">
- 地址
- </label>
- <div class="col-md-10">
- <select required="" class="form-control" ng-model="address.province" ng-options="key as key for (key,value) in division"
- ng-change="address.city='';address.district='';">
- <option value="">省</option>
- </select>
- <select class="form-control" ng-model="address.city" ng-options="key as key for (key,value) in division[address.province]"
- ng-change="address.district='';">
- <option value="">市</option>
- </select>
- <select class="form-control" ng-model="address.district" ng-options="value as value for value in division[address.province][address.city]">
- <option value="">区</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <button type="submit" class="btn btn-primary btn-sm" ng-click="submit()">
- 提交
- </button>
- </div>
- </div>
- </div>
- </div>
- <script src="bower_components/jquery/dist/jquery.js"></script>
- <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
- <script src="bower_components/angular/angular.js"></script>
- <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
- <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
- <script src="lib/app.js"></script>
- <script src="lib/controllers.js"></script>
- <script src="lib/services.js"></script>
- <script src="lib/directives.js"></script>
- <script src="lib/filters.js"></script>
- </body>
- </html>
<!DOCTYPE html>
<html lang="zh-CN" ng-app="App">
<head>
<meta charset="UTF-8">
<title>前端研究</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div class="container" ng-controller="IndexCtrl">
<h1 class="text-center text-danger">Angular 地址联动示例</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">
地址
</label>
<div class="col-md-10">
<select required="" class="form-control" ng-model="address.province" ng-options="key as key for (key,value) in division"
ng-change="address.city='';address.district='';">
<option value="">省</option>
</select>
<select class="form-control" ng-model="address.city" ng-options="key as key for (key,value) in division[address.province]"
ng-change="address.district='';">
<option value="">市</option>
</select>
<select class="form-control" ng-model="address.district" ng-options="value as value for value in division[address.province][address.city]">
<option value="">区</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-primary btn-sm" ng-click="submit()">
提交
</button>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="lib/app.js"></script>
<script src="lib/controllers.js"></script>
<script src="lib/services.js"></script>
<script src="lib/directives.js"></script>
<script src="lib/filters.js"></script>
</body>
</html>
程序 主模块 ： app.js
- /**
- *@class index
- *@description App主模块,所有的模块被主模块引用
- *@time 2014-09-20 10:53
- *@author StarZou
- **/
- var App = angular.module('App', ['mgcrea.ngStrap', 'App.controllers', 'App.services', 'App.directives', 'App.filters']);
- console.log(App);
/**
*@class index
*@description App主模块,所有的模块被主模块引用
*@time 2014-09-20 10:53
*@author StarZou
**/
var App = angular.module('App', ['mgcrea.ngStrap', 'App.controllers', 'App.services', 'App.directives', 'App.filters']);
console.log(App);
控制器模块 ：controllers.js
- /**
- *@class controllers
- *@description 控制器模块,所以的控制器注册在此模块下
- *@time 2014-09-20 10:56
- *@author StarZou
- **/
- var AppControllers = angular.module('App.controllers', ['mgcrea.ngStrap']);
- AppControllers.controller('IndexCtrl', ['$scope', '$modal', function ($scope, $modal) {
- $scope.division = {"北京市": {"北京市": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"]}, "上海市": {"上海市": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县"]}, "天津市": {"天津市": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"]}, "重庆市": {"重庆市": ["万州区", "涪陵区", "渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "黔江区", "长寿区", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "梁平县", "城口县", "丰都县", "垫江县", "武隆县", "忠县", "开县", "云阳县", "奉节县", "巫山县", "巫溪县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县", "江津市", "合川市", "永川市", "南川市"]}, "四川省": {"成都市": ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江县", "金堂县", "双流县", "郫县", "大邑县", "蒲江县", "新津县", "都江堰市", "彭州市", "邛崃市", "崇州市"], "自贡市": ["自流井区", "贡井区", "大安区", "沿滩区", "荣县", "富顺县"], "攀枝花市": ["东区", "西区", "仁和区", "米易县", "盐边县"], "泸州市": ["江阳区", "纳溪区", "龙马潭区", "泸县", "合江县", "叙永县", "古蔺县"], "德阳市": ["旌阳区", "中江县", "罗江县", "广汉市", "什邡市", "绵竹市"], "绵阳市": ["涪城区", "游仙区", "三台县", "盐亭县", "安县", "梓潼县", "北川羌族自治县", "平武县", "江油市"], "广元市": ["市中区", "元坝区", "朝天区", "旺苍县", "青川县", "剑阁县", "苍溪县"], "遂宁市": ["船山区", "安居区", "蓬溪县", "射洪县", "大英县"], "内江市": ["市中区", "东兴区", "威远县", "资中县", "隆昌县"], "乐山市": ["市中区", "沙湾区", "五通桥区", "金口河区", "犍为县", "井研县", "夹江县", "沐川县", "峨边彝族自治县", "马边彝族自治县", "峨眉山市"], "南充市": ["顺庆区", "高坪区", "嘉陵区", "南部县", "营山县", "蓬安县", "仪陇县", "西充县", "阆中市"], "眉山市": ["东坡区", "仁寿县", "彭山县", "洪雅县", "丹棱县", "青神县"], "宜宾市": ["翠屏区", "宜宾县", "南溪县", "江安县", "长宁县", "高县", "珙县", "筠连县", "兴文县", "屏山县"], "广安市": ["广安区", "岳池县", "武胜县", "邻水县", "华莹市"], "达州市": ["通川区", "达县", "宣汉县", "开江县", "大竹县", "渠县", "万源市"], "雅安市": ["雨城区", "名山县", "荥经县", "汉源县", "石棉县", "天全县", "芦山县", "宝兴县"], "巴中市": ["巴州区",